[ -Tech-Eclectic- ] : [ -Anything New- ]

Tips For Using Internet Explorer Will Appear Here Randomly

 

 
  Tech-Eclectic Toys

 

   

 
Below you will find generic versions 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.

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


 
   

 

Add Page To Favorites List (Works in IE only) / Demo

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://www.yourdomain.com/yoursite/yourpage.html', 'Your Website/Page Name')}">Add This Page to IE Favorites</a>

To use this script on your page, just change the URL ['http...] and the Name [...Website/Page...] to match the page you want them to add to their favorites list.

T.O.C.

A MouseOver Text Message Box / Demo

Look! Mouseover 'Demo'

This script will define a text message box, then display messages as the mouse moves over links on the page. A message box is an area of text, using a form, not a new layer or window. To display a message in a seperate layer, see pop-up message area below.

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 My Website";
msg[1] = "Main Sitemap Page";
msg[2] = "Utilities & Downloads";
msg[3] = "Graphics & Web Design";
msg[4] = "Information & Help";

The sample above shows 5 messages, you can setup as many as you need. My pages actually have 45 messages defined.

You need to define an area in the body of your page where the messages will appear. The name of this area is used in the function to tell the script where to put the message.

<form name="textbox1">
<input type="text" NAME="body1" size="36" value="Your initial message goes here...">
</form>

Now you need a function to display these messages. Locate this in a script section in the head of your page.

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

Use the onMouseover and onMouseout parameters in your links to call the function to display the messages. Here is an example:

<a href="your-link-here" onMouseover="popmsg(5);" onMouseout="popmsg(0);">

This script is best used on a page that does not scroll down. On my page, it is positioned next to the main menubar to give additional information about the menus.

T.O.C.

A MouseOver Status Bar Message / Demo

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="your-link-here" onMouseover="self.status='Your message here...'; return true;" onMouseout="self.status=' '; return true;">your-link text-here</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.

T.O.C.

A Random Message Area / See 'PC Tips' Box Above

This script is similar to the text message script above, but uses a defined layer, in this example a 200x100 pixel area, to display the messages and a timer to randomly change the message information. In this script, the area is visible all the time, but the message changes at a predetermined interval.
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. Set the style for the position from the top and left, height & width, and visiblity of the layer. Then put the HTML code of the initial message.

<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">
<b>Important Information</b>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<p>Messages Will Appear Here Randomly
</td>
</tr>
</table>
</div>

Now for the tricky part. Each time you want to display a new message, the entire HTML code in the randtip layer(div) is re-written by a function, tipWrite(). This function 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.
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><b>Important Information</b></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><b>Important Information</b></td></tr><tr><td align=center><span class=norm>'+ tip[a] + '</span></td></tr></table>'
}
setTimeout("tipWrite('randtip','',0)",15000);
}

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:

<body background="" bgcolor="#fffffc" text="#000003" link="#3c3c3c" alink="#3c3c3c" vlink="#3c3c3c" onLoad="tipWrite('randtip','',0);">

T.O.C.

A MouseOver Popup Message Area / Demo

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. Remember, a division can contain any HTML code; this one uses a buble graphic and text. 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.

You can create as many message layers as you want, each must have a unique ID, and you must create a shortcut variable for each ID name in script after the div definition in your code.

Here is the script to setup variables and functions to hide and show objects.

<script language="JavaScript1.2">
// <!-- Hide from old browsers
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
/* They can be used in place of hidden and visible because on occasion
Navigator has problems with the two */
var HIDDEN = (isNS) ? 'hide' : 'hidden';
var VISIBLE = (isNS) ? 'show' : 'visible';
// Functions
/* Show an object */
function showObject(object) {
object.visibility = VISIBLE;
}
/* Hide an object */
function hideObject(object) {
object.visibility = HIDDEN;
}
// -->
</script>

Define a layer(div) with an ID of demopop in the body of your page. Two things to notice in the style settings:

  • if you set the position to relative, then the popup will appear exactly where the div is defined in relationship to the rest of your code. Note that blank space will be set aside in your page for a relative popup.
    By contrast, an absolute position is set in relation to the page top and left sides and no blank space is set aside. An absolute positioned box will appear overtop of your page.
  • you will notice a z-index setting. This number determines the stacking order of the any visible layer; layer with z-index of '1' is just above the backround, z-index '2' layers will cover z-index '1' and backgrounds. Basically, the z-index number sets the position relative to the background and all other layers. Since I have only a few z-indexed layers, an z-index of '3' gaurantees this layer will not be covered when made visible.

<div id="demopop"
style="position:relative;visibility:hidden;z-index:3;">
<table border="0" width="200" height="125" background="bubble1.gif" cellspacing="0" cellpadding="0">
<tr><td align="center">This is a popup demo,<br>with a bubble background graphic!
</td>
</tr>
</table>
</div>

Remember: The variable has to be defined after the div is defined in your code, otherwise an error will occur and the popup will not work. Here is the setup for a popup window with an ID of demopop. Note that this script makes use of the isNS variable defined above to determine the correct style based on the browser used.

<script language="JavaScript1.2">
// <!-- Hide from old browsers
/* Create shortcut variables for different positioned elements */
var demopop = (isNS) ? document.demopop : document.all.demopop.style;
// -->
</script>

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 name="here" onMouseover="showObject(demopop);" onMouseout="hideObject(demopop);"><u>-Demopopup-</u></a>

Note that the anchor is a name label, but you can still use onMouseover and onMouseout parameters to activate functions. This allows the anchor to be clicked, but nothing happens. The <u> </u> tags simulate the underline look of an actual link.

T.O.C.

A Self-Closing MouseOver Popup Message Area / Demo

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

<a name="here" onMouseover="showObject(demopop2);" onMouseout="setTimeout('hideObject(demopop2);',5000);"><u>-Delayed Self-Closing Popup-</u></a>

This will display the box for approximately 5 seconds (5000 mil-seconds) after the mouse moves off the link, before hiding it. Here is the code for this popup:

<div id="demopop2" style="position:relative;visibility:hidden;z-index=3;">
<table align="center" border="1" bgcolor="#fffffc" cellpadding="4" cellspacing="0">
<tr><td align="center"><P> This is a demo for a popup message. The message will disappear<br> 5 seconds after the mouse moves off the link.<br><a href="#">Go to the top of the page</a>
</td></tr>
</table>
</div>

Remember: The variable has to be defined after the div is defined in your code, otherwise an error will occur and the popup will not work. Here is the setup for a popup window with an ID of demopop2. Note that this script makes use of the isNS variable defined above to determine the correct style based on the browser used.

<script language="JavaScript1.2">
// <!-- Hide from old browsers
/* Create shortcut variables for different positioned elements */
var demopop2 = (isNS) ? document.demopop2 : document.all.demopop2.style;
// -->
</script>

T.O.C.

 

   

 
For more information about objects, divisions, and layers look at my HTML+ page.

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!

 

1