I am trying to show on pagination buttons title="text", I got to show on the button when I hover the link to page from some pages
But, how can I implement title text to the current Page?
Here is my code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{data.root.currentPage hash.pageNr}} current page}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}"
>
{{hash.pageName}}
</a>
some correction to the Code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{#if data.root.currentPage hash.pageName}} current page{{else}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}
{{/if}}
"
>
{{hash.pageName}}
</a>
Related
<a class="button" target=_remotePage" href=" here give a link but it's getting error on ui page">
Daily unit values
</a>
You have malformed HTML code, try this:
<a class="button" target="_blank" href="#">my link</a>
Valid options for target are:
_blank
_self
_parent
_top
framename
Reference: https://www.w3schools.com/tags/att_a_target.asp
On page A I have these navigation link:
<li>
<a href="PageB.aspx" target="_blank" class="active">
<span>Option 1</span> //<--I want to go to page B and load Ajax1
</a>
</li>
<li>
<a href="PageB.aspx" target="_blank">
<span>Option 2</span> //<--I want to go to page B and load Ajax2
</a>
</li>
On page B I have these navigation link to load ajax on this page:
<li >
<a href="AjaxHandler/Ajax1.ashx?Type=Page&Security=0">
<span>Ajax 1</span>
</a>
</li>
<li >
<a href="AjaxHandler/Ajax2.ashx?Type=Page&Security=0">
<span>Ajax 2</span>
</a>
</li>
I want when I click Option 1 on page A, it will go to page B and load Ajax 1 on page B and same goes to Option2, I want it to go to page B and load Ajax 2 on page B.
Right now the nav link on page A will only go to page B, and I need to click nav link on page B separately to load ajax on that page.
Can I achieve this via href on page A? Appreciate if anyone can help.
Big thanks to vicpermir I figured it out.
Page A: Put parameter to pass to Page B
<li>
<a href="PageB.aspx?ajaxRequest=1" target="_blank">
<span>Option 1</span> //<--I want to go to page B and load Ajax1
</a>
</li>
<li>
<a href="PageB.aspx?ajaxRequest=2" target="_blank">
<span>Option 2</span> //<--I want to go to page B and load Ajax2
</a>
</li>
Page B: Add class to ajax handler
<li >
<a href="AjaxHandler/Ajax1.ashx?Type=Page&Security=0" class="ajax1">
<span>Ajax 1</span>
</a>
</li>
<li >
<a href="AjaxHandler/Ajax2.ashx?Type=Page&Security=0" class="ajax2">
<span>Ajax 2</span>
</a>
</li>
$(document).ready(function (){ of javascript at Page B:
function LoadAjaxOnPage() {
let params = (new URL(document.location)).searchParams;
let paramVal = params.get("ajaxReq");
if (parseInt(paramVal) == 1) {
document.getElementsByClassName("ajax1")[0].click();
}
if (parseInt(paramVal) == 2) {
document.getElementsByClassName("ajax2")[0].click();
}
}
Basically what happen is, when page B load, it take the parameter passed from page A and auto click the href on Page B based on that parameter.
Hi I hope someone can help with this. I'm building a wordpress plugin. I just have basic knowledge of php and i managed to build the whole plugin except pagination. I have tried so many code using javascript but none is working for me. Here is the image. I want to divide the items with pagination
Thank you in advance!
A good approach will be to think about the pages like tabs. Then the page link will behave like buttons that show/hide based on the page link clicked.
Here's an example using jQuery
// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});
For this to work, you'd need a HTML structure a bit like this
<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div>
<div class="page-content" data-page="2" style="display: none;">
Page 2 content
</div>
<div class="page-content" data-page="3" style="display: none;">
Page 3 content
</div>
</div>
Here is a super basic jsfiddle
I want to capture all click events on the menu of my page.
I've setup a tag that will capture all click events on my page. It works with the trigger setup to "Click - All elements".
When I set up the trigger to specifically register only the clicks on elements of the menu var, nothing is detected. So, definetly, I'm doing somenthing wrong within the trigger.
EDIT 1:
this is the web page: www.chazki.com
Menu code:
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="new_service">Solicita un Chazki</a>
</li>
<li>
Faq
</li>
<li>
<p class="new_service new-service" style=" padding: 6px;"><a>Login</a></p>
</li>
<li>
<a class="btn btn-default btn-lg location_ac"><i class="fa fa-fw fa-spin fa-star"></i>Lima</a>
</li>
</ul>
<form>
<fieldset class="navbar-form navbar-left">
<input type="text" name="track-code" id="track-code" class="form-control" placeholder="Código de tracking?">
<button id="track-find-button" class="btn btn-default" type="button">Buscar</button>
</fieldset>
</form>
</div>
Try 1 on trigger:
Element ID: It's supposed to limit the clicks registered for only the div containing the menu.
I get this error in debugging mode:
Try 2 on trigger:
on Click ID.
Click ID error:
#
I could also use the ul tag for the trigger, as it is the only unordered list on the page.
Any hint is welcome. Thanks!
Basically I needed to understand the different variables in GTM. I've found Simo Ahava web very helpful in this regard.
https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
Thanks to Simo, I also understood the benefits of usen "Match CSS Selector" option.
So my configuration ended like this:
Using:
Click All Elements.
This trigger fires on "Some Clicks".
"Click Element" -> "Matches CSS Selector" -> "#navbar-ex-collapse ul li a, #navbar-ex-collapse ul li p"
As I have li and a html elements, I needed to use 2 CSS selectors, separated by a comma.
hi i have master page and menu like this
<ul id="ulhotel" runat="server">
<li class="userprof active"><a href="AddAdminDetail.aspx">
<p class="activenav">
<span class="entypo activenav">+</span>User Profile</p>
</a></li>
<li class="hoteldetails"><a href="AddHotelDetails.aspx">
<p>
<span class="entypo">j</span>Hotel Details</p>
</a></li>
<li class="hoteldirectory"><a href="AddHotelDirectory.aspx">
<p>
<span class="entypo">l</span>Hotel Directory</p>
</a></li>
<li class="appconfig"><a href="Appconfiguration.aspx">
<p>
<span class="entypo">#</span>App Configurate</p>
</a></li>
<li class="featoffers"><a href="OfferDashboard.aspx">
<p>
<span class="entypo">C</span>Offer Dashboard</p>
</a></li>
</ul>
now right now User Profile Is seleted now when i Click HotelDetail link I want to change it same as User Profile
i am trying this but its not working
$('#ulhotel li').click(function()
Thanks in advance.
You have
AddAdminDetail.aspx
AddHotelDetails.aspx
AddHotelDirectory.aspx
Appconfiguration.aspx
OfferDashboard.aspx
five different pages so you can also add active class to appropriate li tag on related page.
Comment Response
$('#ulhotel li').on('click',function(e)
and then set cookies for clicked li now when page redirected use that previously set cookies and add active class to appropriate li.
It is due to when you click link each time master page is loading.
you have to use script to change class in AddHotelDetails.aspx page to active related li.
In AddHotelDetails.aspx page you can use
$(document).ready(function(){
$('#ulhotel li').removeClass("active");
$('#ulhotel li.hoteldetails').addClass("active");
});
Hope this help you.