1

I'm testing out tab plugins and one thing I'd like to do is when the user clicks a link (from external sites or inside the page) with a tab's hash, the browser would not jump to the position of the tab, but instead switch to it.

This is how jQuery Tools' tab component does it. If you click the links below, the window would not scroll and the relevant tab is displayed:

http://flowplayer.org/tools/demos/tabs/anchors.html#first

http://flowplayer.org/tools/demos/tabs/anchors.html#second

http://flowplayer.org/tools/demos/tabs/anchors.html#third

Compare it with jQuery UI Tabs demo below. The window would scroll upon opening the page:

http://jqueryui.com/demos/tabs/#tabs-1

http://jqueryui.com/demos/tabs/#tabs-2

http://jqueryui.com/demos/tabs/#tabs-3

One of the answers to similar questions on SO suggested this inside the document.ready handler:

setTimeout(function() {
  if (location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

This works but the scrolling is very noticable compared to flowplayer.org's. I'm wondering how does flowplayer.org's script achieve this perfect effect? After looking through their demo code I could not find anything. Any help is appreciated, thanks!

Community
  • 1
  • 1
Dan7
  • 1,657
  • 1
  • 19
  • 31
  • Hi, not 100% sure what your sking but have you taken a look at the [demos.js](http://jqueryui.com/js/demos.js)? At the bottom are some functions concerning hashes and window scrolling which look quite ominous – T I Dec 31 '11 at 03:36
  • Hi, I reprahsed the qeustion, it did sound a bit confusing at first. I looked at that file but I don't think it does what I'm after: preventing scrolling to the anchor. – Dan7 Dec 31 '11 at 04:51

1 Answers1

2

Where as jquery's demo is using elements with a set id attribute, the flowplayer demo appears to be getting away without out any hence I believe no 'jumping'. However I can't for the life of me work out quite how/why the anchor is being recognised. I doubt it has anything to do with jquery itself as the only line really is $("ul.tabs").tabs("div.panes > div"); but I may be wrong and someone else can shed some light.

Edit: Was incorrect jquery does internally use windows.location.hash and does indeed 'use' that against against the href attribute.

T I
  • 9,785
  • 4
  • 29
  • 51
  • I'm not sure but perhaps it uses `window.location.hash` to retrieve the anchor? I need to take a look at this. But the no id thing just blows my mind, the answer may just be under my nose all the while! I will mark your answer once I can confirm it's `window.location.hash` does the bidding. – Dan7 Dec 31 '11 at 04:57
  • 1
    Yes, it's using `window.location.hash` — even in the minified JS (jquery.tools.min.js) it's pretty apparent that there's a handler that's looking for a tab within the tabset with an `href` that matches `window.location.hash`. :) – hobbs Dec 31 '11 at 05:07