Changing the hash but not moving the page using jquery ui tabs

Question

I added the following code to change the hash to the name of the tab:

$("#tabs > ul").tabs({ select: function(event, ui){ window.location.hash = ui.tab.hash; } } ); 

This works fine in FF3, but in IE7 it moves down the page (depending on the tab selected somewhere near the top of the page, right to the bottom of the page).

I tried changing it to:

 $("#tabs > ul").tabs(); $("#tabs > ul").bind("tabsshow", function(event, ui) { window.location = ui.tab.hash; }) 

This results in the same behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.

I would like the tab to be changed, the hash updated, but the page did not move at all, as it works in FF3 in my first example, but not in IE7.

Thank.

Notes: jQuery 1.3.1 / jQuery-UI 1.6rc6

Answer 1

If there is an element on the page that has the same identifier as you set the hash, for example, you try to set the browser hash on #cars and there are already # cars divs on the page, the browser will scroll you to the place where this div is located.

As far as I know, there are 3 possible workarounds

1) Change the hash browser to something else, like # thecars.

2) Change existing markup in the same way.

3) At some event, changing the identifier of your similar markup, then changing the hash of the browser, and then renaming the markup name back to the original value is also theoretically. This is obviously a bad and slow workaround, just thought I mention it.

Answer 2

You can try to have "return false"; after you set the location of the window, but I can not be sure.

Unfortunately, your problems will not end there. There are other problems with moving back and forth across multiple browsers - nothing can change, the page may reload, the page state may be distorted, javascript may be reinitialized, etc.

You might want to look at the v2 tabs , which uses History / Remote , although it has not been updated for jQuery 1.3+.

This demo is easier to understand. If you look at javascript source , you will notice the use of iframes to handle states.

There is also a History Event and jHistory plugin to achieve what you want.

I would like to hear how everything works out and what decision you came up with.

Answer 3

What Chris suggested worked for me, had no idea, even a div could link through #. Thus, my solution is quite simple, in the show: event handler, I do the following: it is not perfect, since this return button will not be in the history, but this is another work for the BBQ history plugin. All my divs just have id = "tab-cars", id = "tab-trucks" ... delete the "tab-" part and put it in the URL hash.

 var name = ui.panel.id.substr(4); location.hash = '#'+name;