www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Javascript Picture Fader Flicks Page Back To Top

Hybrid View

  1. #1
    Join Date
    May 2011
    Posts
    5

    resolved [RESOLVED] Javascript Picture Fader Flicks Page Back To Top

    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:

    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>

  2. #2
    Join Date
    May 2011
    Posts
    5
    Sorry, forgot to add the page uses 'jquery-1.2.3.pack.js'

  3. #3
    Join Date
    May 2011
    Posts
    5
    Anyone ? Bueller.....

  4. #4
    Join Date
    Jul 2010
    Posts
    6
    Hi,

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

  5. #5
    Join Date
    May 2011
    Posts
    5
    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?

  6. #6
    Join Date
    May 2011
    Posts
    5
    Found the problem, which may be of use to other users.

    The fadeout command used to switch pictures:
    Code:
    $("#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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles