Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Make embedded JavaScript function generic

Posted on 2014-02-03
4
Medium Priority
?
380 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

926 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