Setting url hash on initial page load

[ahmerkureishi]

Hey Aidan;

Thank you for this nifty little plugin - I was out to do something like this on my own for a project but then came across your post through Google and thought it best to stick with your stickytabs.

The issue I am about to raise concerns the initial load event of the page. Here is the scenario:

A user lands on a page with tabbable content and is served the default tab - although the url has no hash. The user switches to another tab and then wishes to return to the original tab via the back button. The page comes equipped with stickytabs to cover this very situation, so you'd expect it to work but it doesn't because the initial url had no hash.

In my solution, I was achieving it with this code inside the document's onload event:

if (document.location.hash.length === 0) {
  window.location.hash = $("#main-tablist a:first").attr('href');
}

Do you think this is the right way to go about it? Would you care to build something like this into your plugin?

Cheers!

[aidanlister]

I'm not seeing the behaviour you describe, when I press back it goes to the first tab (without a hash), there's code in there to catch the event. Have a look at the files in tests/ to see an example, maybe your markup is incorrect?

[ahmerkureishi]

Hmmmm. I have checked and double checked but am unable to detect a markup error. Can never rule out the possibility though - I'll have to set up a page somewhere so you can look into it. Too bad can't do it right now - have to be away for a few days but I'll get to it first thing after I return.

Meanwhile, just in case it matters, I am running chrome (Version 41.0.2272.76 m) on Windows XP SP3. And I am able to return to the originally active tab via the back button only if I set the hash on load as I indicated earlier.

[ahmerkureishi]

Alright, back.

I created a jsfiddle but the sandbox seems to be blocking the functionality. So I created this public page on a Google App Engine app.

To repeat: The first tab is active by default when you land on the page, with no hash to the url. After switching to another tab, the browser fails to restore the first tab via the return button.

[aidanlister]

Hrm alright it's not working ... let me investigate.

On 19 March 2015 at 06:58, ahmerkureishi notifications@github.com wrote:

Alright, back.

I created a jsfiddle https://jsfiddle.net/8n131efx/ but the sandbox seems to be blocking the functionality. So I created this public page http://m-mango.appspot.com/pub/ on a Google App Engine app.

To repeat: The first tab is active by default when you land on the page, with no hash to the url. After switching to another tab, the browser fails to restore the first tab via the return button.

— Reply to this email directly or view it on GitHub https://github.com/aidanlister/jquery-stickytabs/issues/5#issuecomment-83146620 .

[althaus]

I'd say that hashchange isn't firing at all if it's set back to "null". I compare it with popstate and the latter fires where hashchange doesn't on the last step back.

[aidanlister]

Yeah I think you're right. It's odd, because it used to work ...

On 23 March 2015 at 23:23, Matthias Althaus notifications@github.com wrote:

I'd say that hashchange isn't firing at all if it's set back to "null". I compare it with popstate and the latter fires where hashchange doesn't on the last step back.

— Reply to this email directly or view it on GitHub https://github.com/aidanlister/jquery-stickytabs/issues/5#issuecomment-84970757 .

[aidanlister]

Okay I just pushed a change which I think fixes it. Can you try and report back?

[althaus]

Looks fine. Works starting with and without a hash.

[ahmerkureishi]

All right - I just updated the plugin code for my demo page and it worked like a charm!

Thank you again Aidan for all the hard work. I am pleased to close this issue.