 |
 |
|
|
||
You probably have seen drop-down listboxes used to present product or service testimonials. Listboxes can be used when you wish to benefit from unique presentation and when the visible area of a web page is scarce compared to the amount of copy that must be presented. In addition to testimonials, examples of possible use are procedural instructions and explanatory text. This article will show you how to use one listbox for several different blocks of text. You can have many testimonials in one listbox, or several "pages" of instructions. You could even present a short story. The listbox can be a drop-down listbox or a multi-select listbox. First create a page that will contain your listbox. Then decide what your listbox's dynamic content will be. Write down the number of content pages your listbox will have. Also write down the number of lines that your longest content page has. Create a listbox with your first page of content. If the number of lines of your first listbox content page is less than the longest content page, place additional <option> </option> tags. The longest line of this first page of content must be at least as long as the longest line of any of your content pages. If it isn't, add periods, hyphens, spaces, or other characters until it is the correct length. The longest line and the number of lines of this first page of listbox content determines the listbox size. Each subsequent page must fit within that size. (Some browsers adjust the size of the listbox to the changing content, but not all of them do that.) Here is an example (examples are from the demonstration page at http://willmaster.com/a/url.pl?wmpdlc ):
<!-- BEGIN FORM --> <form> <select name="dynamic"> <option>A demonstration:</option> <option>This is the longest line of all the content.</option> <option> </option> <option> </option> <option>line five</option> </select> <br> <input type="button" value="< Back" onClick="Insert(this.form,'back')"> <input type="button" value="Next >" onClick="Insert(this.form,'next')"> </form> <!-- END FORM --> If you would rather have a multi-select list box than a drop-down list box, replace <select name="dynamic">with: <select name="dynamic" size="4" MULTIPLE>(The number following size determines the number of visible lines in the listbox.) After your form is in place, you'll need to put the following between the <head> and </head> tags (customization instructions follow):
<!-- BEGIN CONTENT FOR BETWEEN HEAD TAGS -->
<script language="JavaScript">
<!-- Copyright 2000 by William and Mari Bontrager.
// Your drop-down list box must be seeded with the content
// that has the largest number of lines and also the
// longest line. You may add blank lines:
// <option> </option>
// to create the correct number of lines, and you may
// extend a line with periods or hyphens or other
// characters until the longest line is long enough.
// The size of the list box is determined by your initial
// "seed" content.
// Different browsers display listbox text differently.
// Some use proportional fonts and others use
// monospaced fonts. It may be prudent to test your
// longest line with both types.
max_lines = 5; // Specify the number of lines of your
// longest listbox content.
num_pages = 4; // Number of listbox content pages.
display_now = 0; // Leave this line as is.
N = max_lines + 1; // Leave this line as is.
line = new TStringArray(N); // Leave this line as is.
function grab_display(){ // Leave this line as is.
// Each of your content sets must have an associated
// function. You may name the functions anything
// you wish. The content set/function name is
// one per line.
// Note: The content you seeded your listbox with will
// not reappear unless you also specifically make
// a content set/function for it.
if(display_now == 1) { onefunction(); }
if(display_now == 2) { twofunction(); }
if(display_now == 3) { threefunction(); }
if(display_now == 4) { fourfunction(); }
} // Leave this line as is.
// Now, make a function for each content set.
// This is the function prototype:
//
// function name_of_function(){
// line[1] = "Hello, this is your fearless leader!";
// line[2] = "Today is the day of the listbox.";
// line[3] = "Let's see, what else could I say?";
// line[4] = "";
// line[5] = "I say, \"Go forth and profit!\"";
// }
//
// You can have any number of line[...] lines so long as it
// does not exceed the number you specified above as
// max_lines
// Notice that blank lines can be specified with nothing
// between the quotes.
// Notice that quotes within the content are preceded with
// a backslash.
function onefunction(){
line[1] = "Hello, this is your fearless leader!";
line[2] = "Today is the day of the listbox.";
line[3] = "Let's see, what else could I say?";
line[4] = "";
line[5] = "I say, \"Go forth and profit!\"";
}
function twofunction(){
line[1] = "Thank you for reading me.";
line[2] = "If you implement this code, ";
line[3] = " please let me know the URL.";
}
function threefunction(){
line[1] = "WillMaster Possibilities:";
line[2] = "Something different in every issue.";
line[3] = "~~~ Visitor interaction.";
line[4] = "~~~ Website automation.";
line[5] = "Always something new to do.";
}
function fourfunction(){
line[1] = "A demonstration:";
line[2] = "This is the longest line of all the content.";
line[3] = "";
line[4] = "";
line[5] = "line five";
}
//
// NO CUSTOMIZATION REQUIRED BELOW THIS POINT
//
function TStringArray(n){
this.length = n;
for (var i = 1; i < n; i++){ this[i] = new String(); }
return this;
}
function Insert(F,d)
{
for (var i = 1; i <= max_lines; i++){ line[i] = ""; }
if(d == 'next'){
display_now++;
if(display_now > num_pages)
{ display_now = 1; }
}
if(d == 'back'){
display_now--;
if(display_now < 1)
{ display_now = num_pages; }
}
grab_display();
for (var i = 0; i < max_lines; i++){
var tt = new Option(line[(i+1)],"");
F.dynamic.options[i]=tt;
}
F.dynamic.options[0].selected=true;
} //-->
</script>
<!-- END CONTENT FOR BETWEEN HEAD TAGS -->
The above "content for between head tags" is 135 lines. It is documented with instructions. Lines 21 and 23 require the number of lines that your longest page of listbox content has and the number of listbox content pages, respectively. Lines 41-44 is where you specify a function name for each page. And lines 73-104 are those functions. That's all the customization that is required. Your site can be one of the first with dynamic listbox content. Have fun! Copyright 2000 by William and Mari Bontrager
William Bontrager, Programmer and Publisher
| ||