...

View Full Version : Image Fader Resets Screen to the Top



zzwill
07-15-2011, 11:14 AM
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:


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum