Solved

Make embedded JavaScript function generic

Posted on 2014-02-03
4
368 Views
Last Modified: 2014-06-10
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
0
Comment
Question by:mbizup
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 39829755
<script type="text/javascript" src="rotate.js"></script>
<asp:Content ID="Content2" ContentPlaceHolderID="RightSidebarContent" Runat="Server">

    <script type="text/javascript" language="javascript">
        window.onload = function() {
            rotate('rotator');
        });
    </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

Add your method to an external js file called (in this example) rotate.js
function rotate(elementID) {
    var rotator = document.getElementById(elementID);
    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);
}

Open in new window

0
 
LVL 61

Author Comment

by:mbizup
ID: 39829845
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'); }
0
 
LVL 61

Author Closing Comment

by:mbizup
ID: 39829846
Thanks!
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 39831776
@mizBizup : you were close indeed but you need a reference to a function. In this case the anonymous function which executes the rotatePics method.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now