[RESOLVED] Javascript Picture Fader Flicks Page Back To Top

[zzwill]

Hi Everyone, I have just inherited a website which has a javascript tab and picture fader on the home page. This moves through 6 states changing a tab and main picture beneath to make it look like you're flicking through the menu yourself.
This works perfectly, apart from the fact that every time the picture changes the page flicks back to the top. Very annoying if you are reading things further down!!
I am a PHP man just starting to learn Javascript and don't understand why it is doing this, can anyone help ???

The Relevant Code is:

<script>
		var scurrent_tab='tab1';
		var scurrent_click_tab='';
		
		var arTabsMain = new Array
		(
			"tab1",
			"tab2",
			"tab3",
			"tab4",
			"tab5",
			"tab6",
			"bottomtab"
		);
		
		function ChangeMainPictureClick(s)
		{
			bStopAutoLoad = true;
			ChangeMainPicture(s);
		}
		
		function ChangeMainPicture(s)
		{
			scurrent_click_tab = s;
			$("#tabs_content_container").fadeOut("slow", 
				function() 
				{
					$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
				} 
			);
			
			$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');
			$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');
			$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');
			$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');
			$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');
			$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');
			
			$('#main_tab_'+s+'_img').attr('src','images/tab_'+s+'_on.jpg');
			scurrent_tab = s;
		}
		$('#main_tab_tab1').hover
		(
			function(){$('#main_tab_tab1_img').attr('src','images/tab_tab1_on.jpg');},
			function(){if(scurrent_tab=='tab1')return;$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');}
		);
		$('#main_tab_tab2').hover
		(
			function(){$('#main_tab_tab2_img').attr('src','images/tab_tab2_on.jpg');},
			function(){if(scurrent_tab=='tab2')return;$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');}
		);
		$('#main_tab_tab4').hover
		(
			function(){$('#main_tab_tab4_img').attr('src','images/tab_tab4_on.jpg');},
			function(){if(scurrent_tab=='tab4')return;$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');}
		);
		$('#main_tab_tab3').hover
		(
			function(){$('#main_tab_tab3_img').attr('src','images/tab_tab3_on.jpg');},
			function(){if(scurrent_tab=='tab3')return;$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');}
		);
		$('#main_tab_tab6').hover
		(
			function(){$('#main_tab_tab6_img').attr('src','images/tab_tab6_on.jpg');},
			function(){if(scurrent_tab=='tab6')return;$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');}
		);
		$('#main_tab_tab5').hover
		(
			function(){$('#main_tab_tab5_img').attr('src','images/tab_tab5_on.jpg');},
			function(){if(scurrent_tab=='tab5')return;$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');}
		);

		function AutoLoadTopic()
		{
			if(bStopAutoLoad) 
			{
				window.setTimeout(function() {AutoLoadTopic();}, 8000);
				return true;
			} 
			
			iCurrentSlide++;
			if(iCurrentSlide >= arTabsMain.length-1)
				iCurrentSlide = 0;
			
			ChangeMainPicture(arTabsMain[iCurrentSlide]);
			window.setTimeout(function() {AutoLoadTopic();}, 8000);
		}
		var bStopAutoLoad = false;
		var iCurrentSlide = 0;
		window.setTimeout(function() {AutoLoadTopic();}, 8000);
	</script>
	
	
	//   ######
	
	
	
	<script>
		$('#button_start_bottomtab').hover
		(
			function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic_on.gif');},
			function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic.gif');}
		);
	</script>

[zzwill]

Sorry, forgot to add the page uses 'jquery-1.2.3.pack.js'

[zzwill]

Anyone ? Bueller.....

[Krishnamoorthy]

Hi,

On HTML code you need to mention id="idvalue" style="display:none;" on each table or blocks of tabs

[zzwill]

Hi, thanks for the reply. My divs are set with the id's and display: none, the code 'works' as it was designed to do.

The problem is that each time the picture changes it resets the page back to top, which is very annoying if you have scrolled down and are reading at the bottom?

[zzwill]

Found the problem, which may be of use to other users.

The fadeout command used to switch pictures:

$("#tabs_content_container").fadeOut("slow", 
				function() 
				{
					$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
				} 
			);

When fadeout opacity reaches 0, the element being faded, a <div> in this case, is changed to display:none, making the page reduce in size and the users display jump up.

Hope that will save someone some time!