SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Promo Box

  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Promo Box

    Hi all,

    I would like to make a rotating promo and was wondering how best to approach it using Javascript. I have already made it using HTML/CSS;

    http://barrymcgee.dreamhosters.com/Promo

    Basically I would now like each promo to scroll through every 5 secs except onMouseover, it would pause, but I have no idea how to do it!

    I would really appreciate some help!

    Many thanks in advance!

    Barry

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When you mouse over the image you want it to pause, so we'll start there.
    I'll also place the code inside a function literal, so our variables and functions are neatly contained and won't interfere with other scripts.

    Code Javascript:
    (function () {
        // assign events
        var promo = document.getElementById('promobox');
        var images = promo.getElementsByTagName('img');
        for (var i = 0; i < images.length; i++) {
            images[i].onmouseover = pause;
            images[i].onmouseout = nextImage;
        }
    })();

    The trouble is though, how is the script to know what the next image is? One way is to search through the images for some special indicator, and another way is to remember which one is the current one.

    I've chosen the second method, where the promo box will have a property called "display" that points to the currently showing image.

    So we've got the current one, how do we get to the next one? If they were in the same node structure that would be easy, but this situation is more difficult than that. I've decided to place a property on each image called "next" that points to the next image.

    Setting up the reference to the next image can easily be done at the same time as we're assigning the events, so the above code gets updated to the following.

    Code Javascript:
    (function () {
        // assign events
        var promo = document.getElementById('promobox');
        var images = promo.getElementsByTagName('img');
        for (var i = 0; i < images.length; i++) {
            images[i].onmouseover = pause;
            images[i].onmouseout = nextImage;
            // set up reference to the next image
            if (i === images.length - 1) {
                images[i].next = images[0];
            } else {
                images[i].next = images[i+1];
            }
        }
     
        // start with the the first image
        promo.display = images[0];
        nextImage();
    })();

    The rotating images will be done by setting a timeout for 5 seconds before showing the next one. When we mouseover we want to stop them rotating, so that means stopping the next timeout event from occuring. We can do that by clearing the timeout event, but in order to clear it we need to be able to tell it what event we're wanting to clear, so we're going to store the reference to the timeout in a property on the promo box called "timer".

    Now we can set and clear the timeout by using that "timer" property.

    Code Javascript:
    function nextImage() {
        var promo = document.getElementById('promobox');
        promo.timer = setTimeout(showNext, 5000);
    }
     
    function pause() {
        var promo = document.getElementById('promobox');
        clearTimeout(promo.timer);
    }

    Finally we need to create the showNext() function that does the work for us. It moves out the current image, moves in the next one, and gets ready to loop again. I've decided to duplicate the method that you use in the stylesheet to move in and out the images.

    Code Javascript:
    function showNext() {
        var promo = document.getElementById('promobox');
     
        // move out current one
        promo.display.style.top = '-1000px';
        promo.display.style.left = '-1000px';
     
        // move in next one
        promo.display.next.style.top = '5px';
        promo.display.next.style.left = '5px';
     
        // prepare to loop again
        promo.display = promo.display.next;
        nextImage();
    }

    Place the code at the bottom of the body and that should do the trick. Here's the full code.

    Code Javascript:
    (function () {
    	// assign events
    	var promo = document.getElementById('promobox');
    	var images = promo.getElementsByTagName('img');
    	for (var i = 0; i < images.length; i++) {
    	    images[i].onmouseover = pause;
    	    images[i].onmouseout = nextImage;
    		// set up reference to the next image
    		if (i === images.length - 1) {
    			images[i].next = images[0];
    		} else {
    			images[i].next = images[i+1];
    		}
    	}
     
    	// start with the the first image
    	promo.display = images[0];
    	nextImage();
     
    	function nextImage() {
    		var promo = document.getElementById('promobox');
    		promo.timer = setTimeout(showNext, 5000);
    	}
     
    	function pause() {
    		var promo = document.getElementById('promobox');
    		clearTimeout(promo.timer);
    	}
     
    	function showNext() {
    		var promo = document.getElementById('promobox');
     
    		// move out current one
    		promo.display.style.top = '-1000px';
    		promo.display.style.left = '-1000px';
     
    		// move in next one
    		promo.display.next.style.top = '5px';
    		promo.display.next.style.left = '5px';
     
    		// prepare to loop again
    		promo.display = promo.display.next;
    		nextImage();
    	}
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •