Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>
    Last edited by Novice444; 06-26-2013 at 09:21 PM. Reason: Resolved

  2. #2
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
        ***********************************************/
    Last edited by james438; 06-23-2013 at 03:25 AM.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you!

    Quote Originally Posted by jscheuer1 View Post
    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.

  5. #5
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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;
    <body OnLoad="slheader();slbuttons()">
    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.
    Last edited by Beverleyh; 06-26-2013 at 04:39 PM. Reason: Removed rogue smilie (accidentally clicked on angry face)!!! Oops!!
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  10. #10
    Join Date
    Jun 2013
    Location
    Chicago, IL
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I can't express how grateful I am to both of you John and Beverley!!!! Javascript is something that is very new to me.

Similar Threads

  1. help with using scripts in homestead website
    By zampano in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-30-2009, 04:22 AM
  2. Using existing scripts on a website plugin
    By lostb0y in forum Looking for such a script or service
    Replies: 2
    Last Post: 01-23-2009, 02:21 AM
  3. I'm so Confused
    By Hurt-You-So-Bad in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 06-28-2006, 06:00 AM
  4. confused..
    By simply_ali in forum HTML
    Replies: 1
    Last Post: 07-31-2005, 05:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •