I am confused - I can't get these two scripts to run at the same time on my website

**Novice444** · 06-23-2013, 02:07 AM

1) Script Title: Fade-in image slideshow script and Conveyor belt slideshow script

2) Script URL (on DD): copied below (http://www.dynamicdrive.com/dynamici...nslideshow.htm and http://www.dynamicdrive.com/dynamici...rightslide.htm)

3) Describe problem: I am confused - I can't get these two scripts to run at the same time on my website: 1st is a rotating banner with fade. The 2nd is a conveyer belt slideshow of pictures. I want them to load with the page in the header section. They work individually but not together.

I have tried various onload scripts I found by searching. But for the life of me, I can't figure out:

1. Where the onload code goes

2. How does it call each script (how to define the functions)?

3. How do I get them both to work at the same time?

Here is the JS script for the faded banner:

Code:

    <script language="JavaScript1.2" type="text/javascript">
    def function_name(slheader):

    var slideshow_width='800px' //SET IMAGE WIDTH
    var slideshow_height='300px' //SET IMAGE HEIGHT
    var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
    fadeimages[0]=["pic location 1","",""]; fadeimages[01]=["pic location 2","",""]; fadeimages[02]=["pic location 4","",""];
    fadeimages[03]=["pic location 5","",""];
    fadeimages[04]=["pic location 6","",""]

    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p][0]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'
    +slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height
    +';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height
    +';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1

    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML=insertimage(nextimageindex)
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj2.style.visibility="hidden"
    setTimeout("rotateimage()",pause)
    }
    }

    function insertimage(i){
    var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
    tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
    tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
    return tempcontainer
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex][0]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }

    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML=insertimage(curimageindex)
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

    This is the SECOND SCRIPT for the conveyer belt slideshow:

    <script type="text/javascript">
    def function_name(slbuttons):
    
    //Specify the slider's width (in pixels)
    var sliderwidth="300px"
    //Specify the slider's height
    var sliderheight="150px"
    //Specify the slider's slide speed (larger is faster 1-10)
    var slidespeed=3
    //configure background color:
    slidebgcolor="#EAEAEA"

    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    leftrightslide[0]='<a href="link1"><img src=" LINK TO PICTURE1" border=1></a>'
    leftrightslide[1]='<a href="link2"><img src=" LINK TO PICTURE2" border=1></a>'
    leftrightslide[2]='<a href="link3"><img src="LINK TO PICTURE3" border=1></a>'
    leftrightslide[3]='<a href="ink4"><img src="LINK TO PICTURE4" border=1></a>'
    leftrightslide[4]='<a href="link5"><img src="LINK TO PICTURE5" border=1></a>'
    leftrightslide[5]='<a href="link6"><img src="LINK TO PICTURE5" border=1></a>'
    leftrightslide[6]='<a href="link7"><img src="LINK TO PICTURE6" border=1></a>'
    leftrightslide[7]='<a href="LINK TO PICTURE7" border=1></a>'
    leftrightslide[8]='<a href=" LINK TO PICTURE8" border=1></a>'
    leftrightslide[9]='<a href="link8"><img src="LINK TO PICTURE9" border=1></a>'
    leftrightslide[10]='<a href="link9"><img src="LINK TO PICTURE10" border=1></a>'


    //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:-9000px">'+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=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('</ilayer>')
    }
    document.write('</td></table>')
    }
    }
    </script>

**Novice444** · 06-23-2013, 02:07 AM

I had to remove the following text from my post above because I was limited to 10k characters:

Code:

/***********************************************
    * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

**jscheuer1** · 06-23-2013, 03:33 AM

There is no conflict I'm aware of with these two scripts. If you're using an older version of the slideshow script (less than 2.0) there could be.

If you want more help, please include a link to a page on your site that contains the problematic code so we can check it out.

**Novice444** · 06-26-2013, 04:18 PM

Originally Posted by jscheuer1

There is no conflict I'm aware of with these two scripts. If you're using an older version of the slideshow script (less than 2.0) there could be.

If you want more help, please include a link to a page on your site that contains the problematic code so we can check it out.

I guess my question is really how do I add an "onload" script (event?) to get the two scripts to run. When I tried naming my functions with:

def function_name(slheader):

and the other one:

def function_name(slbuttons):

It wouldn't work even one at a time. I tried using other onload scripts but they didn't work so I am confused.

I tried a simple onload function: <window OnLoad="slheader();slbuttons()"> but there must be something missing. I'm sorry if this seems so remedial of a question. I guess what I'm looking for is a window onload function that will call both scripts in the header portion of the website.

I can't direct you to a website because I have one already without scripts and don't want to erase that and put up pages that are not done.

**Novice444** · 06-26-2013, 04:18 PM

And, no I didn't find any conflicts with duplicate variable names or anything like that.

**jscheuer1** · 06-26-2013, 04:24 PM

None of that should be required. The sideshow doesn't use the onload event, so there should be no onload conflict. There might be some other problem(s) though. If, as I said, it's an older version of the slideshow script, there could be an onload (or even some other) conflict(s). The best way(s) to resolve that and/or any other conflict(s) there might be would to see an example of the page showing the problem.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**Beverleyh** · 06-26-2013, 04:27 PM

I tried a simple onload function: <window OnLoad="slheader();slbuttons()"> but there must be something missing.

Not sure where <window> comes in to things (you've invented a new tag). Do you mean;

Anyway, have you tried calling the function in the <head> on page load?
http://stackoverflow.com/questions/5...ng-body-onload

EDIT -

With regard to your comment here;

I can't direct you to a website because I have one already without scripts and don't want to erase that and put up pages that are not done.

you could always put up a temporary copy page that includes the scripts, which you can delete later. You don't have to mess with your main website.

**jscheuer1** · 06-26-2013, 04:30 PM

Oh I see you are using an older version of the slideshow. Either update to the current version:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

or change this:

Code:

window.onload=fillup

to:

Code:

window.onload=function(){fillup(); startit();};

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**Novice444** · 06-26-2013, 05:37 PM

Thank you so much!!!!!! I made all the changes you both suggested and it worked!!! THANK YOU!! THANK YOU!!! Now I just have to figure out why the second script positions the slider in the middle of the page instead of the header!!!! I have been trying to figure this out for weeks so you have saved my sanity!