Image scroller restarts when menu items selected

[hairyback]

Hi,

Hoping someone can help with this one, i've added the Jumi module to my template (index.php) to allow a javascripted image scroller. However, when a different menu item is selected the index page reloads, thus restarting the image scroller from the beginning - Is there any javascript that I can put in the index.php page or in the Jumi module to stop the image scroller from starting at the beginning. I'm a newbie at javascript...

Thanks in advance

Below is the javascript on a html page for the image scroller which is in the Jumi module and the html/php added to the index.php...

< javascript in Jumi module >

<script type="text/javascript">

//Specify the slider's width (in pixels)
var sliderwidth="700px"
//Specify the slider's height
var sliderheight="111px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor=" "

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img src="images/001.jpg">'
leftrightslide[1]='<img src="images/002.jpg">'
leftrightslide[2]='<img src="images/003.jpg">'
leftrightslide[3]='<img src="images/004.jpg">'
leftrightslide[4]='<img src="images/005.jpg">'
leftrightslide[5]='<img src="images/006.jpg">'
leftrightslide[6]='<img src="images/007.jpg">'
leftrightslide[7]='<img src="images/008.jpg">'
leftrightslide[8]='<img src="images/009.jpg">'
leftrightslide[9]='<img src="images/010.jpg" >'
leftrightslide[10]='<img src="images/011.jpg" >'
leftrightslide[11]='<img src="images/012.jpg" >'
leftrightslide[12]='<img src="images/013.jpg" >'
leftrightslide[13]='<img src="images/014.jpg" >'
leftrightslide[14]='<img src="images/015.jpg" >'
leftrightslide[15]='<img src="images/016.jpg" >'
leftrightslide[16]='<img src="images/017.jpg" >'
leftrightslide[17]='<img src="images/018.jpg" >'
leftrightslide[18]='<img src="images/019.jpg" >'
leftrightslide[19]='<img src="images/020.jpg" >'
leftrightslide[20]='<img src="images/021.jpg" >'
leftrightslide[21]='<img src="images/022.jpg" >'
leftrightslide[22]='<img src="images/023.jpg" >'
leftrightslide[23]='<img src="images/024.jpg" >'
leftrightslide[24]='<img src="images/025.jpg" >'
leftrightslide[25]='<img src="images/026.jpg" >'
leftrightslide[26]='<img src="images/027.jpg" >'
leftrightslide[27]='<img src="images/028.jpg" >'
leftrightslide[28]='<img src="images/029.jpg" >'
leftrightslide[29]='<img src="images/030.jpg" >'
leftrightslide[30]='<img src="images/031.jpg" >'
leftrightslide[31]='<img src="images/032.jpg" >'
leftrightslide[32]='<img src="images/033.jpg" >'
leftrightslide[33]='<img src="images/034.jpg" >'
leftrightslide[34]='<img src="images/035.jpg" >'
leftrightslide[35]='<img src="images/036.jpg" >'
leftrightslide[36]='<img src="images/037.jpg" >'
leftrightslide[37]='<img src="images/038.jpg" >'
leftrightslide[38]='<img src="images/039.jpg" >'
leftrightslide[39]='<img src="images/040.jpg" >'
leftrightslide[40]='<img src="images/041.jpg" >'
leftrightslide[41]='<img src="images/042.jpg" >'
leftrightslide[42]='<img src="images/043.jpg" >'
leftrightslide[43]='<img src="images/044.jpg" >'
leftrightslide[44]='<img src="images/045.jpg" >'
leftrightslide[45]='<img src="images/046.jpg" >'
leftrightslide[46]='<img src="images/047.jpg" >'
leftrightslide[47]='<img src="images/048.jpg" >'
leftrightslide[48]='<img src="images/049.jpg" >'
leftrightslide[49]='<img src="images/050.jpg" >'
leftrightslide[50]='<img src="images/051.jpg" >'
leftrightslide[51]='<img src="images/052.jpg" >'
leftrightslide[52]='<img src="images/053.jpg" >'
leftrightslide[53]='<img src="images/054.jpg" >'
leftrightslide[54]='<img src="images/055.jpg" >'
leftrightslide[55]='<img src="images/056.jpg" >'
leftrightslide[56]='<img src="images/057.jpg" >'
leftrightslide[57]='<img src="images/058.jpg" >'
leftrightslide[58]='<img src="images/059.jpg" >'
leftrightslide[59]='<img src="images/060.jpg" >'
leftrightslide[60]='<img src="images/061.jpg" >'
leftrightslide[61]='<img src="images/062.jpg" >'
leftrightslide[62]='<img src="images/063.jpg" >'
leftrightslide[63]='<img src="images/064.jpg" >'
leftrightslide[64]='<img src="images/065.jpg" >'
leftrightslide[65]='<img src="images/066.jpg" >'
leftrightslide[66]='<img src="images/067.jpg" >'
leftrightslide[67]='<img src="images/068.jpg" >'
leftrightslide[68]='<img src="images/069.jpg" >'
leftrightslide[69]='<img src="images/070.jpg" >'
leftrightslide[70]='<img src="images/071.jpg" >'
leftrightslide[71]='<img src="images/072.jpg" >'
leftrightslide[72]='<img src="images/073.jpg" >'
leftrightslide[73]='<img src="images/074.jpg" >'
leftrightslide[74]='<img src="images/075.jpg" >'
leftrightslide[75]='<img src="images/076.jpg" >'
leftrightslide[76]='<img src="images/077.jpg" >'
leftrightslide[77]='<img src="images/078.jpg" >'
leftrightslide[78]='<img src="images/079.jpg" >'
leftrightslide[79]='<img src="images/080.jpg" >'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-17000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=1" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=1" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script><style type="text/css">
<!--
body {
background-color: #E11B22;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

< index html/php >

<div class="headerwrap" id="headerwrap"><div class="header" id="header"></div></div>
<div class="bodywrap" id="bodywrap"> <div class="body" id="body"><div class="leftcolumn" id="leftcolumn"><?php mosLoadModules ( 'left', -2 ); ?></div>
<div class="scroller" id="scroller"><?php mosLoadModules ( 'user1' ); ?></div>
<div class="mainbody" id="mainbody"><?php mosMainBody(); ?></div></div></div>
<div class="footerwrap" id="footerwrap">
<div class="footer" id="footer"><?php mosLoadModules ( 'footer', -2 ); ?><br /><?php mosLoadModules ( 'bottom', -2 ); ?>
</div>
</div>
</body>

[SoftDux]

which module are you using?

[hairyback]

Hi SoftDux,

It's the Jumi module , found in the Joomla Extensions.... http://extensions.joomla.org/component/ ... Itemid,35/

Hope that helps, but got a feeling it's the way joomla reloads/refreshes the page when navigating the site...

Cheers

NOTE: have been googling and still haven't found an answer but this might explain it a bit better - in admin under modules > site module > when i edit the module on the right under Pages/items Menu Item Link(s) the module is on all and when I select none or unassigned the module will disappear.... I think this is why the image scroller module keeps re-starting when a different menu item is selected... so is it possible to load a module in the mainbody without having it linked to a menu, so that it only loads once? if anyone knows a way around this it'd be apprectiated...