Solved

Make embedded JavaScript function generic

Posted on 2014-02-03
4
366 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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to dynamically set the form action using jQuery.

705 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

15 Experts available now in Live!

Get 1:1 Help Now