FF1.5+ IE5+ Opr7+

Dock Content script v.20

Author: Dynamic Drive

June 4th, 08' (v2.0): Script rewritten for improved efficiency, Safari 3.x compatibility

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 6 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 giving it a unique ID, plus the CSS class "dockcontent" to position it relatively on the page:

<div id="mydiv" class="dockcontent">This DIV content is docked</div>

Docked image: <img src="test.gif" id="puppy" class="dockcontent" />

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

contentdocker.addcontent("mydiv")
contentdocker.addcontent("puppy", 5000)

contentdocker.start()

</script>
  • Call contentdocker.addcontent("containerid", opt_duration) for each content you wish to dock, where the first parameter is the ID of the content, and the second an optional parameter in milliseconds, that when defined, will cause the content to cease docking after the specified duration.

  • After all calls to contentdocker.addcontent(), call contentdocker.start() to begin the effect.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post