Click here to Skip to main content
14,355,397 members

Slide Show

Rate this:
3.92 (7 votes)
Please Sign up or sign in to vote.
3.92 (7 votes)
4 Jul 2002
Fun with Frames

Introduction

The script is basically a cross-browser solution to loop through a String array & display each value ONE AT A TIME  at the click of a button. The application involves Frames. The main page shown below contains 2 frames. The top frame is left blank & its content is filled by the script in the lower frame when the Button in the lower frame is clicked The JavaScript presented here shows a way of displaying a complete set of information in parts, a slide show of sorts, without refreshing the page each time. The cross-browser code gives a prelude on how to create a Questionnaire or a Wizard in which a single page should interact with the user and guide him through a series of steps.

In this script involving frames, a quip is displayed each time a button is clicked. Basically I loop through a String Array containing some thoughtful one-liners that I sneaked from Bugzilla, when the button is pressed. With a bit of CSS monkeying, I even show my favorites in a red.

Source Code

The zipped file contains 2 html files, slideshow.html and frame2.html

<html>
<frameset rows="50%,50%" border=0 scrolling=no>
<frame name="frame1" src="">
<frame name="frame2" src="frame2.html">
</html>

All the activity in the page is controlled by code in frame2.html. 

The function display() is called by the BODY onLoad event of the second frame & it makes sure there is something to show in the first frame when the main page is called. It builds the content for the first frame. 

function display()
{
    parent.frame1.document.open();
    parent.frame1.document.write("<html><body bgcolor='#f0f0f0'> ");
    parent.frame1.document.write("<STYLE TYPE='text/css'>");
    parent.frame1.document.write("I{color:red}");
    parent.frame1.document.write("</STYLE>");
    parent.frame1.document.write("<center><FONT SIZE=6 color=blue><B>"
        +quips()+"</b></FONT></center>");
    parent.frame1.document.write("</html></body> ");
    parent.frame1.document.close();
}

The function quips  is where I define my String Array. It returns back an element of the array sequentially, each time it is called by display() . The global variable size can be used to set the maximum size of the Array. In this case it is assigned a value of 10 as I have 10 quips to show. 

function quips()
{
    var quip = new Array();
    quip[0] = "<I>\"In times of crisis, it is of utmost importance " +
        "not to lose one's head.\" -- M. Antoinette</I>";
    quip[1] = "'95% of success is showing up.' -- Mark Twain";
    quip[2] = "<I>\"Yield to temptation, it may not " +
        "pass your way again.\" - L. Long</I>";
    quip[3] = "Homer, the walls are melting again...!";
    quip[4] = "\"Black holes are where God divided by zero.\"";
    quip[5] = "A conclusion is where you got tired of thinking.";
    quip[6] = "All strongly held opinions should be strongly opposed.";
    quip[7] = "An alcoholic is someone who drinks more than his doctor.";
    quip[8] = "Be different. Think.";
    quip[9] = "Beta testing BUGS me";
    return quip[count];
}

Some of the quotations need to be shown with double quotes. To escape the double quotes in the string, for instance in quip[0], it is preceded by a slash

The incr() function takes you to the next slide and you'll get back to the first slide once you reach the last slide. The global variable count keeps track of the array index.

function incr()
{
    count=count+1;
    if (count>=size)
        count=0;
    display();
}

By placing my favorites in italics and defining font color to red for the <i> tag using CSS, I've made some quips stand out.

<STYLE TYPE='text/css'>I{color:red}</STYLE>

Conclusion 

In a forthcoming article I'd like to discuss how this technique can be used by  a Questionnaire or a Wizard type of application, to accept information in chunks in a step-wise manner, dump it in a hidden INPUT type and process a Form by effectively utilizing a single page. Dynamic content can even be drawn from a database and populated into the Array using a server-side language like ASP/JSP.

Feedback

Go ahead, run the code and then rate it. I'll appreciate any kind of feedback on this article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

'Anil' Radhakrishna
Web Developer
India India
'Anil' Radhakrishna is a seasoned developer who enjoys working with Microsoft tools & technologies. He blogs quite regularly about his little discoveries and technical experiments on his blog called Tech Tips, Tricks & Trivia. He loves building mash-ups using public Web APIs.

Comments and Discussions

 
Generala little dated but good Pin
Donsw19-Jun-09 19:32
memberDonsw19-Jun-09 19:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 4 Jul 2002

Stats

72.9K views
1.3K downloads
23 bookmarked