FF1.5+ IE5+ Opr7+
Dock Content script
Note: Updated Aug 23rd, 06'. Script now Firefox 1.5+ compatible.
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:
Demo: The purple DIV on the right and image below are both set to "dock". The image will stop docking after 10 seconds.
Step 1: Add the below script to the <HEAD> section of your page:
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:
"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.