The following page was originally designed and formatted by the late Art Camm. He was one of our finest WebTV webmasters, always willing to help. We still miss him very much. Out of respect, I've sourced Mr. Camm's original HTML and kept the formatting very much intact

Often Temporary
Audioscope in Signature
JavaScript "Bug Killer"



e-Mail Codes
Variations on <clock>
Image Above e-Mail Areas
Gradcolor Background
Mix-n-Match Stacked Backgrounds
CSS Sidebar
Music On/Off Button
C/C/P Text Enlarger
Voice Synthesizer
Mailer (with Attachment)
e-Mail Bounce



HTML Codes
Clickable Table or Cell (WebTV-Only)
Equal Left & Right or Top & Bottom Page Margins
Page Sidebar
Favorites Image and Title
Linking to Line on a Page
Scrolling Background
Meta Tag Redirect (Page Site Change)
Meta Tag No-Cache
Page Reload
Back a Page
Multiple Songs on a Page
Page-to-Page Same Song
Break Out of Frames
Page Source Block
Clear Cache



JavaScript Codes
Page and Link Colors
Scrolling Text on Page
Scrapbook Uploader
Image W x H Analyzer
Scrolling Status Bar Message
Rotating Banner
Auto-Redirect Drop-Down
Random Midi
Local Time in Status Bar
Countdown to a Day
Form Button Word Change
Image Mouseover Link (Preloaded)
Sound Mouseover Link (Preloaded)
Music On/Off (Button Click)
Music On/Off/Pause (Link Click)
Page Reload
Back a Page
Basic HTML/JS Test Bed
Typewriter or Marquee Effect
Multiple Songs on a Page
On/Off Radio/Checkbox Button Switch
Password (Low Security)
Hello & Good-Bye Page Pop-Ups
Keyboard "Find" Window Message
Sort/Alphabetize Routine



DHTML Codes
Vertical or Horizontal Lines (CSS)
Scroll Anything Vertically/Horizontally
"Peek-a-Boo" Window
Collapsible "Jump-Box"



What's Been Missed? Make a Comment/Suggestion


2.6 Upgrade e-Mail Scope Code (By Dale Southern)Used "raw" in the e-mail sig box.
<OBJECT ID="music/crescendo" SONG="URL of scope here"></OBJECT<


Pre-Upgrade Scope Code
(By Dextremental & CJLCOOTER)Two codes are said to work with the 2.6 upgrade, one of which, involving an "object" tag, will work with the present WebTV 2.5 and 2.5.5 configurations. There are two of these and both are given here. Any one code is placed directly in the Signature box. The short version is said to be slightly less reliable than the long version.
Short Version: <OBJECT ID="Crescendo"> <PARAM NAME="Song" VALUE="URLscope.html or zip"></OBJECT>  Long Version: <OBJECT><PARAM NAME="Song" VALUE="URLscope.html or zip"><EMBED TYPE="music/crescendo" NAME="song" DATA="URLscope.html or zip"></OBJECT>



JavaScript "Bug Killer" (By Wes Reins)JavaScript "Bug Killer" codes are unabled by WNI soon after they are found. Such a code is intended to reload the page whenever the "bug bites". It is placed in the body section after the page title where a "Bug Alert" is situated. This is the most recent attempt used by Minimoo. Server Side Include (SSI) must be enabled on the server where the page is located.
<noframes><!--#echo var="URL_this_page.html" --><script>c= 6;for(i=1;i<c;i++){setTimeout("history.go(0);",500)}</script><center><font color="?">WEBTV BUG ALERT - PLEASE RELOAD</font></center></noframes>



Variations on <clock> (Discovered by Paul Erickson)Place this code on a page or in an e-mail Signature to see the distinctions. No punctuation can be made within a tag, only between them. Format any date or time unit as desired adding or deleting them within an appropriate clock tag. Use as many clock tags as may be necessary for the desired format.
Usual display:<br><clock><br><br>Time Displays:<br>Civilian<br><clock time seconds ampm><br>Military<br><clock military time seconds><br><br>Date Displays:<br>1st Character Capitalized<br><clock dayofweek month day year><br>1st Character Capitalized; Abbreviated<clock abbreviated dayofweek month day year><br>All Capitals<br><clock allcaps dayofweek month day year><br>All Capitals; Abbreviated<br><clock allcaps abbreviated dayofweek month day year>



Image Above e-Mail AreasThe codes shown are illustrated as for an image tag. A choice must be made regarding placement: left, center, or right. There is actually no restriction as to content, i.e., any HTML code can be placed where the IMG is in these codes. The code may be placed anywhere at the end of the HTML signature code, and even after the closing HTML tag. The message must be sent to see the effect. Send to yourself as a test. Will not work in posts.
Image Above Message Area:
</table></tr></td><div align=left | center | right>IMG</div>



Image Above e-Mail Head:
</table></tr></td></table></tr></td><div align=left | center | right>IMG</div>



Image Above Message Area AND
Image Above e-Mail Head:
</table></tr></td><div align=left | center | right>IMG1</div></table></tr></td><div align=left | center | right>IMG2</div>



Gradcolor BackgroundGradangle can go from 0 to 360 or from 0 to -360. If transparency is used, choose a bgcolor in the body tag that will "show through", and compliment the gradcolors in the table tag. HTML e-mail and pages only.
<body bgcolor="linen" text="lightblue"><center><table width=100% bgcolor="green" gradcolor="blue" gradangle="90" transparency="50%" vspace=0 hspace=0 border=0><tr><td height=350><br><br><center>USUAL HTML HERE</center></td></tr></table><center></body>



Mix-n-Match Stacked Backgrounds (By ct-paso)Stack background colors. Put this code in the Signature box or message area as HTML e-mail. It's just c/c/p while changing the bgcolor and text color. Only works for e-mail.
<html><body bgcolor=? text=?>Whatever</body><body bgcolor=? text=?>Whatever</body>...etc...<body bgcolor=? text=?>Whatever</body></html>



CSS SidebarThis code is usually positioned between head and body tags, though with e-mail it can be placed after the body tag. Replace the images, change color, or use gradcolors as desired, Use an animated transparent .gif or one that is animated yet having no image and transparent to obtain a fade effect on the sidebar. The use of a transparency attribute in a table tag seems to stabilize positioning.
<style type="text/css">#element1 {position:absolute;z-index:0;top:-1000px;left:-166px;}</style><div ID="element1"><table width="150" height="1500" bgcolor="?" gradcolor="?" gradangle="?" transparency="?"><tr><td align="center" transparency="?"><img src="URL.gif" width="150" height="1500" transparency="?"></td></tr></table></div>



C/C/P Text EnlargerPlaced in Signature. Will generate a textarea into which an e-mail message can be c/c/p'd. The message will then be displayed as font size 7 and the textarea will grow to fit its length.
<form><font color="#ffffff" size=7><tt><b><textarea cols=40 rows=1 autowrap=virtual bgcolor="#000000" usestyle growable cursor="gold"></textarea> </b></tt></font></form>



Voice Synthesizer (From Bell Labs)


<embed src="http://wwwtts.research.bell-labs.com /cgi-user/tts/voicestts-nj?voice=woman&text=Put+the+words+to+be+said+here+as+shown.&audio=.wav"> Instead of voice=woman these also may be used: voice=man; voice=child; voice=gnat; voice=raspy; voice=bigman; voice=ridiculous



Mailer (with Attachment) (NG Post by Opti-Mod)Upon clicking the viewer is brought to their own e-mail message area: yourNic and address will be in the TO section; the Subject line will be filled in; a short message will be in the body; a URL will be an attachment, and what is entered for the URL page title will be a clickable link. The viewer's Signature will not be attached. Works for retrograded and upgraded units. in e-mail and on a page.
<a href="mailto:yourNic@webtv.net?no_signature=true&message_subject=Whatever&message_body=What +you+want+to+say&message_url=URL&message_title=Name+for+URL+site">Send This</a>



e-Mail BounceThese can be placed in the e-mail message area before being sent to one's self They can also be blocked as shown. Not easily blocked is a procedure and not a code: In message area enter Return twice, then any alt-character that can be seen. Hit cmd-a, then cmd-c (or -x). In cleared Subject area enter cmd-v. Address TO self and Send.
<html><plaintext> or <xmp> or <list> To block: Use in Sig code after <html></plaintext></xmp></list>



Clickable Table or Cell (WebTV-Only)


<table href="URL"><tr><td href="URL">Cell Content</td></tr></table>



Equal Left & Right or Top & Bottom Page MarginsThese are set using body attributes. The sample code sets a 100 pixel margin top and bottom and a 50 pixel margin left and right for text on a page
<body bgcolor="?" text="?" hspace=50 vspace=100>



Page SidebarSidebars on a page require the use of tables. Pixel widths must be used. To get a scrolling main page, start the coding with </table>.
</table><body bgcolor=? text=??><table width=120 height=900><tr><td><sidebar width=120 length=900 bgcolor=???>ANCHOR TAG OR BUTTON LINKS</sidebar></td></tr></table><table width=440><tr><td>PAGE CONTENT</td></tr></table></body>



Favorites Image and TitleIdentifying a page when saved to Favorites has two parts: in the head a title, and in the body tag a logo attribute specifying an image URL.
<head><title>Page Title</title></head><body bgcolor="?" text="?" logo="URL_page_logo.gif">



Linking to Line on a Page


Linking within a page:<!--Enclose a word/phrase that you click with: --><a href="#abbrev">WORD/PHRASE</a><!--Directly on the line you want to go to on the page write:--><a name="abbrev"></a>(abbrev is some abbreviation you make up)



Linking to a specific line on another page:
<!-- On the other page, write:--><a href="URLpageTogoto#abbrev">WORD/PHRASE</a><!--Directly on the line you want to go to on the page write:--><a name="abbrev"></a>(abbrev is some abbreviation you make up)



Scrolling BackgroundThis effect does not work in e-mail, will slow or stop animation on the page, and will slow operation from the keyboard. x+ is left-to-right; y+ is top-to-bottom. x- and y- reverses direction. # and ## are values 1, 2, 3, ..., with the higher values giving faster scrolls. When both x and y are included the scroll is on a diagonal.
<body background="URL.gif" xspeed=±# yspeed=±##>



Music On-Off ButtonReplace the text color in the button code if desired. Works on pages as well.
<form method="get" action="URL.mid"><input type="submit" value="MUSIC ON/OFF" text="crimson"></font>



Meta Tag Redirect (Page Site Change)Place this code in the head (Heading area for PB) section.
(<head> Not needed in PB) <meta http-equiv="refresh" content="1;URL_next_page.html"><center>This site has moved. You will be directed to it shortly. If not click button:<br><br><form method="get" action="URL_next_page.html><input type="submit" value="Take Me There"></form></center>(</head> Not needed for PB)



Meta Tag No-CachePlace this code in the head (Heading area for PB) section. Provides the viewer the most recently updated version of the page.
(<head> Not needed in PB)FOR WebTV: <meta http-equiv="Cache-Control" content="no-cache"> OTHER SERVERS: <meta http-equiv="Pragma" content="no-cache">(</head> Not needed for PB)



Page ReloadSupply text/image or use a form button.
<a href="URL_for_page">RELOAD/IMAGE</a> OR <form method="get" action="URL_for_page"><input type="submit" value="RELOAD"></form>



Back a PageSupply text/image or use a form button.
<a href="URL_for_previous_page">BACK/IMAGE</a> OR <form method="get" action="URL_for_previous_page"><input type="submit" value="BACK"></form>



Multiple Songs on a PageUse one meta tag in the head (Heading area for PB) for each ensuing song. Measure the number of seconds for each song and add this to the number in the content attribute for the following meta tag. The actual time is usually longer than that time entered due to file loading. Preloading song files makes the actual time nearer to this value.
(<head> Not needed in PB) <meta http-equiv="refresh" content="1;URL_next_song.mid">(</head> Not needed in PB)<!-- Place this in the body (Text area for PB)--><bgsound src="URL_1st_song.mid">



Page-to-Page Same SongFrames construct: 3 separate pages are needed, each with a name ending in .html. First Page (frameset): This names the site and brings in the other, the main, page. Second Page (frame): This contains the site content. Third Page (frame): This has only the music tag. The page itself is given the ending .html
<frameset rows="99%,*"><frame src="URL_content.html"><frame src="URL_music.html"></frameset><!-- "Bug" Warning --><noframes><center>Please Reload (cmd-r) This Page Uses Frames</center></noframes>



Break Out of FramesThis is placed on each page but the 1st loaded into a frame. The alternative was found by Tyhart and is WebTV only (upgraded units).
Trapped in a frame? <a href="SamePageURL.html" target="_top">Click here</a> to break out of it. (Alternative: <a href="SameorNextPageURL.html" target="main">Click</a>)



Page Source BlockTo prevent viewing any directory and hence access to its content, make a page in that directory with or without words to the effect, "Sorry. Private." and name that page "index.html". To block sourcing of any page in a directory: CAUTION - If you do this in the main directory it will block sourcing or transloading of all pages in the directory by everyone, and may lock you out of your own file manager. Use only to block sourcing of pages in a subdirectory. It will enable WebTV users to see pages in the subdirectory but not source them. PC users will not see any of the pages in the subdirectory. Start with a completely blank edit page, and DO NOT add tags or text. Only use the text shown in the window below. Place it in the absolute upper left of the edit page exactly as shown.
Call this file ".htaccess" and place ONLY this on the page, one line situated beneath the other: deny from all all allow from 209.240



Clear Cache (By limdog)The 2.5 upgrade brought with it the unabling of some ways to clear cache. This code seems to still work, but may not for all unit types. Only the 12 URLs in Recents are cleared, not the entire cache. Switch users or power-off for 10 minutes to fully clear cache.
<!-- Put This in Head --><script>function infoClear(){with(document){open();write('<Html>')write('<title>'+cc+'</title>');write("<body text=gold link=gold vlink=yellow bgcolor=#000000 address='WebTricks Network' instructions='"+'""'+"<HR><DISPLAY CLEARBACK><font size=7 color=darkgrey><code>Check Recents</font><HR><BR><BR><BR>"+"'>");write('<center><H2>'+cc+'</h2>');write('<br><><font color=ffff00 size=2>Hit Your Info Button<p>To Clear Cache<p><>');write('')} }</script><!-- Put this in Body --><a href="javascript:void(0)" onClick="infoClear()">Clear Cache</a>



Scrapbook Uploader


<form method="post" action="wtv-tricks:/add-to-scrapbook?mediaPath=Image URL"><input type="submit" value="Image to Scrapbook" size=250></form>



Image W x H Analyzer (ArtC's modified Hyest script)For proper use, count the number of images on the page, starting with 0, that appear before use of this code. If none, make ## in the code 0. Otherwise, add 1 and use that value.
<script>function diMens(){var H = document.images[##].height;var W=document.images[##].width; if(H=='40'&&W=='40'){document.my.imgin.value="No Image Detected.";}else if(H=='42'&&W=='42'){document.my.imgin.value="No Image Detected.";}else{vals="width="+W+" height="+H;document.my.imgin.value=vals;}}</script><center><table bgcolor="#ffffff" width=480 border=2><tr><td bgcolor="#000080" align=center><script> document.write("<img src="+history.previous+">");</script></td></tr><tr><td bgcolor="#000080" align=center><form name="my"><input type="text" name="imgin" size=20 autoactivate><br><input type="button" borderimage="file://rom/tvimages/tvbuttonborder.bif" value="Show Height and Width" onClick="javascript:diMens()" text="#ffffff"></form></td></tr><tr><td bgcolor="#000080" align=center><b>IMAGE ANALYZER</b></td></tr></table></center>



Page and Link Colors


<head><script language="JavaScript">function pagColors(){document.bgColor="?";document.fgColor="?";document.linkColor="?";document.vlinkColor="?";</script></head><!-- In the body tag place --><body onLoad="pagColors()">



Scrolling Text on PageThis scrolls text on a page only from the bottom to the top. Making values of dif lower or higher than 10, but not negative, can control the speed. Increasing the value 250 (which is in msec) in setTimeout will also slow the speed (1 sec=1000 msec),
<head><script>dif=10;inc=0;function scrollit(){inc=inc+10;parent.scroll(dif,inc);setTimeout("scrollit()",250);}</script></head><!-- Put this in the body --><body onLoad="scrollit()">



Scrolling Status Bar Message


<script>msg="Place Message Here";mlen=msg.length;i=0;function scrollMsg(){window.status=msg.substring(i,mlen)+msg.substring(0,i-1);if(i<mlen){i=i+1;}else{i=0;}setTimeout('scrollMsg()',50)}</script><!-- Use onLoad in body tag --><body onLoad="scrollMsg()"><!-- OR this early in the body --><script>scrollMsg()</script>



Rotating BannerChange nsec=3 to change the number of seconds to show a banner. Make sure the 1st banner URL in the Array is the same as the URL in the img tag.. Add or delete URLs as desired, taking care that they are entered between quotes and are separated by a comma as is shown.
<head><script language="JavaScript">banFil=new Array('URL1.gif','URL2.gif','URL3.gif');nimgs=banFil.length;count=0;nsec=3;function shoBan(){count=count+1;if(count==nimgs){count=0;}document.theImg.src=banFil[count];setTimeout('shoBan()',nsec*1000);}</script></head><!-- Put this in the body tag --><body onLoad="shoBan()"><!-- Place this where you want banner to show on page --><img width=? height=? src="URL1.gif" name="theImg" border=0>



Auto-Redirect Drop-Down


<form><select text="#000000" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)"><option selected>Choose From</option><option value="URL1">Item1</option><option value="URL2">Item2</option>REPEAT FOR EACH ITEM</select></form>



Random Midi

Add or delete URLs taking care that each is within quotes and they are separated by a comma, with no other spaces.
<script>sngs=new Array("URL1.mid","URL2.mid","URL3.mid");lnsngs=sngs.length;index=Math.round(Math.random()*lnsngs);document.write("<bgsound src="+sngs[index]+" loop='-1'>");</script>



Local Time in Status Bar (By TCTech)


<!--This in the head section --><head><script>function displaytime(){now=new Date();time=now.toLocaleString();window.status=time;}</script></head><!-- This in the body tag --><body onLoad="displaytime()">



Countdown to a DayChange the date for Christmas to the date desired. Careful if the count is for other than the current year. Follow comment on code if so. Modify font size or color as desired.
<html><head><title>Time Test</title></head><body bgcolor="white" text="black"><br><br><br><center><script language="JavaScript">today=new Date(); tdif=0;/* Note: Make "tdif" + or - for the number of years before or after the current one */targetdate=new Date("December 25, "+today.getFullYear());milliseconds=(24*60*60*1000);remaining=((targetdate.getTime()-(today.getTime()-tdif))/milliseconds);remaining=Math.round(remaining);document.write('<center><font color="blue" size=5><b>There are '+remaining+' days until Christmas</b></font></center>');</script></body></html>



Form Button Word ChangeMay be used in input type=button, submit, or reset form tags.
<input type="##" value="1st Word" onFocus="this.value='2nd Word'" onBlur="this.value='1st Word'">



Image Mouseover Link (Preloaded)Name images as .NAME_on.gif for mouse on image and .NAME.gif for mouse off image. Replicate the preload code but changing only the number 1 and NAME for each additional mouseover. Replace the relative URLs with full URLs if desired. The image tag will access the appropriate Mouseover according to NAME in the onMouseover and onMouseout attribute. There must be a link to come to or go from to see the effect.
/* Preload Images "/NNm=false;image=new Image();image1.src="NAME.gif";image1on=new Image();image1on.src="NAME_on.gif";/* ------ */function onm(name){document[name].src=eval(name+"on.src");}function offm(name){document[name].src=eval(name+".src");}NNm = true;function on(name){if (NNm) onm(name);}function offm(name){if(NNm)offm(name);}</script><!-- Place Image Link Where Desired --><a href="URL.html" onMouseover="on('image1')" onMouseout="off('image1')" target="_top"><img src="NAME.gif" border=0 name="image1"></a>



Sound Mouseover Link (Preloaded)Two alternatives are given in the code. Note: Each new pair of sounds will require a pair of preload embeds and a pair of on-off functions.
<script>function playSound(){document.sound1.play();}function playSound2(){document.sound2.play();}</script> /* May also use: function playsound1or2(){document[sound1or2].play();} */<!-- Preload Sounds --><embed src="URL1.wav" autostart=FALSE HIDDEN=TRUE NAME="sound1" MASTERSOUND><embed src="URL2.wav" autostart=FALSE HIDDEN=TRUE NAME="sound2" MASTERSOUND><!-- Place Link Where Desired --><a href="javascript:void(0)" onMouseOver="playSound()" onMouseOut="playSound2()" onClick="return false;">LINK</a>



Music On-Off (Button Click)


<script>/* To Play */function play(){document.location="URL.mid"}</script>/* To Stop */function stop(){document.song.stop()}</script><!-- Used in a Form --><form name="song"><input type="button" value="PLAY" onClick="javascript:play()"> <input type="button" value="STOP" onClick="javascript:stop()"></form>



Music On/Off/Pause (Link Click)


<embed name="song" src="URL.mid" autostart="true"><a href="javascript:document.song.stop()">STOP</a><a href="javascript:document.song.pause()">PAUSE</a><a href="javascript:document.song.play()">PLAY</a>



Page ReloadSupply text/image or use a form button. Note: Does not replace cmd-r for the WebTV JavaScript "Bug".
<a href="javascript:void(0)" onClick="history.go(0);">RELOAD/IMG</a> OR <form><input type="button" value="RELOAD" onClick="history.go(0)"></form>



Back a PageSupply text/image or use a form button.
<a href="javascript:void(0)" onClick="history.go(-1);">BACK/IMG</a> OR <form><input type="button" value="BACK" onClick="history.go(-1)"></form>



Basic HTML/JS Test Bed (Script by RWedge)


<!-- Put in the Head --><script type="text/javascript" language="JavaScript">function view(){if (document.show.results.value == ''){alert('The test area is empty. Please enter a script') return false;}else {document.open();document.write(document.show.results.value); document.close();}}</script><!-- Put in the Body --><center><table width="98%" border="0"><tr valign="top"><td align="center" colspan="2"><form name="show"><textarea name="results" cols="50" rows="10" autoactivate nohighlight></textarea></td></tr><tr><td align="center"><input type="button" value=" View " onClick="view()"> </td><td align="center"><input type="reset" value="Clear"></form></td></tr></table></center>



Typewriter or Marquee EffectTwo effects, typewriter text or marquee text, can be obtained. To have a typewriter effect set go="" (note - no space in "") and make use of a textarea field; for the marquee-like effect set go=" " (note - space in " ") and make use of an input-text field. Take care with the latter. The marquee effect, going right-to-left, upon reaching the end of the input-text field will end the typewriter effect going left-to-right unless the message length is carefully chosen to match the size of the text field.
<!-- Put This in Head --><script>/* Put Message Between Quotes For m */var m="This is your message.";end=m.length;var counter = 0;/* Typewriter: go="" Marquee: go=" " */var go="";function movit(){counter=counter+1;go=go+"";if(counter==32+counter){counter=32+counter;go=""}document.form.input.value=go+m.substring(0,counter);if(counter==end){counter=0;go="";}timr=setTimeout("movit();",200);}</script><!-- Put This in Body Tag --><body onLoad="movit()"><!-- Form Text Area For Typewriter --> <form name="form"><textarea cols=40 rows=4 borderimage=n bgcolor=white readonly name="input"></textarea></form>



Multiple Songs on PageTime in setTimeout is in millisec (1 sec = 1000 sec). Add the time to play to the time for all songs previous.
<script>/* Place this in head section */function sngs(){setTimout("document.location='URL1.mid'",time1);setTimeout("document.location='URL2.mid'",time1+time2);}</script><!-- Place this in the body tag --><body onLoad="sngs()"><!-- If code placed other than in the head use this in place of body attribute: <script>sngs()>/script< -->



On/Off Radio/Checkbox Button SwitchA WebTV Only Button. Switch "on" variable value is "0" (swich=0); switch "off" the value is "1". Without the on/off attributes the code is the same as for radio buttons.
<!-- This in Head --><script>swich=0;function abg(but){if(but.name=="onoff"){swich=but.value;}}</script><!-- This in Body --> <form name="clik"> <input type="checkbox" name="onoff" offimage="file://rom/images/SwitchOff.gif" onimage="file://rom/images/SwitchOn.gif" value="1" onClick="abg(this)"></form>



Password (Low Security)Place yourPassword between the quotes as shown. Low security as on sourcing the viewer can get the password.
<!-- This in Head --><script language="JavaScript">while(pass != 'yourPassword'){var prompt("Enter Your Password","")}</script>



Hello & Good-Bye Page Pop-Ups


<!-- Functions for dialog boxes in the head section. --> <head> <script>nam=" ";function hello(){var nam=prompt("What's your name visitor?","");document.write("<center>Glad you came to view my page,"+nam+".\nEnjoy your stay.</center>")} function gbye(){var book=confirm("Before you go "+nam+",\nplease sign my Guestbook before leaving (Click OK).");if (book){document.location="URLguest book"}}</script></head><!-- Function calls are in body tag --><body bgcolor=? text=? onLoad="hello()" onunLoad="gbye()">



Keyboard "Find" Window Message
"Implant" a message in the pop-up gained on hitting the Find key on the keyboard. The message remains though having left the site, and is not lost until deleted or powering off.
<!--Place in Head --><script>window.find(' Thanks For Visiting ?? Site Name ?? ')</script>



Sort/Alphabetize Routine


Enter list separating each item with a space.<br><script>var lst=new Array();len=lst.length;function getList(){var alist=document.inp.itm.value;lst=alist.split(" ");lst.sort();document.inp.itm.value=lst.join(" ")}</script><br><br><form name="inp"><input type="text" name="itm" size=40 autoactivate nohighlight><input type="reset" value="Reset"><br><input type="button" value="Enter" onClick="getList()"></form>



Vertical or Horizontal Lines (CSS) (By R_Endymion)This code gives a vertical white line beginning 120px from the top of the screen and 130px from the left of the screen. The line is 2px wide and 200px high. Reverse to get a horizontal line.
<div id="line" style="position:absolute;top:120;left:130;height:200;width:2;background-color: ffffff;"></div>



Scroll Anything Vertically/Horizontally


<head>7lt;!-- lim is no. pixels from top; inc is how far to move in pixels; upp and dwn are counters. The max count to shift direction is swp. This has to be set in accord with lim and is about 50 units less---To go left to right use:document.moveText.posLeft--><script>document.moveText.posTop=0;lim=300;swp=250;inc=10;upp=0;updn=0;function scrl(){if(updn==0){upp+=10;if(document.moveText.posTop<lim){document.moveText.posTop+=inc;if(upp==swp){updn=1;down=0;}}}else{down+=10;document.moveText.posTop-=inc;if(down==swp){updn=0;upp=0;}}setTimeout("scrl()",200)}</script></head><!-- For an added effect use x-,y-speed in the body tag (By R_E)--><body bgcolor=?><!--This at very bottom of page--><div id=moveText>Place anything here (whole page, text, or image)</div></body>



DHTML "Peek-a-Boo" WindowNow you see it, now you don't window. Before or after the body tag, name a window and position it using a style tag. Then, make a navigation link to open the "peek-a-boo" window (or to close it). At the end of the page, place between "div" tags, the beginning one having the same name as the style tag that positioned it, what is to be displayed in the window coding as it would be on a page. JavaScript code may be placed either within the head of the page for the window or within the window itself. With more than one window, use different z-indices for each, e.g., 1, 2, etc. This stacks each one-behind-the other, lowest values first. The .focus brings it to the top, and the .blur() returns it to its place. Try it and think of the possibilities
<html><head><title>DHTML Window Test</title><style type="text/css">#mainwindow{position:absolute;visibility:hidden;top:90px;left:120px;z-index:1;}</style></head><body bgcolor="#0000ff" text="#ffffff"><br><br><br><center><a href="javascript:void(0)" onClick="document.all.mainwindow.style.visibility='visible';document.all['mainwindow'].focus();"><font color="yellow" size=6><b>OPEN</b></font></a>  <a href="javascript:void(0)" onClick="document.all.mainwindow.style.visibility='hidden';document.all['mainwindow'].blur();"><font color="yellow" size=6><b>CLOSE</b></font></a></center><div id="mainwindow"><table width=300 height=150 bgcolor="#eeeeff" transparency="35%" border=3><tr><td align=center><font color="darkpink" size=6>PEEK-A-BOO</font></td></tr></table></div></body></html>



DHTML Collapsible "Jump-Box" (by WebWizard Jerry)Place anchor links or form buttons sequentially in the division section. The menu is generated by an onClick which calls a JavaScript function. Tables, "regular" or gradcolor, make up the "jump-box" links.
<head><!-- Set Style --><style type="text/css">#main{position:absolute;visibility:hidden;}#first{visibility:hidden;} #second{visibility:hidden;}#third{visibility:hidden;}</style><!-- End Style --><!-- This Makes It Work --><script>function openClose(){if(document.all.main.style.visibility=='hidden'){document.all.main.style.visibility='visible';setTimeout('document.all.first.style.visibility="visible"',100);setTimeout('document.all.second.style.visibility="visible"',200); setTimeout('document.all.third.style.visibility="visible"',300);}else{setTimeout('document.all.main.style.visibility="hidden"',600);setTimeout('document.all.first.style.visibility="hidden"',500);setTimeout('document.all.second.style.visibility="hidden"',400);setTimeout('document.all.third.style.visibility="hidden"',300);}}</script><!-- End Work Function --></head><body><!-- Call on Function --><a href="javascript:void(0)"onClick="openClose()">Open/Close</a><!-- End Call --><!-- Identify Display Code --><div id=main width=200 height=300 align=center><table border=3><tr><td>Main Menu</td></tr></table><div id=first width=200 align=center><table border=3><tr><td>First</td></tr></table></div><div id=second width=200 align=center><table border=3><tr><td>Second</td></tr></table></div><div id=third width=200 align=center><table border=3><tr><td>Third</td></tr></table></div></div><!-- End --></body>