PDA

View Full Version : How to install Expandable Sticky Bar??



KageMao
10-03-2013, 11:17 AM
1) Script Title: Expandable Sticky Bar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/stickybar.htm

3) Describe problem: I am trying to install the expandable stickybar on my site, but cannot seem to understand how to add one in. I've tried everything, even going so far as to download the entire sample HTML page, content page etc. I can see it fine on the script's site, but even with the sample pages, I cannot see the bar. Should I go into the CSS and remove the hidden visibility line, then all I can see is a single red bar with whatever textual content was put inside the original HTML file - and still cannot see the external content. HELP! I am very very new to JQuery as a whole. I have written my own expandable bar before, but it was not working properly in any browser but FF and so I was hoping to use this one.

molendijk
10-03-2013, 01:23 PM
There seems to be something wrong in expstickybar.js. I tried it and got Error fetching Ajax content.

KageMao
10-03-2013, 01:50 PM
Ok... worked through it with a friend. It's a problem with AJAX and local files... I have XAMPP running on my system and setting up my files as localhost seems to have fixed the problems I was having \o/

vwphillips
10-03-2013, 03:35 PM
something simpler


<!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>