Dock Content script v.20
June 4th, 08' (v2.0): Script rewritten for improved efficiency, Safari 3.x compatibility
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.
Step 1: Add the below script to the <HEAD> section of your page:
Having done the above, designate a particular content on your page to be
docked by giving it a unique ID, plus the CSS class "
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:
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.start()to begin the effect.