New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1.5+ IE5+ Opr7+

Dock Content script

Author: Dynamic Drive

Note: Updated Aug 23rd, 06'. Script now Firefox 1.5+ compatible.

This is an ordinary DIV, made always visible on the user's screen by our Dock Content script. Note that "docking" only takes place when the DIV is scrolled outside the complete view of the visitor.

Description: This powerful script allows you to keep certain content on your page always visible, by "docking" it. The way the script works is by detecting if the designated content is visible on the user's screen, and docking it (keeping it in view) only when it's not (including partially clipped). This is unlike most related scripts out there that merely keep an element in view indiscriminately. The docking duration is configurable (ie: 5 seconds), and the script works on multiple, arbitrary elements (ie: an image, a table, plus a div) on your page. After the specified time has expired, the element is returned to its original position one way or the other.

As you can imagine, this is a great way to seamlessly yet effectively give select content on your page the spotlight, by temporarily (or permanently) maintaining its visibility on the user's screen. Examples of usage are:

  • Docking a navigational menu permanently.

  • Docking an image ad for 5 seconds.

  • Docking an important announcement for 10 seconds.

Demo: The purple DIV on the right and image below are both set to "dock". The image will stop docking after 10 seconds.


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Step 2: Having done the above, designate a particular content on your page to be docked by adding inside its tag the code in red:

<div id="dockcontent0" class="dockclass">This DIV content is docked</div>

Docked image: <img src="test.gif" id="dockcontent1" class="dockclass" />

where "dockcontent0" is an arbitrary but unique name, and should differ for each additional content you dock (as shown in the image that follows).

Step 3: Finally, you now need to jumpstart the docking engine. To do so, add the below script to the END of your page, right above the </BODY> tag:

<script type="text/javascript">

var dock0=new dockit("dockcontent0", 0);
var dock1=new dockit("dockcontent1", 10);

</script>

"dock0" should be an arbitrary but unique variable. "Dockcontent0" obviously is the ID of the docked content specified earlier, and "0", the duration the content is to be docked, in seconds. A value of 0 means permanently, or always visible.

For your information

While this script can process multiple docked content, for the sake of efficiency, you should try to limit this number, such as to a maximum of 5, especially if they are all set to dock permanently. Depending on how deeply nested the content in question is within the page's source, it may require more processing resource.