jquery: How to hange hash tag / address bar name for cycle script

Question

please can someone help me with changing the hash tag.

I am using the jquery .cycle script and my pages are sliding correctly to the next div which is fine, but at the moment, the address bar stays the same i.e. www.blahblah.com whether I am on the contact page or about us page, can someone please help me so that when I click contact us button, the address bar will change to www.blahblah.com/contact_us, I would like to do this for each page wit home being www.blahblah.com/index.html.

The second part to my question is how do I get the home button working so that it slides back the other way.

I'm very new to all this so if you could put a demo on jsfiddle or paste a working code, this will help me drastically. I only seem to earn by taking working code and chopping and changing it but for the life of me can't get this to work the way I want.

Here's the link to the jsfiddle demo.

Thanks for looking.

Answer 1

You can change the url hash using:

window.location.hash = 'whatever';

You can bind on hashchange an do whatever you want using (jQuery):

$(window).bind('hashchange', function() {   
   // Change the page here.... 
}); 

I personally mostly use the backbone framework for this kind of applications. Backbone has a thing called a 'router' which handles hash changes and such. Maybe you should check it out.

Also, check out this post.

Answer 2

You could probably extend the script using html5 pushstate.

The API is pretty easy. First argument is the state object, second the window title and third the url. For instance:

history.pushState(null, null, "/contact")