New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opera 9+

Stay on Top content script

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, 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: Developer's View

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

Select All

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"):

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

Select All

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()

Attribute Description
targetid

Required

 The ID of the element (ie: DIV) on the page you wish to keep stationary on the page. This setting must be defined.

If the element is defined inside an external HTML file (to be fetched via Ajax), targetid should be set to the ID of that element then.
orientation

Defaults to 2

 Sets the starting position of the element relative to one of the 4 corners of the browser window. Possible Integer values are 1 (upper left), 2 (upper right), 3 (lower left), or 4 (lower right).
position

Defaults to [10, 30]

 Sets the position of the element offset from its orientation. The syntax is [x, y], or the horizontal and vertical coordinates of the element.
hideafter

Defaults to 0

 Sets the duration the element stays visible before it automatically disappears (in milliseconds), such as 5000 for 5 seconds. A value of 0 disables the timer.
frequency

Defaults to 1

 Sets how often the floating element should appear each time the page loads. There are two possible values:
  • Decimal between 0 and 1: Such a value causes the element to appear randomly based on a percentage frequency, where 1=100%, 0.5=50%, 0.33=33%, and so on.
  • The keyword "session": This causes the element to be shown once per browser session.
  • The string "x days", where x is an integer that limits the display of the floating element to once every x days. For example: "2 days".
externalsource

Defaults to ''

 If set, causes the script to load the contents contained inside the specified external file and use that as the floating element. "externalsource" should be a valid path to the file relative to the page showing the element on your server (ie: "external.htm", "subdir/external.htm" etc).

The contents of the external file should be that of the floating element in its entirety, including the outermost container DIV. Make sure this DIV is given a unique ID attribute, with "targetid" above set to point to that ID.
fadeduration

Defaults [500, 500]

 Sets the fade in and out duration of the floating element, in milliseconds. A value of 0 for either two completely disables the fade effect.

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>