Go Back   CodingForums.com > :: Client side development > JavaScript programming > Post a JavaScript

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rating: Thread Rating: 16 votes, 3.00 average.
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-10-2003, 10:33 PM   PM User | #1
Skyzyx
Regular Coder

 
Skyzyx's Avatar
 
Join Date: Aug 2002
Location: Silicon Valley, CA
Posts: 980
Thanks: 0
Thanked 0 Times in 0 Posts
Skyzyx is on a distinguished road
Message Center: Image/Text Rotator

This here is a script that I've used in a few different sites, namely art/graphic/image-related sites. It's designed to rotate through banner ads, images, text, or anything else. I've tried to make it as easy to use as possible, so let me know what you think. Efficiency and functionality improvement suggestions are always welcome. =)

Documentation is available, and you can download the script with a demo page at the bottom of this post.

One thing that I built-in is a user's ability to stop the content from rotating (assuming the web designer makes the function available on his/her website), which helps to conform to the Web Content Accessibility Guidelines about "no or uncontrollable screen flickering".

Code:
/*************************************
MESSAGE CENTER 5.1
(c) 2002-03, Ryan Parman
http://www.skyzyx.com
Distributed according to SkyGPL 2.1,
http://www.skyzyx.com/license/
*************************************/


/*************************************
Updated September 2, 2003

v5.1 - Added Next() and Previous().  Also added "aliases" for many
functions to help a coder's logical naming style.  Changed Resume()
into an alias for Start().  Streamlined and optimized code for efficiency.

v5.0 - Completely rewrote this script from the ground-up to be object-
oriented in nature.  Implemented Algorithm's OO Timeouts.  Functions
include addMessage(), start(), pause(), resume(), and clear().
*************************************/
function messageCenter(zSpanID, zDelayMS)
{
    // INITIALIZATION
    var spanid=zSpanID;
    var delay=(zDelayMS) ? zDelayMS:4000;
    var messageArray=new Array();
    var count=0;
    var tOut=new Timer(this);
    var tOutRef, tOutRev;
    var prevAcct=0;
    var nextAcct=0;

    // ADD A MESSAGE
    // The parameter must be an HTML or text string.
    this.addMessage=function(zMessage) {
        messageArray[messageArray.length]=zMessage;
    }

    // START MESSAGE CENTER
    // Usually this will be called on the onload of the BODY tag.
    this.start=function() {
        if (document.getElementById) {
            document.getElementById(spanid).innerHTML=messageArray[count];
            count++;
            if (count > (messageArray.length-1)) count=0;
        }
        tOut.clearTimeout(tOutRev);
        tOutRef=tOut.setTimeout("start", delay);
        nextAcct=0;
        prevAcct=0;
    }

    // start() aliases:
    this.resume=function() { this.start(); }

    // PAUSE FUNCTION
    // This will pause the Message Center.  Optionally, passing a String parameter will display that string while paused.
    this.pause=function(stopMessage) {
        this.stopMsg=(stopMessage) ? stopMessage:null;
        tOut.clearTimeout(tOutRef);
        if (this.stopMsg) document.getElementById(spanid).innerHTML=this.stopMsg;
    }

    // pause() aliases:
    this.stop=function(stopMessage_stop) { this.pause(stopMessage_stop); }

    // CLEAR FUNCTION
    // This will stop the Message Center, and clear the element's contents.
    this.clear=function() {
        tOut.clearTimeout(tOutRef);
        document.getElementById(spanid).innerHTML='';
        count=0;
        nextAcct=0;
        prevAcct=0;
    }

    // clear() aliases:
    this.end=function() { this.clear(); }
    this.kill=function() { this.clear(); }
    this.NoDisassembleNumberFive=function() { this.clear(); }

    // NEXT FUNCTION
    // This will skip to the next message, and pause the Message Center.
    this.next=function() {
        if (nextAcct == 0) { nextAcct=1; prevAcct=1 }
        else if (nextAcct != 0) count++;
        if (count > (messageArray.length-1)) count=0;
        if (count < 0) count=messageArray.length-1;
        tOut.clearTimeout(tOutRef);
        document.getElementById(spanid).innerHTML=messageArray[count];
    }

    // next() aliases:
    this.forward=function() { this.next(); }
    this.fwd=function() { this.next(); }

    // PREVIOUS FUNCTION
    // This will skip to the previous message, and pause the Message Center.
    this.previous=function() {
        if (prevAcct == 0) { prevAcct=1; count-=2; nextAcct=1; }
        else if (prevAcct != 0) count--;
        if (count > (messageArray.length-1)) count=0;
        if (count < 0) count=messageArray.length-1;
        tOut.clearTimeout(tOutRef);
        document.getElementById(spanid).innerHTML=messageArray[count];
    }

    // previous() aliases:
    this.prev=function() { this.previous(); }
    this.back=function() { this.previous(); }
}


/*************************************
Utilizes Algorithm's Timer Class for Object-Oriented timeouts
http://www.undefined.net
*************************************/
function Timer() {
    this.obj = (arguments.length)?arguments[0]:window;
    return this;
}

Timer.prototype.setInterval = function(func, msec) {
    var i = Timer.getNew();
    var t = Timer.buildCall(this.obj, i, arguments);
    Timer.set[i].timer = window.setInterval(t,msec);
    return i;
}

Timer.prototype.setTimeout = function(func, msec) {
    var i = Timer.getNew();
    Timer.buildCall(this.obj, i, arguments);
    Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
    return i;
}

Timer.prototype.clearInterval = function(i) {
    if(!Timer.set[i]) return;
    window.clearInterval(Timer.set[i].timer);
    Timer.set[i] = null;
}

Timer.prototype.clearTimeout = function(i) {
    if(!Timer.set[i]) return;
    window.clearTimeout(Timer.set[i].timer);
    Timer.set[i] = null;
}

Timer.set = new Array();
Timer.buildCall = function(obj, i, args) {
    var t = "";
    Timer.set[i] = new Array();
    if(obj != window) {
        Timer.set[i].obj = obj;
        t = "Timer.set["+i+"].obj.";
    }
    t += args[0]+"(";
    if(args.length > 2) {
        Timer.set[i][0] = args[2];
        t += "Timer.set["+i+"][0]";
        for(var j=1; (j+2)<args.length; j++) {
            Timer.set[i][j] = args[j+2];
            t += ", Timer.set["+i+"]["+j+"]";
        }
    }
    t += ");";
    Timer.set[i].call = t;
    return t;
}

Timer.callOnce = function(i) {
    if(!Timer.set[i]) return;
    eval(Timer.set[i].call);
    Timer.set[i] = null;
}

Timer.getNew = function() {
    var i = 0;
    while(Timer.set[i]) i++;
    return i;
}
__________________

Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

Last edited by Skyzyx; 12-10-2003 at 10:36 PM..
Skyzyx is offline   Reply With Quote
Old 12-10-2003, 10:34 PM   PM User | #2
Skyzyx
Regular Coder

 
Skyzyx's Avatar
 
Join Date: Aug 2002
Location: Silicon Valley, CA
Posts: 980
Thanks: 0
Thanked 0 Times in 0 Posts
Skyzyx is on a distinguished road
Dang it.
Attached Files
File Type: zip messagecenter.zip (3.6 KB, 608 views)
__________________

Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.
Skyzyx is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 03:38 PM.


Advertisement
Log in to turn off these ads.