Bookmark to del.icio.us
FF1+ IE6+ Opera 9+
Stay on Top content script
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 "
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"):
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.
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">
Or inside an external htm file on the server (including the DIV container itself), such as: bc.htm
With the floating element defined, call
Available Options for
|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),
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).|
Defaults to [10, 30]
|Sets the position of the element offset from
its orientation. The syntax is
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.|
Defaults to 1
|Sets how often the floating element should
appear each time the page loads. There are two possible values:
Defaults to ''
|If set, causes the script to load the
contents contained inside the specified external file and use that as
the floating element. "
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 "
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 (
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:
position: [20, 100],
Due to limitations with Ajax, the external file must reside on the same server as the page displaying it.
You can define links on your page that close a particular floating element. The code to call is:
Where "elementid" is the ID of the floating element. For example: