Blogger Ever

Function based on window location hash

Multiple tabs, accordion and popups, make them work on window location hash. Let me guide to opt-out function based on location hashes.

Now we all know that on click of a link who points to a div (adding id in href tag) will update the window.location.hash and the id of that particular div will be added in the end of the current location. But have you ever noticed that some sites have multiple tabs on click of any tab it updates the location and on refresh of page it opens the same tab.
So what makes the window location with hashes so important and how to perform those functions.

Well, to access the current hash of a location we use
window.location.hash
This one returns the current hash value from the location. Let's say the current location is:
http://abc.com/#tab1 
The return value would be #tab1. To make the functions based on that we're going to use them in if conditions. But what we are going to do is to remove first # from it, because I found that some browsers return window.location.hash value with # or without it. Lets remove it by replace function.
var x=window.location.hash.replace('#',''); 
If the current location contain #, that will be removed. Now we can access them like this:
if(x=='tab1'){
// Using jQuery
$('#tab1').addClass('active');
}
This one is just a glance of what can be done using window.location.hash. Further many stuff can be performed just need time to code them.

I found this has been used in popups, tabs, accordions, scroll to stuff and many more. Try it, if found something not clear comment below.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.