Here is the demo code:
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>
suppose, advertise is selected and and goes inside it. Clicking on back button sends back to All tab selected, how to get advertise selected.
I tried following codes but doesn't work
Back
<button type="button" onclick="history.back();">Back</button>
You should send back the data-filter from the inside page to identify which tab needs to be selected.
If received .advertising data-filter then you need to add class is-checked to the respective <a> tag
Example
Inside page
Back
don't forget to update the filename mainPage.php to your file name
Main page
<?php
$dataFilter = $_GET['dataFilter'];
?>
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>
Related
Page of WordPress site use an on page filter menu which user can click on items to filter posts type below. I have already added in each anchor tag href value.
<ul class="list-inline filter">
<li class="active">
All solutions
</li>
<li class="cat-item cat-item-1">
Metallurgy
</li>
<li class="cat-item cat-item-2">
Food industry
</li>
</ul>
And here is js code to simulate a click on the appropriate element based on a URL Fragment.
jQuery(document).ready(function($){
var currentFilter = window.location.hash.substr(1);
$('.js-filter [data-filter="'+ currentFilter +'"]').trigger('click');
});
The deal is when I click on anchor tag it isn't add a href value after base url. For example, I want to have an url "example.com/solutions#.Metallurgy". Click applies filter on data, but url stays as "example.com/solutions".
Moreover, when I change url directly to "example.com/solutions#.Metallurgy" Wordpress redirects me to "example.com/solutions/#.Metallurgy". It brings me to the same page with no filter applied.
I have a tab component say in a HTML strcture
<ul>
<li><a id='tab1' href='/url#tab1'> Tab1 </a></li>
<li><a id='tab2' href='/url#tab2'> Tab2 </a></li>
<li><a id='tab3' href='/url#tab3'> Tab3 </a></li>
</ul>
<div class='tab-content'>
content of respective div loaded on click.
</div>
Here the content of the respective TAB as the click handlers are in place for that and its working fine without any
problems. The click handler looks like
$('#tab2').click(function() {
//show tab2 content.
});
Now, I have to support deeplinking so that , when user comes through URL : http://url#tab2, need to show respective tab content. So for this,
my approach is to use 'hashchange' event , which will read hash params and load the content based on the hash value.
The query or the pain is , woundn't it cause a conflict between click event on a and hash change event?
What should be the appropriate way of resolving deepliking in this case ?
I have a bunch of filters done in HTML (and bootstrap, I believe)
<li>
Condition <i class="glyphicon glyphicon-chevron-down"></i>
<ul class="dropdown-menu">
<li>All</li>
<li>New</li>
<li>Used</li>
</ul>
</li>
Next to them I have an "Update button". I would like that when a filter is used, the option that you pick is somehow saved and sent along the next time you press Update. For example, in the form of a GET parameter &condition=new.
How can I do this?
I'm stuck on 'on click' action on new DOM elemets in JQuery. I have approximately the following html setup:
<ul class="dateList">
<li>
<a href='#' data-date="2016-01-01">
</li>
<li>
<a href='#' data-date="2016-01-02">
</li>
</ul>
<ul class="timeList">
<li>
<a href='#' data-time="00:00:00">
</li>
<li>
<a href='#' data-time="03:00:00">
</li>
</ul>
When the page loads, the time list is loaded for the first available date. If user clicks on a different date, the current time list items get removed and new items are generated from pre-loaded json.
If the user click on the time, it is supposed to show relevant information. And it does after the page is loaded, however, once the date gets changed and the new time list items are created the on click event stops working on new time items.
I've tried adding $('.timeList').find('li') and $('.timeList li').find('a') to the end of the function that generates the new time list items but it does not seem to work.
Any help will be appreciated!
you will need to reference a higher level selector, such as body which was created prior to the dynamic content addition
something like
$('body').on('click','.timeList li',function(){
// do stuff
})
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.