Always On Top Popup - Tested in IE7.0, Netscape8.1, Opera9.02, Firefox1.5.0.7 and AOL Explorer1.2

This script opens a floating layer popup. This technique allows the user to work in the main window while still being able to view the popup. The popup window will hover at the same spot where it opens, even if the user scrolls down the page.

We have tested the code in IE7.0, Firefox1.5.0.7, Opera9.02, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy four (4) part copy and paste code that goes in both the <HEAD> (2 parts) and <BODY> sections of your document. It also makes use of a CSS section that goes into the <HEAD> section and an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Since this is a four (4) part copy and paste code, we will do each secion one at a time starting with the CSS section that goes in the <HEAD> section.

The CSS section of the code that you will get from the script site tells you:

"......Paste this code into your external CSS file or in the <style> section within the <HEAD> section of your HTML document......"

This is all well and good if you have a CSS <style> section in your document. If not, it is not a problem. You just need to add the opening and closing style tags into this section of code. If this is a little confusing, See below on where and howto:

The below is the style sheet (CSS) coding ( minus the opening and closing style tags ) that can be reconfigured. All this code does is define the colors and text position of the X (upper right corner) that is used to close the box itself.

td.top {
background-color: #000080;
text-align: right;
}

td.bottom {
background-color: #ffe38c;
padding: 15px;
}

The next step is to copy and paste a section of code into a notepad, save it as floatingLayer.js. This will be your external .js file that once you save as, you will need to upload it into your directory and then add a snipplet of code into the <HEAD> section to call the external floatingLayer.js file.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js* file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="floatingLayer.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

The next step is that of the <BODY> section. This you can paste anywhere within the body section you want the effect to appear.*. Keep in mind that if you place this effect at the bottom of the page, no one will see it (the form button to click) when the page first opens. They will have to scroll all the way to the bottom of the page to click the button. Then it will follow the page as you scroll up towards the top.

* For your Information: You can only have one of these effects per page. If you add more, the main one or <div id="layer1" will supercede all others and the text etc. in this box will be the same for all boxes.

<div id="layer1" style="position:absolute; left:20px; width:410px; height:10px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td class="top">
<a href="javascript:hideIt()" style="text-decoration: none"><font color="#ffffff"><b>X</b></font></a>
</td>
</tr>
<tr>
<td class="bottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.
<br><br>
[<em>You can close the layer by clicking the <strong>X</strong> at the top right of this layer.</em>]
</td>
</tr>
</table>
</font>
</div>

<form>
<input type="button" value="Open popup" onClick="showIt()">
</form>

T here are four (4) different sections to this part of the code so.....We will take each part at a time.

style="position:absolute; left:20px; -- This defines how many pixels the popup box is located away from the left side of the page
width:410px; -- This defines how wide the popup box is in pixels
height:10px; -- This defines the height in pixels of the top part of the popup box (where the X is located)
<table border="0" -- This defines the width of a border around the entire effect. Zero denotes no border and the higher the number the thicker in pixels is the border. We have our example set for 2"

The next part you "Must" leave in the code. You can reposition it but it must stay. This is the link that will close the popup.

The next part is where you will add your content. This can be text, images, links (be sure to have links open in a new window or the popup box will vanish as you click on the link). etc.

<td class="bottom">

This is where you will insert your content

</td>
</tr>

The last part of this section is the form button itself. The only reconfiguration you can really make is that of the wording on the button itself.

This pertains to the style sheet CSS section we discussed earlier in this tutorial. If you would prefer to have the CSS section called from an external file,this is not a problem. Just copy and paste the css section (No opening or closing tags) into a notepad, save as popUp.css, upload it into your directory and now add a snipplet of code into the <HEAD> section of your document to call this file. In all actuality, it is the very same way you would do an external.js file except the file extension is .css and the code to call this file is slightly different. See below:

Saved .css File

The above is how the file will appear once you have saved as. Click on it to see how the file appears in a notepad. You will notice the lack of opening and closing css tags.

Snipplet of Code for external .css file

<link rel="stylesheet" type="text/css" href="popUp.css">

You may have to change the above "relative"* path depending where you have uploaded your external .css file. We have ours in a css directory so.... ours would look like the below

<link rel="stylesheet" type="text/css" href="css/popUp.css">

* If you do not understand or need a little refresher on the difference between a "Relative and Absolute" path, grab the below link and you are there.
[ Relative vs. Absolute ]

If you would like to see thie effect with the use of an external .css file, grab the below link and you are there.
[ With External .CSS File ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]