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.
Submit an article or tip
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin