JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation | 7 | WebReference

JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation | 7

JavaScript Tip of the Weekfor October 28, 1996: Create Eye Catching Intros

How do you get somebody's attention? I'm not talking about screaming at the top of your lungs, I'm talking about getting somebody to take a second look at your site. It turns out that it's not all that difficult; at least for the first five seconds. The effect that you just experienced is called a slide show. It is simple, fast, and effective in getting someone's attention; at least for a short period of time. Creating an effect like this is easy and very customizable. If you've taken a moment to experience The Hut, then you know what I'm talking about.
Creating The Slide Show Object

The first step is to create an array of words, phrases, pictures, or sounds to be displayed in a given order. If you plan on using pictures or sounds, I highly recommend pre-loading them. Otherwise, just follow this format:
    function makeArray() {
    this.length = makeArray.arguments.length;
        for (var i = 0; i This is a simple effect.
', 'One of many actually.', 'It caught your attention.', 'Now find out how.'); It can be as long as you want, but I suggest anywhere from three to five phrases in length. If you want to use images or sounds, just put the HTML code for them in place of the sentences I've included. Now comes the interesting part: This script revolves around an object which is created by the makeSlideShow() function. This object has a number of properties: word, wait, pre, and url among others:
    function makeSlideShow (obj, wait, pre, url) {
    this.curText = '';
    this.posit = 1;   
    this.word = obj;  
    this.length = obj.length;
    this.pre = pre;
    this.wait = wait;
    this.url = url;
    this.display = displaySlideShow; <-- set displaySlideShow as this 
    }                                    object's 'display' function
You must pass makeSlideShow() four parameters to create a Slide Show object. In this case, the Slide Show object that you are creating is named wordsIntro; remember that, it will be important later on. The first parameter you pass it is the array of phrases you created earlier; words. The second is the time in milliseconds that you want the slide show to wait before displaying the next phrase. The third is the HTML that you want to be common to all the phrases. In this case all of the phrases were centered and had a number of line breaks preceeding them. This gave the effect of being centered in the middle of the screen. The final parameter is the URL of the page that you want to be brought to at the end of the slide show.
    var wordsIntro = new makeSlideShow (words,
                                       '<CENTER><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>',

The last part of the Slide Show object is what makes this menagerie of phrases, times, and HTML code function as a whole. It takes the phrases in the array that you passed it and displays them sequentially. It is important to note that because it's part of the Slide Show object, it reffers to the the object as this, not as wordsIntro or any other variable:
    function displaySlideShow() {
        if (this.posit <-- display slide
this.posit++; show to frame } using location else top.location = this.url; } This function uses the 'location method' explained in last week's tip to display each phrase to the frame. I've chosen this method because it works without any problems on all JavaScript enabled browsers.
A Page for the Slide Show

You need somewhere to put the slide show. Using the hidden frame method you learned earlier in this week's tip combined with document.write, this is can be accomplished with a few lines of code:
    var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
    var blankFrameBottom = '</BODY></HTML>';
    var blankFrame = blankFrameTop + blankFrameBottom;
    var doneLoop = false;
    document.write ('<FRAMESET onLoad = "displayLoop()" ROWS = "100%, *"');
    document.write ('FRAMEBORDER = NO BORDER = 0>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame"');
    document.write ('NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
    document.write ('</FRAMESET>');
Variable blankFrameTop is very important. It defines the background and foreground colors of the slide show. The default setting is white text on a black background. To change those colors, simply modify the body tag in blankFrameTop and the slide show will reflect those changes.

After those lines of code and the closing script tag, put the page that you want non-JavaScript enabled browsers to see. This is not neccessary, it's just a good idea for those people who have JavaScript turned off or are using an antiquated browser.
    This Page is what non-JavaScript browsers see.

Running the Slide Show

Now that you have all of your content for the Slide Show object, you need to run the slide show. This is done using one function; displayLoop(). This function waits a specified amount of time and then displays the Slide Show object. In this case specified amount of time is 2500 milliseconds; the value that you gave the wordIntro Slide Show object earlier. This process loops until there are no phrases left, at which point the slide show brings you to the page that you specified earlier.
    function displayLoop() { 
        if (wordIntro.posit wordIntro
.length) reDraw = setTimeout('displayLoop()', wordIntro.wait); wordIntro.display(); } Notice that wordIntro was referenced four times in this function. Once to determine the lull time that was specified earlier and once to run wordIntro's display function; displaySlideShow(). This is how objects work; you can access their individual properties or ask them to preform functions, such as displaying the slide show. If you don't quite understand how all this works, just copy the source and tweak it; that's one of the best ways to learn (other than reading JTotW).