Dock Content

This script is a script that will display a dock box that appears on the top right corner that will bring the information, text, images, and others who will appear on without stopping.

Dock Content is useful if you want to know the information to someone. Or you want to put your ad code in the Dock this Content. That will multiply your ad clicks. This is a free blog tips, blog trick, blog hack, and blog scripts.

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.

The Demo, you can click here.

First, add the below css (Casading Style Sheet) to your blog :

.dockclass{
position:relative;
}

Then copy and paste the code below under ]]></b:skin>

&lt;script type=&quot;text/javascript&quot;&gt;

/***********************************************
* Dock Content script- Created by and &Acirc;&copy; Dynamicdrive.com
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full script
* Publish for Blogger by http://blogspot-scripts.blogspot.com
***********************************************/

var offsetfromedge=0 //offset from window edge when content is &quot;docked&quot;. Change if desired.
var dockarray=new Array() //array to cache dockit instances
var dkclear=new Array() //array to cache corresponding clearinterval pointers

function dockit(el, duration){
this.source=document.all? document.all[el] : document.getElementById(el);
this.source.height=this.source.offsetHeight;
this.docheight=truebody().clientHeight;
this.duration=duration;
this.pagetop=0;
this.elementoffset=this.getOffsetY();
dockarray[dockarray.length]=this;
var pointer=eval(dockarray.length-1);
var dynexpress='dkclear['+pointer+']=setInterval(&quot;dockornot(dockarray['+pointer+'])&quot;,100);';
dynexpress=(this.duration&gt;0)? dynexpress+'setTimeout(&quot;clearInterval(dkclear['+pointer+']); dockarray['+pointer+'].source.style.top=0&quot;, duration*1000)' : dynexpress;
eval(dynexpress);
}

dockit.prototype.getOffsetY=function(){
var totaloffset=parseInt(this.source.offsetTop);
var parentEl=this.source.offsetParent;
while (parentEl!=null){
totaloffset+=parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function dockornot(obj){
obj.pagetop=truebody().scrollTop;
if (obj.pagetop&gt;obj.elementoffset) //detect upper offset
obj.source.style.top=obj.pagetop-obj.elementoffset+offsetfromedge+&quot;px&quot;;
else if (obj.pagetop+obj.docheight&lt;obj.elementoffset+parseInt(obj.source.height)) //lower offset
obj.source.style.top=obj.pagetop+obj.docheight-obj.source.height-obj.elementoffset-offsetfromedge+&quot;px&quot;;
else
obj.source.style.top=0;
}

function truebody(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}

&lt;/script&gt;

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 tag:

<script type="text/javascript">

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

</script>

Don't forget ! Before you use the scripts (not css) you must encode it !