Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Fader Resets Screen to the Top

    Hi Everyone, I have just inherited a website which has a javascript menu tab and picture fader on the home page. This moves through 6 states changing a menu 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 have scrolled down are reading things at the bottom of the page!!

    The page uses jquery-1.2.3.pack.js. 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:
    Code:
    <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>
    The code 'works' as in there are no issues in its functionality, I just want it work in a better way.

    Any help or ideas would be greatly appreciated.
    Last edited by zzwill; 07-15-2011 at 12:17 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •