Dynamic Drive- Always on top content

Always on top content

Author: Dynamic Drive

Description: "Emphasize" and make particular content on your page stand out by keeping them always visible on the visitor's browser screen, with this advanced DHTML script! Anything (HTML code, JavaScript etc) that's placed inside the script's "content box" will be kept static on the screen, with the ability to drag and toggle on/off this box. Furthermore, thanks to IE 5's conditional comments technology, all other browsers will simply see nothing. Wow!

Demo: IE 5 users, you can't miss it.

Directions:

Step 1: Insert the below into the <head> section of your page:

Select All
 <style>  </style> <script language="JavaScript1.2">  </script> <![endif]-->

Step 2: Insert the following anywhere inside the <body> section of your page:

Select All

Step 3: Finally, you'll need a small image to be used as the toggle on/off button. You may use the one we created:

(Right click your mouse and choose save as)

Or, if you wish, create your own. Just save the image as "barbutton.gif", and upload it along with the rest of the page.

Configuring the script

We tried to make the script as easy and straightforward to configure and customize as possible, and it is. The thing to understand are these:

1) The code in Step 1 controls the style of the static box (background color, border color, width, etc).

-To change the background color, change the keyword "lightyellow" to another color's name.
-To change the border color, change all instances of the keyword "green" to another color's name.
-Finally, to change the physical width of the static box, change "150px" to another valid value.

2) The code in Step 2 controls the rest (the actual content to be shown, where the static box will initially be positioned when the document loads).

-Insert any content (HTML, JavaScript) you wish to be shown inside <div id="scontentsub">. This is the content that will be kept static on the surfer's screen.
-To configure where the static box will initially be positioned when the document loads, change the variables "w" and "h" to contain valid values, where "w" controls the x coordinates, and "h" controls of y coordinates of the static box respectively.

Before you run along with this new DHTML toy, there's one more important thing to mention. While you're free to insert ANY HTML or JavaScript content into the static box, you may not insert HTML comments. By doing so, it will defeat the conditional comments feature of IE 5, and all browsers will see this content, although definitely not the way you want them to! Just remember- no HTML comments.

Enjoy the script!