Tech-Eclectic Javascripts

Tips For Using Internet Explorer Will Appear Here Randomly

Let`s see about this one...
Hmmmm...

I recently modified:

Scripts Page
Backgrounds Page
HTML Page
Code Page

[ This Window Closes Itself... ]

Tech-Eclectic Scripts

Javascripts are commands that you can use to increase the flexibilty and interest in your webpages. If I had to describe the scripts I use, I would say they range from simple single action scripts to multiple command, intermediately complex ones. For most scripts, you will need to be able to modify the actual code (text) of your webpage using a plain text editor such as Windows Notepad or similar program.
If you are NOT comfortable using hypertext markup language (HTML), cascading style sheets (CSS), and do NOT understand the different sections of a webpage; Head, Body, Style, etc., then I would NOT recommend you attempting to use these scripts. Because of the vast number of webpage generating programs and their limiting access to text level webpage editing, it is impossible for me to explain how to implement these in individual situations in an email. For this reason, you are welcome to try to use any of these scripts, but I cannot guarantee they will work in every situation, and I can offer very limited support. I have tested them to work in IE and Netscape browsers, but beyond that you are on your own.
( pssst... did you add me to your favorite places yet? )

Below you will find all of the scripts I use on these pages. The code can be cut-n-pasted from this text for used as they are, or modified to work on your page. If you don't want to read my babbling, then you can download the scripts, individually or the complete set, from my download page.

Note: my code was written to use my pictures and messages. You will need to include all of these items or modify the code slightly to work for you.

Table of Contents ... [ "T.O.C." links below bring you back here.]

Add Page To Favorites List (IE only)

Let's start with a simple one: A script that will add any page to your visitors favorite list in IE. This is a script you use in the actual link tag. Take a look at the code:

<a href="javascript:if(document.all){window.external.AddFavorite('http://geocities.datacellar.net/inn-cite/tech1.html', 'Tech-Eclectic Website')}">pssst... did you add me to your favorite places yet?</a>

To use this script on your page, just change the URL and the NAME to match the page you want them to add. Now that wasn't too hard, was it? Ready for another script?

Graphics used: none

T.O.C.

A MouseOver Message Box

This script will define a message box, then display messages as the mouse moves over links on the page. First you need to define your messages in an array. This should be done in a script section in the head of your page.

msg = new Array();
msg[0] = "Welcome To Tech-Eclectic's Webspace";
msg[1] = "Click for Main Site Pages Menu...";
msg[2] = "Click for Utilities & Downloads Menu...";
msg[3] = "Click for Graphics & Web Design Menu...";
msg[4] = "Click for Information & Help Menu...";
msg[5] = "Click to Rollup This Menu...";

The sample above shows 5 messages, you can setup as many as you need. This pages actually has 45 messages defined. Now you need a function, also located in a script section in the head of your page, to display the messages.

function popmsg(j) {
if (document.layers) {document.title.document.textbox1.body1.value = msg[j];}
else if (document.all) {document.textbox1.body1.value = msg[j];}
}

Now you need to define an area in the body of your page where the messages will appear.

To display the messages you need to use the onMouseover and onMouseout parameters in your links. Here is an example:

Graphics used: none

T.O.C.

A MouseOver Status Bar Message

Many pages use the Status Bar as the location for link messages. If you use this method, you do not need any of the above scripts, you can do this right in the link like this:

<a href="javascript:toggleMenu(menu2,0)" onMouseover="self.status='Your message here...'; return true;" onMouseout="self.status=' '; return true;">Toggle Menu 2</a>

The message will appear in the status bar at the bottom of the browser while the mouse is over the link. When the mouse moves off the link, a blank messages is written to clear the status bar.
See it in action here: Toggle Menu 2.

Graphics used: none

T.O.C.

A Random Message Box

This script is similar to the text message script above, but uses a defined layer to display the messages. Actually the layer is re-written to display each new message.
Again you need to define your messages in an array in a script section in the head of your page.

tip = new Array();
tip[0] = "To search from the Address bar, type go, find, or ?
followed by a word or phrase, and then press ENTER.";
tip[1] = "You can mark favorites or Links bar items for offline
reading by right-click an item, then click `Make available offline`.";
tip[2] = "You can specify whether to accept 'cookies' on your
computer for each security zone. Look up 'cookies' in the Help Index.";
tip[3] = "You can rearrange shortcuts on the Links bar
by dragging and dropping them.";
tip[4] = "To change the color of links on Web pages, click the
Tools menu, click Internet Options, and then click the Colors button.";
tip[5] = "To open a new Internet Explorer window, press CTRL+N.";

You can define as many tips as you want.
Next you need to define a layer(div) with an ID of randtip to display the text.

<div id="randtip" class="norm"
style="position:absolute;top:140;left:660;width:200;height:100;
visibility:visible;">
<table border="2" bgcolor="#cfcfcf" cellspacing="0"
cellpadding="0">
<tr height="30">
<td height="30" align="center" background="vb1.jpg">
<img src="ltyllw.recess.tips.gif">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<p>Tips For Using Internet Explorer Will Appear Here Randomly
</td>
</tr>
</table>
</div>

Now for the tricky part. Each time you want to display a new message, the entire table in the randtip layer(div) is re-written by a script. Again, this script should be in a script section in the head of your page.

function tipWrite(id,nestref,tnum) {
var a = tnum+Math.round(Math.random()*31);
if (document.layers) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id+'.document') :
document.layers[id].document
lyr.open()
lyr.write('<table width=200 height=120 border=1 cellpadding=0 cellspacing=0><tr height=30><td height=30 align=center background=vb1.jpg><img src=ltyllw.recess.tips.gif></td></tr><tr><td align=center><span class=norm>'+ tip[a] + '</span></td></tr></table>')
lyr.close()
}
else if (document.all) {
document.all[id].innerHTML = '<table width=200 height=120 border=1 cellpadding=0 cellspacing=0><tr height=30><td height=30 align=center background=vb1.jpg><img src=ltyllw.recess.tips.gif></td></tr><tr><td align=center><span class=norm>'+ tip[a] + '</span></td></tr></table>'
}
setTimeout("tipWrite('randtip','',0)",15000);
}

This script picks a random number 0-31 for a message, determines the browser being used, writes the new message, then sets a time to do it again using the setTimeout command.

Important Note: To get the tips displayed the first time when the page loads, you have to include the onLoad command in the body tag of you page:

Graphics used: Titlebar Background || Titlebar Button
(Right-click on the graphics above and choose 'Save [Picture|Image] as...') >Titlebar Button

T.O.C.

A MouseOver Popup Message Box

This script uses the ability of a layer(div) to be visible or hidden. By doing this, you can create popup messages then make them disappear again. In order to make the script cross-browser compatible, you need to define some variables for hide, show, and the layer(div) that are used. Here is the setup for a popup window with an ID of daynews.

Next define a layer(div) with an ID of daynews in the body of your page.

<div id="daynews"
style="position:absolute;top:180;left:320;visibility:hidden;z-index:3;">
<table border="2" bgcolor="#cfcfcf" cellspacing="0" cellpadding="0">
<tr height="30">
<td height="30" align="center" background="vb4.jpg">
<img src="ltgrn.recess.new.gif">
</td>
</tr>
<tr>
<td align="center">
<table bgcolor="#ffffff" cellspacing="0" cellpadding="4">
<tr>
<td>
<br clear="left">
<p>Let`s see about this one...
<br>
Hmmmm...
<p>
I`ve been too busy to add
<br>
anything new today... BUT...
<p>
Check back TOMORROW!
<p>
TECH-ECLECTIC
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Now to show the popup message while the mouse is over the link and hide it when the mouse moves off, use the onMouseover and onMouseout parameters in the link as before.

<a href="javascript:void();" onMouseover="showObject(daynews);" onMouseout="hideObject(daynews);">-Anything New-</a>

Note that the link is to "javascript:void();". This allows the link to be clicked, but nothing happens.

Graphics used: Titlebar Background || Titlebar Button
(Right-click on the graphics above and choose 'Save [Picture|Image] as...')

T.O.C.

A Self-Closing MouseOver Popup Message Box

To have your popup message disappear after a short time, simply change the onMouseout parameter like this:

<a href="javascript:void()" onMouseover="showObject(daynews);" onMouseout="setTimeout('hideObject(daynews);',8000);">-Anything New-</a>

This will display the box for approximately 8 seconds (8000 mil-seconds) after the mouse moves off the link, before hiding it.

T.O.C.

A Drop-Down/Roll-Up Menu

Okay now you have seen how to write a layer(div), and hide or show it. Why not make things more interesting by moving them around. The drop-down/roll-up menu is simply a number of pre-written layer(div), that you hide or show and change their position properties. I will show you one menu to explain some of the funcions. To add more menus, the code would be almost identical except for the div IDs, positions, graphics, and links.

The menu consists of 2 parts; a menubar with trigger buttons and menus with links. When the trigger button is clicked, the associated menu is shown and moved into the drop-down position. The last link on the menu is a button to roll-up the menu and hide it.

In my menu, the trigger buttons are animated GIFs to simulate sliding LCD panels and the menus are GIFs that simulate recessed LCD panels. You can use your own graphics or plain text links if you prefer.

Again, all the scripts should be a script section in the head section of your page. All layer(div) sections go in the body sction of your page.

This menu uses preloaded images and five scripts; preload images for faster changes, change to change the image when the mouse is over it, the popmsg used above, togglemenu to show or hide it, which in turn calls an openmenu and closemenu to drop-down and roll-up the menu.
Here are the scripts:

// Preload Images
:
menu1t1 = new Image();
menu1t1.src = "ltblue.sitelinks.anim-rl.open.gif";
menu1t2 = new Image();
menu1t2.src = "ltblue.sitelinks.anim-rl.close.gif";
menu1ia1 = new Image();
menu1ia1.src = "ltgrn.recess.exit.gif";
menu1ia2 = new Image();
menu1ia2.src = "ltyllw.recess.exit.gif";
menu1ib1 = new Image();
menu1ib1.src = "ltgrn.recess.new.gif";
menu1ib2 = new Image();
menu1ib2.src = "ltyllw.recess.new.gif";
menu1ic1 = new Image();
menu1ic1.src = "ltgrn.recess.comments.gif";
menu1ic2 = new Image();
menu1ic2.src = "ltyllw.recess.comments.gif";
menu1id1 = new Image();
menu1id1.src = "ltgrn.recess.contact.gif";
menu1id2 = new Image();
menu1id2.src = "ltyllw.recess.contact.gif";

function change(layer,Name,Image,No) {
if (document.layers && layer!=null) {eval('document.'+layer+'.document
["'+Name+'"].src = '+ Image+No +'.src');}
else if (document.all) {
document [Name].src = eval(Image + No + ".src");}
}

function popmsg(j) {
if (document.layers) {document.title.document.textbox1.body1.value = msg[j];}
else if (document.all) {document.textbox1.body1.value = msg[j];}
}

function toggleMenu(menupick,j) {
if (j == 1) {
if (menupick == menu1) {showObject(menu1);openMenu1(-160,30);}
if (menupick == menu2) {showObject(menu2);openMenu2(-160,30);}
if (menupick == menu3) {showObject(menu3);openMenu3(-160,30);}
if (menupick == menu4) {showObject(menu4);openMenu4(-160,30);}
}
else {
if (menupick == menu1) {closeMenu1(30,-160);}
if (menupick == menu2) {closeMenu2(30,-160);}
if (menupick == menu3) {closeMenu3(30,-160);}
if (menupick == menu4) {closeMenu4(30,-160);}
}
}

function openMenu1(from, to) {
if (from < to) {
menu1.top = (from += 10);
setTimeout('openMenu1(' + from + ',' + to + ')', 50);
}
}

function closeMenu1(from, to) {
if (from > to) {
menu1.top = (from -= 10);
setTimeout('closeMenu1(' + from + ',' + to + ')', 50);
}
}

Here is the menubar layer(div):

Here is the trigger for the first menu layer(div): [Note: 3 more are used in my menu.]

Here is the menu layer(div): [Note: 3 more are used in my menu.]

Graphics used: Menubar Background
Menu Trigger (menu1t1) Button
Menu Trigger (menu1t2) Button
Menu (menu1ia1) Button 1a || Menu (menu1ia2) Button 1b
Menu (menu1ib1) Button 2a || Menu (menu1ib2) Button 2b
Menu (menu1ic1) Button 3a || Menu (menu1ic2) Button 3b
Menu (menu1id1) Button 4a || Menu (menu1id2) Button 4b
Menu Bottom || Menu Bottom Black Ball (2 used) || Menu Background
(Right-click on the graphics above and choose 'Save [Picture|Image] as...')

For a complete menu see my download page.

T.O.C.

I cannot believe I actually wrote all this stuff... but more than that, I cannot believe that you read all the way to the bottom of this page! By now, you are probably sick of reading , so why not cut and paste, or download some of the scripts and start having some fun with your webpage.

Use the menus at the top of the page to access the areas of my site. This is a project in the works so not all the pages have been coded yet... but I'm working on it!