asked on

Make embedded JavaScript function generic

I have a Java Script function in a page markup fired by the load event to display rotating images in a Div.

I have other pages that I need rotating images on.

How do I write this function generically, so that I can place it in a separate .js file, and call it using the Div ID as a passed parameter?

<asp:Content ID="Content2" ContentPlaceHolderID="RightSidebarContent" Runat="Server">

    <script type="text/javascript" language="javascript">
        window.onload = function() {
            var rotator = document.getElementById("rotator");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function() {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 2500);
        };
    </script>
    
    <div id="rotator">
        <img alt="" src="../images/MainRotating.jpg" />
        <img alt="" src="../images/AnnexRotating.jpg" style="display:none" />
        <img alt="" src="../images/NAnnexRotating.jpg" style="display:none"  />
        <img alt="" src="../images/R5Rotating.jpg" style="display:none" />
    </div>


</asp:Content>

Open in new window

Thanks

ASKER CERTIFIED SOLUTION

Albert Van Halen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mbizup

ASKER

That's great, Thanks!

I was actually very close on my own. My issue seemed to have been in calling the function.

This is what I tried (without success):

window.onload = rotatePics('rotator');

This, from your post is the correct syntax:

window.onload = function() { rotatePics('rotator'); }

mbizup

ASKER

Thanks!

Albert Van Halen

@mizBizup : you were close indeed but you need a reference to a function. In this case the anonymous function which executes the rotatePics method.