Question

I have gotta website powered by a set of jQueries; Dynamically loading the contents with a set of menu buttons.

Now, all I want to know is this:

Have you seen in blogger? The url is like

blogger.com/blogger.g?blogID=abcd#id

For the #id, if you put #overview it shows the stats. If you put #allposts it shows all the posts and similarly the content varies depending only on the #id in the url. I’ve seen many websites use this method to provide PermaLinks too.

How can I do it? for each menu button I provided an #id, which if passed in the url I need to switch to that particular menu.

Note : I use PHP, js, jQuery and HTML5 +/- Ajax

PS: Please, do not say you can use this and that! I’m a kinda middle of a knowledge i.e I’m not a pro. So please provide me with some algorithms or code.

Thanks in advance 🙂

Answer 1

window.location.hash will contain the hash value in the URL (#id, #overview, etc…). You can then use javascript that runs when your page loads to check the value of window.location.hash and based on what it contains, you can modify your page, using ajax calls if retrieving data from the server is necessary.

The hash value is not sent to the server so it must be client-side code that processes it.

As for specific code, you would use something like this;

$(document).ready(function() {
    switch(window.location.hash) {
        case "#id":
            // code here
            break;
        case "#overview":
            // code here
            break;
        default:
            // code here
            break;
    }
});

What specific code goes in there obviously depends upon what you’re trying to do. If you need to get data from your server, then you would issue ajax calls to retrieve that data.