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 "
positioning to accomplish this in modern browsers, while for older browsers that
don't support "
fixed" (such as IE6), switches to "
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
- Keep an element always visible on the page relative to one of the four corners of the user's browser window.
- 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.
- The floating element can be set to disappear after x seconds.
- 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.
- Control the fade effect that's added when the element is shown and hidden, respectively.
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">
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.
Or inside an external htm file on the server (including the DIV container itself), such as: bc.htm
With the floating element defined, call
to make them static and appearing always on top. The below lists the available
options that can be passed into
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.
Closing a floating element manually
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: