Back button not working in chrome

Question

We are using jscrollpane to navigate through some divs when clicking a hash anchor (#). When the back button is clicked in Chrome, the url changes in the address bar but the browser does not navigate back to the div. In Firefox it does go back to the previous div.

http://www.sandbox.brightboxstudios.com/swings/test4.html

I have tried all kinds of things including plug-ins, different jquery library versions.

Also, everything I have tried to make the active menu items change class to active when on the url anchor hasn't worked, most likely because of my lack of javascript knowledge. This would be awesome to fix as well!

It would still be nice to have this described here with the technical details in use, in lieu of the description of Reuben's Javascript proficiency. — deceze, May 23 '11 at 06:02
@deceze: I added it to the question, feel free to add any other details you see fit. — Wesley Murch, May 23 '11 at 06:03
using the latest version of chrome (12) on a mac, the back button works fine. there is no sliding animation though, is that what you're concerned about? — Jeff, May 23 '11 at 06:07
oh, i see, it will go back to page one, but not to 2,3,etc.. — Jeff, May 23 '11 at 06:08
Have you tried using jquery bbq library http://benalman.com/projects/jquery-bbq-plugin/ — Satish, May 23 '11 at 08:31
@satish I looked at it, but could not figure it out..Like I said..no javascript knowledge.. @Jeff Correct, its having an issue with back and forward, however, the fix below worked except for that it now doesn't slide.. — Reuben, May 25 '11 at 22:52

Genius · Answer 1 · 2011-05-23T08:28:33.310

1

I tried this code fix over your code:

$('ul.nav a')
.unbind("click") // to remove your binding in my console
.bind('click',function(event){ // rebind event handler
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollLeft: $($anchor.attr('href')).offset().left
    }, 1500,'easeInOutExpo');
  event.preventDefault();

  // this is a trick:
  location.href = $anchor.attr('href');
  return false;
});

and navigation started working. Try it yourself.

edited May 23 '11 at 08:28

answered May 23 '11 at 08:18

Genius

1,784
14
12

So I just replace my code with this or put this after? I tried both..seems to studder before sliding now, and still not working when the back button is hit..THANKS VERY MUCH FOR YOUR HELP! – Reuben May 23 '11 at 20:43
It doesn't matter - replace or put after ;) Better to place after all your JS in the HTML. P.S.: I have Chrome 11.0 – Genius May 24 '11 at 10:24
ok, I have done that, and left it for you to see..I also have 11 and now it doesnt not slide, nor does the back button work.. – Reuben May 24 '11 at 15:24
ok the comment below made me realize the back and forth does work, minus back to the original page without the hash, however I could just redirect the URL to add the hash, I was kind of planning to have it start in the middle anyway..The only issue is it does not slide now.. – Reuben May 25 '11 at 01:59
it works most of the time, but sometimes glitches when the back button is pressed, and shows the prior page but only for a flash then right back..any ideas? really close! thanks very much!! – Reuben May 25 '11 at 02:03
@Reuben good to know that you're getting close to the solution. But I cannot reproduce your issue on my machine. – Genius May 25 '11 at 08:41
Ok got it! Like I said, new to javascript, and I didn't wrap the function around what you gave me..THANKS SO MUCH! – Reuben May 25 '11 at 16:27
hmm, only issue now, is when a link is clicked..it flashes the page its about to go to, then back, and then slides to it.. – Reuben May 25 '11 at 16:30
So this is still causing a problem..seems like the last 3 lines you added causes it to quickly show the next anchor for a split second before sliding to it.. – Reuben Jun 04 '11 at 00:57

score 0 · Answer 2 · answered May 23 '11 at 06:37

There is one problem I see that is almost definitely affecting things.

Somewhere in your javascript, the hash anchor is being prepended with a forward slash, making the resulting url look like this:

http://www.sandbox.brightboxstudios.com/swings/test4.html#/section3

Note the forward slash after the # hash, making it a technically invalid URL (there is no id or name with the value #/section3). This is not appearing in the status bar when I hover the link, only in the result URL, which leads me to believe it has to do with the address plugin you are using (although I have no personal experience with it).

The back button is only working for me in Firefox when the previous URL is one without a hash (i.e. a valid url). I had a hard time debugging your page with all the loaded plugins, but see if you can do something to make those URLs valid and get rid of that forward slash.

Aside, even though it's just a demo you should make sure you aren't duplicating ids. You have #header and #middle appearing several times. It's best to just remove all doubt while debugging (or always, actually) and use valid markup.

Hope this gets you a little closer to solving your problem.

Looks like you fixed a lot of it by doing that, I can now go back and forward in Chrome with one exception: back to the original url with no hash. So, that fixed a lot. You might try triggering the hash change event onclick for those links, regardless of if the hash actually changed. (Just noticed the slide effect no longer works though...) — Wesley Murch, May 24 '11 at 21:00
I was planning to just add a redirect from the main domain to add the hashtag or even have it start in the middle..I just need the sliding back.. — Reuben, May 25 '11 at 02:00

Back button not working in chrome

2 Answers2