Description: "Emphasize" and make particular content on your page stand out by keeping them always visible on the visitor's browser screen, using this script. The script uses CSS's "fixed" positioning to accomplish this in modern browsers, while for older browsers that don't support "fixed" (such as IE6), switches to "absolute" positioning to simulate the effect. But the script doesn't just keep an element fixated on the screen, it lets you manage their display frequency to make the whole affair sensible and user friendly. Here's what you can do with the script:

1. Keep an element always visible on the page relative to one of the four corners of the user's browser window.
2. The element can either be one that's physically defined on the page, or inside an external file and dynamically added to the page using Ajax.
3. The floating element can be set to disappear after x seconds.
4. Control how often (frequency) the floating element is shown at all each time the page loads. The current options are: randomly based on x percentage (1-100%), once per browser session, or once every x days.
5. Control the fade effect that's added when the element is shown and hidden, respectively.

Demos:

Directions:

Step 1: Insert the following code in the HEAD section of your page

Notice the code at the very top- a doctype declaration. Your page must contain one of the valid doctypes in order for this script to work properly. The code above references an external .js file and sample HTML file, which you can download below (right click/ select "Save As"):

• stayontop.js
• bc.htm

Step 2: Insert the below sample code into the BODY section of your page:

And there you have it. Read on for more detailed instructions.

Setup Information

A floating element can be defined in two ways, either inline on the page and given a unique ID attribute, ie:

<div id="examplediv" style="width:140px; border:1px solid gray; padding: 10px; background: lightyellow">

This DIV is static and shown 95% of the time the page loads. It's positioned relative to the lower left corner of the window. It disappears after 15 seconds.

</div>

Or inside an external htm file on the server (including the DIV container itself), such as: bc.htm

With the floating element defined, call alwaysOnTop.init() to make them static and appearing always on top. The below lists the available options that can be passed into alwaysOnTop.init().

Available Options for alwaysOnTop.init()

As you can see, only the very first setting (targetid) is required, with the others falling back to their default values if not defined.

If the floating element is defined inside an external file (ie: bc.htm), the "externalsource" setting must be defined. Inside the file, you should ensure the element carries an unique ID attribute, with the "targetid" setting set to point to that ID. Here's a sample alwaysOnTop.init() call for a floating element instance where the element is defined inside bc.htm:

alwaysOnTop.init({
 targetid: 'ajaxdiv',
 orientation: 2,
 position: [20, 100],
 hideafter: 10000,
 externalsource: 'bc.htm'
})

 Due to limitations with Ajax, the external file must reside on the same server as the page displaying it.

Closing a floating element manually

You can define links on your page that close a particular floating element. The code to call is:

alwaysOnTop.hidediv('elementid')

Where "elementid" is the ID of the floating element. For example:

<a href="javascript:alwaysOnTop.hidediv('ajaxt')">Hide Content</a>