[ CLOSE ]

Friday, September 18, 2009

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 !


5 comments:

Laser Pointers said...

Controversies in issues like this are likely to arise but someone should take the step of placing it in the public for an open discussion and you did it. Thanks for that. http://www.laserpointersshop.com/

Mobile App Developers said...

I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.

Property Lawyer Delhi said...

you are really an amazing photographer. you have a skill to capture a moment which remain still for ever. I really appreciate your work..

GST Refunds Delhi said...

I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.

Birth Certificate Apostille said...

Amazing Blog. Thank you for sharing your valuable insights on this. Keep posting!

Post a Comment