Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#stickybar{
position:fixed;
color: white;
padding: 5px;
left:0px;
bottom:-125px;
background: #e43a3d;
z-index: 10000;
font-weight:bold;
width:100%;
height:150px
}
#stickybar .button {
border-width:0; float:right;margin-Right:10px;cursor:pointer
}
/*]]>*/
</style>
</head>
<body>
<div id="stickybar" >
<div class="open" ></div>
<img class="button" id="stickybaropen" src="http://www.dynamicdrive.com/dynamicindex17/open.gif" />
<img class="button" id="stickybarclose" src="http://www.dynamicdrive.com/dynamicindex17/close.gif" />
<div style="text-align:center;padding-top:3px"><b>Copyright (c) 2010 Dynamic Drive</a></div>
More content here
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcStickyBar={
init:function(o){
var id=o.ID,p=o.Position,t=o.RevealType,r=o.PeekAmount,ms=o.Animate,s=document.getElementById(id);
if (s){
o.sz=-s.offsetHeight
r=o.sz+(typeof(r)=='number'&&r>10?r:-o.sz/4);
o.ud=o.StartOpen===true;
o.s=[s,typeof(p)=='string'&&p.charAt(0).toUpperCase()=='B'?'bottom':'top',r,o.ud?0:r];
o.ms=typeof(ms)=='number'&&ms>20?ms:100;
o.open=document.getElementById(id+'open');
o.close=document.getElementById(id+'close');
s.style[o.s[1]]=o.s[3]+'px';
o.t=t!='mouseover';
if (t=='mouseover'){
this.addevt(s,t,'slide',o,true)//:this.addevt(s,'mouseup','slide',o);
this.addevt(s,'mouseout','slide',o,false);
}
else {
this.addevt(o.open&&o.close?o.open:s,'mouseup','slide',o);
this.addevt(o.open&&o.close?o.close:s,'mouseup','slide',o);
}
o.close?o.close.style.display='none':null;
}
},
slide:function(o,ud){
o.t?ud=!o.ud:null;
o.ud=ud
this.animate(o,o.s,o.s[3],o.ud?0:o.s[2],new Date(),o.ms);
o.open?o.open.style.display=ud?'none':'inline':null
o.close?o.close.style.display=ud?'inline':'none':null
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=n;
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
// initialise after the sticky bar DIV has loaded
zxcStickyBar.init({
ID: "stickybar", // the unique ID name of sticky bar DIV. (string)
Position:'bottom', //(optional) the sticky bar position, 'top' or 'bottom'. (string, default = 'top')
RevealType:'mouseover', //(optional) the acivating event type, 'mouseover' or image 'mouseup' (string, default = image 'mouseup')
PeekAmount:35, //(optional) number of pixels to reveal when sticky bar is closed. (number, default = sticky bar height/4)
Animate:200, //(optional) duration of animation (in millisecs) (number, default = 500)
StartOpen:false //(optional) true = the stickey bar starts open. (boolean, default = false = starts at PeekAmount)
});
/*]]>*/
</script>
</body>
</html>
How to install Expandable Sticky Bar??
Reply With Quote
Bookmarks