I have a web page that contains two articles. Upon loading this page, jQuery is used to hide the two articles and slide down the first one. User can click on the navigation tab to view the second article. Then go back to the first article by clicking the back button using the onhashchange event. The following is my HTML code:

<nav>
 <a href='#1'>Article 1</a>
 <a href='#2'>Article 2</a>
</nav>

<article id=1>
 The first article.
</article>

<article id=2>
 The second article.
</article>

And here is the javascript code:

function change(hash)
{
 $('article:visible').slideUp();
 if(hash != '')
 {
  $(hash).slideDown();
 }
 else
 {
  $('article').first().slideDown();
 }
}

$('nav a').click(function(){
 var id = $(this).attr('href');
 change(id);
});

$('article').hide();
change(location.hash);
window.onhashchange = change(location.hash);

What was observed is that the page remains on the second article despite clicking the back button. I am using firefox 12.0 browser and don't know what is causing it not to work. Any help is appreciated. Thanks.

I have a web page that contains two articles. Upon loading this page, jQuery is used to hide the two articles and slide down the first one. User can click on the navigation tab to view the second article. Then go back to the first article by clicking the back button using the onhashchange event. The following is my HTML code:

<nav>
 <a href='#1'>Article 1</a>
 <a href='#2'>Article 2</a>
</nav>

<article id=1>
 The first article.
</article>

<article id=2>
 The second article.
</article>

And here is the javascript code:

function change(hash)
{
 $('article:visible').slideUp();
 if(hash != '')
 {
  $(hash).slideDown();
 }
 else
 {
  $('article').first().slideDown();
 }
}

$('nav a').click(function(){
 var id = $(this).attr('href');
 change(id);
});

$('article').hide();
change(location.hash);
window.onhashchange = change(location.hash);

What was observed is that the page remains on the second article despite clicking the back button. I am using firefox 12.0 browser and don't know what is causing it not to work. Any help is appreciated. Thanks.

• javascript
• jquery
• html
• dom

• is there any error on the console? – UVM Commented May 14, 2012 at 5:02
• is it working in other versions of browsers? – UVM Commented May 14, 2012 at 5:17
• @UNNI, its not a browser problem, Joseph got it right. See his answer. Thanks. – Question Overflow Commented May 14, 2012 at 5:21

1 Answer 1

You might want to try:

window.onhashchange = change;

//and read location.hash in the change function instead
function change(){
    var hash = location.hash;
    ...
}

or

window.onhashchange = function(){
    change(location.hash);
}

window.onhashchange = change(location.hash);

If my JS ain't rusty, this fails because

• calls change()
• functions that have no return return undefined
• you are assigning undefined to window.onhashchange - which is wrong because you're supposed to assign a function to an event.