Running Duplicate Javascripts in the same page

Question

I acquired a small javascript from a google search. I use this script to "scroll" jpeg images in a small webpage I run. [[[Disclaimer: I'm an ultra-n00b for javascript, yet I'm willing to learn and seek out the answers. Many searches and reading of tutorials later, I still can't get the right answer/solution. So if you can point me in the right direction, or help me figure out the solution, I'd greatly appreciate it.]]]

The small hiccup comes when I'd like to run two instances of these scripts: One with the images(JPEGs), and another with 'banners' (also JPEGs) linking to other parts of the site. When I try to place both scripts in the same page, neither script 'scrolls' the images.

Any ideas on where I'm messing up?

I include the code for the script at the end of the post/message.

Thank you very much for your time and help! =) Greatly appreciated!

I found this answered question in Stackoverflow, yet I can't seem to grasp around the solution: run 2 identical javascripts on the same page

Javascript code: (( the one I want to run two times ))

<p>
    <script type="text/javascript">
    theimage = new Array();
    theimage[0]=["http://myWEBSITE.com/image01.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[1]=["http://myWEBSITE.com/image02.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[2]=["http://myWEBSITE.com/image03.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[3]=["http://myWEBSITE.com/image04.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[4]=["http://myWEBSITE.com/image05.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[5]=["http://myWEBSITE.com/image06.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[6]=["http://myWEBSITE.com/image07.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[7]=["http://myWEBSITE.com/image08.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[8]=["http://myWEBSITE.com/image09.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[9]=["http://myWEBSITE.com/image10.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    playspeed=1500;// 
    //###########################################
    window.onload=function(){
        preloadSlide();
        SetSlide(0);
        PlaySlide();
    }
    //###########################################
    function SetSlide(num) {
        i=num%theimage.length;
        if(i<0)i=theimage.length-1;
        document.images.imgslide.src=theimage[i][0];
        document.getElementById('slidebox').innerHTML=theimage[i][2];
    }
    //###########################################
    function PlaySlide() {
        if (!window.playing) {
            PlayingSlide(i+1);
            if(document.slideshow.play){
                document.slideshow.play.value="   Stop   ";
            }
        }
        else {
            playing=clearTimeout(playing);
            if(document.slideshow.play){
                document.slideshow.play.value="   Play   ";
            }
        }
        if(document.images.imgPlay){
            setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
            imgStop=document.images.imgPlay.src
        }
    }
    //###########################################
    function PlayingSlide(num) {
        playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
    }
    //###########################################
    function preloadSlide() {
        for(k=0;k<theimage.length;k++) {
            theimage[k][0]=new Image().src=theimage[k][0];
        }
    }
    </script>

    <!-- slide show HTML -->
    <form name="slideshow">
    <table border="1" cellpadding="2" cellspacing="0">
    <tr>
        <td align="center">
        <a href="http://myWEBSITE.com/#" onmouseover="this.href=theimage[i][1];return false">
        <script type="text/javascript">
            document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
        </script>
        </a>

        </td>
    </tr>
    <tr>
        <td align="center"><div id="slidebox"></div></td>
    </tr>
    <tr>
        <td align="center">
            <input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
            <input type="button" name="play" value="   Play   " onclick="PlaySlide();" title="Autoplay">

            <input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
        </td>
    </tr>
    </table>
    </form>
    <!-- end of slide show HTML -->
    </p>

Edit approvals are weird - I could have edited this question on my own, but since I chose to approve your suggestion it'll now take another person to agree before it goes live. Hmm. </off-topic> — Andrzej Doyle
– Andrzej Doyle, Commented Jun 16, 2011 at 16:00
Ya know...It's ok to not know the answer to everything. If you feel the need to disclaim this them fine, but honestly, we don't need the back story you tell yourself about your life in order to help. :-) — Jamie Dixon
– Jamie Dixon, Commented Jun 16, 2011 at 16:03

lincolnk · Accepted Answer · 2011-06-16 16:39:01Z

That script is only designed to run one rotating image element per page. There are at least a couple points where running it the second time will break the first run. For example, theimage is declared globally.

first run:

theimage = new Array(); // creates window.theimage variable as new array
theimage[0] = [...];
theimage[n] = [...];

second run

theimage = new Array(); // creates a new array and assigns to window.theimage, first array gone 
theimage[0] = [...];
theimage[n] = [...];

window.onload is a similar situation- the function created for onload will be overwritten the second time the script runs.

You could rewrite the script so the global variables will be isolated to a local scope by running everything inside a function. You can create an anonymous function and invoke it immediately like

   <script type="text/javascript">
    (function() {
        var theimage = new Array();
        ... // everything else
    })();
   </script>

That way theImage exists only inside that function rather than on the window object, and when you run the script the second time there won't be interference for that variable.

For the onload function, I'd move the script tag to the end of the page and move the function calls to the end of the script (still inside the anon function). Someone might chime in about the document possibly not being ready but I think it's unlikely you'll have any issue doing this.

Replace the document.write for the image tag with just html. Hard code the src to be the first item in your list. You'll also have to give it a unique id value.

Replace document.images.imgslide references with document.getElementById('myUniqueimgslideId').

You'll have to substitute a local object for the globabl window/document references and adjust the script accordingly.

Start out with something like

<script type="text/javascript">
    (function() {

        var SlideShowController = {
            playing : false,
            slideshow : {}
        };

    ....

That will give you a local SlideShowController instance to manage each slideshow.

The setTimeout calls are currently running the instructions in the global scope. You can fix this by creating a closure for the function calls in the script.

playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);

becomes

playing=setTimeout(function(){ 
    PlayingSlide(i+1); 
    SetSlide(i+1); 
}, playspeed);

This will call the versions of the function defined in the local scope.

Closures are getting into pretty deep water if you've never worked with them but they're incredibly useful for js, so I recommend reading up on them. I think this should work the intended way.

I think that covers most of your issues. Post updates if you're having trouble.

Thank you! I'm going to work on this now. Will post back results/questions. SUPER post, much appreciated! =)

Collectives™ on Stack Overflow

Running Duplicate Javascripts in the same page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related