Switch tabs without page going back to top

[Staggasaurarts]

hi,

i am trying to switch tabs without page going back to top.

i am using this script.

http://www.sohtanaka.com/web-design/examples/tabs/

but i just can't stop it from the page going back to the top when you click a tab.

Thanks

[Thirusha]

I dont understand what is going wrong with the tabs, for me the exact code works fine, perhaps u should include the code you are using, maybe it is some style in your own code that is causing the page to jump

[Staggasaurarts]

i have used it as it is provided.

Its just whenever a vertical scrollbar appears is scrolled down the page jumps to the top when a tab is clicked.

I am using the latest FF,IE9,IE8

[Thirusha]

but aren't u at the top of the page when u click tabs, how can it then jump, and it has to start at the top, cause people read from the top to the bottom.

[Borzoi]

I think I see what is meant by the page jumps to the top. If you resize your browser so that you can scroll down on the link and scroll down slightly so that you're not at the top but still have the tab buttons in view, the page will jump to the top when any tab is clicked.

The reason for this is because each tab is calling an ID (#tab1, #tab2 etc) and whenever a link calls an id like that, it automatically scrolls to that part of the page, which in this case is the top of the page. To prevent it, you would need to find some way of replacing the IDs with something else.

[Airshow]

The reason for the jump is that .tabContent height is momentarily lost, and the page shrinks to a size that will fit the window ... hence verical scroll goes to zero (top of page) and does not recover naturally.

The simple way to overcome this is to give .tab_container some height or its own in the style sheet. eg, height:300px ;

The trouble with this is that too small a value will not have the desired effect and too large a value may be larger than necessary to accommodate some of the content (Gallery, Submit etc.), in which case you will get white space below it.

A better solution seems to be to set the height of .tab_container dynamically, as follows:

//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(".tab_container").css('height', '300px');
		$(activeTab).fadeIn( 'slow', function(){ $(".tab_container").css('height', 'auto'); } ); //Fade in the active content
		return false;
	});

By setting .tab_container 's height back to auto after fadeIn() has completed, it adopts the natural minimum height necessary for the content currently displayed.

It's not a perfect solution as:

• The value set by the statement $(".tab_container").css('height', '300px'); has to be chosen - it's content dependent and there's no right answer.
• You trade off one transitional effect (page jump) for another (fixed .tab_container height).

For my money, I would choose the latter, though others may demur (or know a better solution).

Airshow