X-Cart forums

[Gcomm_11]

Hi guys,

I'm attempting to insert a vertical image scroll into customer/home.tpl. It works when I place it directly within home.tpl, but then I obviously have a very large section of javascript on my home page. Hence I have been trying to call upon the file externally, with no luck. I've read all the posts I could find on this topic, but so far nothing seems to work.

script is called scroll.js, and is located skin1/scroll.js

<!--

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='103px'
var scrollerheight='106px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='[img]PE01805A.gif[/img]'
slideimages[1]='[img]PE01803A.gif[/img]'
slideimages[2]='[img]TN00411A.gif[/img]'
slideimages[3]='[img]PE02054A.gif[/img]'
slideimages[4]='[img]f[/img]'
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)", pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",p ausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.t op)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages )
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style .top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrolle rheight)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>


<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';h eight:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';h eight:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';l eft:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';l eft:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
//-->

customer/home.tpl:

{literal}<script language="JavaScript1.2" src="/skin1/scroll.js"></script>{/literal}

I've tried pasting the {literal} tags within scroll.js instead, but that doesn't work either.

Any help would be greatly appreciated.

Thanks .... Chris

[balinor]

Put the .js file in your skin1 directory and call it like this:

<script language="JavaScript1.2" src="{$SkinDir}/scroll.js"></script>

[Gcomm_11]

Hi Balinor,

Thanks for the quick reply. Unfortunately I've tried that and it still doesn't work. I can't figure out why. It doesn't give me any error or anything, it's like it doesn't register that the file is there at all. I've currently got the scroll.js file in the skin1 directory.

Yet if I paste the code directly into the home.tpl file it works perfectly??

Is there any other information I could provide you with?

Thanks

Chris

[balinor]

Do you have {literal} tags around the code in the external file? Is the external file set to at least 644 permission?

[Gcomm_11]

I don't have the {literal} tags in the external file because I used them in the home.tpl file instead;

{literal}<script language="JavaScript1.2" src="{$SkinDir}/scroll.js"></script>{/literal}

Yes for the 644 permission.

[balinor]

Just for kicks, try putting the literal tags in the file itself and don't use them on home.tpl.

[Gcomm_11]

I just did then, but still no luck

[balinor]

Hmmm..I'm at a loss..I use a couple of external calls on most of my sites and as long as the path is correct it works.....

[Gcomm_11]

Yeah I can't figure it out at all. My site is www.truegamer.com.au and I'm trying to insert it below my Geotrust logo. At the moment all that appears is the table border. If you type the URL where the scroll.js file is located; http://www.truegamer.com.au/skin1/scroll.js it appers fine.

I figure it must be something to do with the actual external code. Maybe I forgot to take out a <script> tag or something. I don't know enough about javascript so if anyone can take a look at it, (qouted in my fist post), I would be very thankful.

[balinor]

I'm getting a JavaScript error when I load your site, so that may be the issue:

Line: 145
Char: 10
Error: Expected '/'