Develop Reference

Wordpress – Link to a date-filter element isn't added to the base url and apply filter

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.

Adding class to primary-nav link when on a sub-page based on the url

I have primary navigation that are just "in-page" links on the home page. I also have a section of three pages for pricing that live as sub-pages with the urls: /pricing/basic-pricing.html, /pricing/pro-pricing.html and /pricing/pricing-premium.html.
On those three pages, I have a side-nav to get back-and-forth between those pages. So two navigation elements (primary-nav and side nav). When on a sub-page i.e. /pricing/basic-pricing.html, I would like the primary-nav link called "pricing" to have an active class.
I have it working with the code below, but was wondering if there is a better way in case I add more sub-pages in the future. I don't want to have to add more jQuery just to accommodate a new page. Right now it's only looking to see if the url contains the string 'pricing' in the href and then it adds the class to the 'pricing' link in the primary nav.
<nav class="primary-nav">
<ul class="menu collapse vertical large-horizontal">
<li>features</li>
<li>options</li>
<li>pricing</li>
<li>testimonials</li>
<li>contact</li>
</ul>
</nav>
<ul class="vertical menu side-nav">
<li>Basic Pricing</li>
<li>Pro Pricing</li>
<li>Premium Pricing</li>
</ul>
$(document).ready(function () {
$('.side-nav.menu a.is-active[href*="pricing"]').each(function () {
$('.primary-nav .menu a[href$=pricing]').addClass('is-active');
});
});

you can use location global object to detect which url or uri you're in,
here a link t it documentation : link
example:
console.log(location.pathname)
// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url
in you case
// /pricing/basic-pricing.html

javascript: Resolving deeplinking issue

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 ?

How to open particular menu div in a new tab

I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".
Please help me with this......soon
/**************Script used to open Different menu div on page*********************/
$(".menu a").click(function(){
var id = $(this).attr('class');
id = id.split('-');
$("#menu-container .content").hide();
$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
return false;
});
<div class="menu-wrapper">
<ul class="menu">
<li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>
<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>
<li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>

This will work
<a target="_blank" href="yourlink">Link</a>
In your case
<div class="menu-wrapper">
<ul class="menu">
<li><a target="_blank" class="show-1" href="#">About Us</a></li> <li><a target="_blank" class="show-2" href="#">Rooms</a></li>
<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
<li><a target="_blank" class="show-4" href="#">Gallery</a></li>
<li><a target="_blank" class="show-5" href="#">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>

The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.
What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.

Please Try this fiddle
Demo
Just make minor change in your a tag
<a href="#" target="_blank">

You can give divs id:
<div id="show-1">About Us Content</div>
And create hyperlinks like:
<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>
This will open your div directly in new tab.

The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.
Regarding your code, the
... href="your new page link here"
that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on
it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here
But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.

Navigation with onClick / Javascript not working

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.