PageBuilder Navigational Jump Boxes

Introduction

Thousands of free "Jump Box" CGI hosting services and "cut-and-paste" javascripts are available on the web. Use any major search engine to find one you like. As an example, the Yahoo (Google) search engine list of 511,000 is at:

http://google.yahoo.com/bin/query?p=Jump+Box&hc=0&hs=0

For WebTV signature box code you need an HTML coded CGI hosted program. For your webpages, you can use hosted CGI or javascript forms. Among the first few pages of the above list are the best available, ranked by the Google Search Engine database. Hosted Scripts, is a good reliable and easy to use Jump Box Wizard. But, there are so many choices, that it's hard to choose one you like. Just look at what your fellow Webbers are using and you can't go wrong.

Just C&P and customize the javascript forms to your personnal preferences. To obtain the CGI hosted form HTML codes, you will have to visit the provider's website and register. You will need to use your name, email addy, and list the webpage URL where the jump box code will be used. You will be shown the code for your website to C&P; and, in most cases, you should choose to have the code emailed to you along with the registration confirmation letter so you will always have a copy of your code in case you lose your webpage code due to editing errors. Save each major change so you can correct editing errors without having to start from scratch and re-enter your basic initial code Save the confirmation email letter for reference to contact information in case you have problems installing and using the jump box code.

Remember this: minor problems and glitches occur with all the major online support services. Your CGI jump-box may stop working due to problems or server shutdowns and maintenance. Not much you can do with the free support services, but you should not tolerate many problems with paid support services!

A Subscription CGI Jump Box

This jump box is similar to hundreds of free codes that are available on the web. All you have to do is go to the website of the provider and fill out a form with your URL choices. The code will be shown for C&P or you can select an option to have the code emailed to you.

If you are provided with an HTML only form, you can use the code in your email signature box. If you get code that contains javascript, typically form element event handlers like "onClick," "onSubmit," etc, you can not use the code in WebTV email.

Some providers may want to know the URL of the webpage you intend to use the form on, and may then use the javascript "document.write" method to write "document.referrer" in a link URL or input form element query for the form action attribute CGI to verify the account ID number owner.

Below is an example of an old, popular, free jump box code jump box code that I used in my first signature box as soon as I learned to make tables and forms. It is no longer available today, but I included the jump box display and code here so you could see how HTML navagation jump boxes are constructed. Many jump boxes like this are available free on the web for anyone who asks. It's just as simple as filling out an online form. And remember, you can add options, change the layout of the form elements, and add the WebTV proprietary form element attributes, such as: "bgcolor," "text" (text color), "selcolor" (color of selected items), and the many different WebTV "button" bif(s); just be sure to leave the source code comments, identifying the supplier of the jump box program, intact anytime your use the work of others!



Powered by NetJump


Note: For demo only – the NetJump server is inactive at the present time.

Here's the code for the above jump box, which is all HTML and can be used in an email signature box:

<form method="POST" action="http://www.netfreebies.net/cgi/jump.pl"> <SELECT size="1" width="240"> <OPTION selected value="">Select a Search Engine</option> <option value="http://www.yahoo.com/">Yahoo!</option> <option value="http://www.altavista.com/">AltaVista</option> <option value="http://www.excite.com/">Excite</option> <option value="http://www.lycos.com/">Lycos</option> <option value="http://www.infoseek.com/">Infoseek</option> <option value="http://www.webcrawler.com/">Webcrawler</option> <option value="http://www.hotbot.com/">HotBot</option> <option value="http://www.aol.com/netfind/">AOL Netfind</option> </select><INPUT type="submit" value="Go To"><br><a href="http://www.netfreebies.net/netjump/"><font size="1">Powered by NetJump</a></font></form></plaintext> </font> </TD></TR></TABLE> </P> <P> <TABLE> <TR><TD> <H3 ALIGN=left> <font color="blue"><u><i>A Jump Box Using JavaScript Event Handlers</i></u></font> </H3> <P ALIGN=left> In response to a problem post from Webber Mellissa, aka <a href="mailto:mjs526@webtv.net">mjs526@webtv.net</a>, in Beth Candy's PageBuilder NG, I added the javascript jump box from her webpage as a demo of how to modify her problem script to work correctly on WebTV PageBuilder webpages. Mellissa's code would not work on my PageBuilder webpage until I modified the code.<br> <br> In the code shown below, I just added the complete javascript DOM hierachy "path" from the document to "named" form and select elements. I have trouble with forms not working with WEBTV PageBuilder if I don't ID each element and show the complete DOM "path!"<br> <br> Below is Melissa's jump box and code:<hr><div align="center"><form name="myForm"><select size="1" name="list" onChange="window.location.href=(document.myForm.list.options[selectedIndex].value)"><option selected>Click to Select Next Page</option><option value="http://www.geocities.com/mjs_gemini/Poland2.htm">Page Two</option><option value="http://www.geocities.com/mjs_gemini/Poland3.htm">Page Three</option><option value="URLofLink">Link Name Here</option><option value="URLofLink">Link Name Here</option><option value="URLofLink">Link Name Here</option></select></form></div><hr><br>Here's the code I used for the above jump box:<br> <br> <font color="red"><plaintext><div align="center"><form name="myForm"><select size="1" name="list" onChange="window.location.href=(document.myForm.list.options[selectedIndex].value)"><option selected>Click to Select Next Page</option><option value="http://www.geocities.com/mjs_gemini/Poland2.htm">Page Two</option><option value="http://www.geocities.com/mjs_gemini/Poland3.htm">Page Three</option><option value="URLofLink">Link Name Here</option><option value="URLofLink">Link Name Here</option><option value="URLofLink">Link Name Here</option></select></form></div></plaintext></font><br> <br> With WebTV, using the jump box above; if you click on the drop-box index phrase after the drop-box displays the menu, nothing happens except that the drop-box collapses. However, if you inadvertantly click the selected index option after returning from a jump, the WebTV browser will take you to the top of the webpage! This is a quirky nuisance that I don't know how to avoid. Anyone who knows how to prevent this let me know and I will add the necessary changes and give you full credit! <br> <br> Also, I used the "onChange" event handler, instead of the "onClick" handler Melissa's code used in the &lt;select> tag because older versions of the Netscape browser, still in widespread use today in schools and libraries, do not support the "onClick" event handler in the &lt;select> tag, while MS and WebTV supports both handers. <br> <br> OK folks, this illustrates how you have to work with online JavaScript scripts with WebTV to "debug" your scripts and learn what works. See how I discovered the errors in the script and changed it. This is the way Webbers have to do with any scripts, especially the many free online C&P scripts that contain properties and methods that Web doesn't support, and which usually extra spaces and "returns" (whitespace) that PageBuilder webpages don't allow. Also, the PageBuilder progran will not allow the use of HTML comment tags to hide scripts from non-javascript browsers.<br> <br> Now one other point here that is controversial and the result of habit – the use of the ending &lt;/option> tag. The &lt;option> tag is a singleton tag that does not require a closing tag. However, many programs, such as MS Office Word, still insert closing tags in HTML text for most singleton tags like &lt;/li> and other tags that can be used as singleton tags like &lt;p> and it's optional &lt;/p> tag. Also, the HTML DTD does not strictly prohibit these closing tags, but apparently allows their transitional, optional use. I, out of habit, inadvertently put closing option (&lt;/option>) tags in Melissa's script. Also, in the NetJump code above they were put in the code I received from NetJump. All the old deprecated and unused closing tags will still be OK to use for some time to come and may even be OK with XHTML. With XHTML all singleton tags must have the "closing tag" syntax, like &lt;option />, to tell the browser HTML markup interpreter not to expect to see a closing tag. So with XHTML, if you don't use the singleton tag closing syntax, you must use a closing tag. However, I wonder if future strict HTML and XHTML DTD's will prohibit using the optional closing tags to force the universal use of the XHTML singleton closing tag syntax? I like to use closing tags to clearly label an HTML element's contents, but don't know how long I can get by with it because the new versions of HTML, XHTML, and XML keep getting much more strict.<br> <br> The jump box code shown above is for Melissa's Page One. I suggest that Mellissa use a drop-box like this on all her webpages. To use the jump box code on page Two, just remove the first option value URL and substitute the URL for Page One to link back to the previous page. Do this for subsequent pages, always listing links back to the other pages in the website. I also suggest that instead of just listing pages in the jump box, you consider putting subject information in the option boxes, that will better inform your viewers of the subject choices on each page of your website. In fact, you could also put navagational links to the "Top" of each page and to the "Home" page.<br> <br> Search the web and your fellow webbers websites in the NG's to find the code you want. Ask your fellow Webbers what's the most dependable online jump-box (CGI driven) providers if you want an HTML form jump-box for your email signature box. Use the javascript jump-box code shown above for your webpages. </TD></TR></TABLE> </P> <P> <TABLE> <TR><TD> <P ALIGN=left> <p align="center"><a href="mailto:jaxred@webtv.net?subject=PB%20Jump Boxes%20"><font size="7">Jax<font color="red">Red</font></a></p><p align="center"><form method="post" action="http://www.thunderstone.com/texis/demos/dox?demo=http://community-2.webtv.net/jaxred/Jump/"><script language="javascript"></script>View the <input type="submit" name="demo" value="Source Code" onClick="form.submit()" borderimage="file://ROM/Borders/BorderButton3.bif"> of this webpage with the Thunderstone WebTV Source Code Viewer. Put a "Source Code" <a href="http://community-2.webtv.net/jaxred/Viewers/">Viewer</a> on your webpages.</form></p><p align="center"><a href="http://www.wunderground.com/US/FL/Jacksonville.html"><img src="http://banners.wunderground.com/banner/gizmotimetempbig/US/FL/Jacksonville.gif" alt="Click for Jacksonville, Florida Forecast" height=40 width=467></a><br><a href="http://www.wunderground.com/about/faq/weathersticker.asp"><font size="3" color="#663300">© 2000 The Weather Underground, Inc.</font></a></p><p align="center"><table width="80%"><tr><td align="center" valign="center"><FONT SIZE="3" COLOR="BLUE"><b>Site<br>Visitors</b></FONT></td><td align="center"><!-- Begin Beseen Hit counter --><A HREF="http://www.beseen.com/hc-index.html"> <IMG SRC="http://pluto.beseen.com/hit.counter?account=556146&font=BlackOnWhite&base=0" BORDER=0></A><!-- End Beseen Hit counter --></td><td align="center" valign="center"><FONT SIZE="3" COLOR="BLUE"><b>Since<br>04/20/00</b></td></tr></table></p><HR size="10"><BR><center><FONT SIZE="4" COLOR="BLUE"><b>Thanks For Visiting My Site, Folks!</b></FONT></center><br><br><HR WIDTH="70%" ALIGN="CENTER" SIZE="10"> </TD></TR></TABLE> </P> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> </tr> <tr> <td colspan="3"> <hr> </td> </tr> <tr> <td valign=middle width=30%> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"> <b> </b></font></td> <td valign=middle width=30%> <center> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size=-2><I> <a href="http://www.webtv.net">Powered by WebTV</a> </I></font></center> </td> <td align=right valign=middle width=30%> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"> <b> </b></font></td> </td> </tr> <tr> <td colspan="3"> <hr> </td> </tr> </table> </BODY> </HTML>