Alibris Toolbar

**Jessic4** · 11-21-2012, 01:16 PM

I've been trying unsuccessfully for hours to replicate the Alibris bottom toolbar: alibris.com/

Does anyone know of a reference guide to demonstrate through examples how it was done? I don't need the javascript close function if too difficult, but the css float bar. I've seen a few alternatives on dynamic drives scripts, but none are quite as simple clean looking.

Thank you for your support

**jscheuer1** · 11-21-2012, 03:48 PM

It's apparently original code, so cannot be fully revealed here in the forum due to our rules respecting others' copyright.

But basically it's a div position: fixed; bottom: 0; display: none; that's brought into view 2.4 seconds after the document is parsed via jQuery using:

Code:

$("#email-signup-bar").delay(2400).slideUp(1000).fadeIn(700);

on document.ready. It's hidden using:

Code:

$("#email-signup-bar").hide();

when you click the X button or the no thanks link. It also sets a 6 month cookie when hidden (that's with the X button, the cookie may last longer with the no thanks link). The cookie is checked to see if it's there before revealing it in the first place. There appears to be no way to get it back once you dismiss it unless you delete the cookie manually form your browser and refresh the page. It doesn't have to be like that, the person doing the site apparently chose not to have an easier way to bring it back.

There are other functions involved with processing the sign up form, and other styles as to width, height, background color, layout of the form within it, etc. There does seem to be some sort of gradient shadow along its top edge, either from a PNG image or css. That's the basic concept. If that's not enough for you to go on, when I get more time I may make up a simple demo for you.

It's very similar to:

http://www.dynamicdrive.com/dynamici...pdownpanel.htm

The biggest difference being that it comes from the top.

**vwphillips** · 11-21-2012, 04:43 PM

if you are referring to the side bar

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[*/
.slide {
  position:fixed;left:0px;top:200px;width:100%;height:50px;border:solid red 1px;
}

#slide {
  position:absolute;left:0px;top:0px;width:150px;height:50px;background-Color:#FFCC66;
}

.slidein {
  position:absolute;left:0px;top:0px;width:20px;height:50px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}

.slideout {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

/*]]>*/
</style>
</head>
<script type="text/javascript">
</script>
<body>
<div class="slide" >
 <div id="slide" >
  <div class="slidein" ></div><!-- handle -->
 </div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Simple Side Slider (21-November-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcSlider={

 init:function(o){
  var id=o.ID,ms=o.SlideDuration,obj=document.getElementById(id),p=obj.parentNode,h=obj.getElementsByTagName('DIV')[0],cls=h.className,out=o.SlideOut;
  o=zxcSlider['zxc'+id]={
   p:p,
   obj:obj,
   h:h,
   cls:[cls,cls+' '+o.OutClass],
   mm:[obj.offsetWidth,h.offsetWidth],
   ms:typeof(ms)=='number'?ms:1000,
   ud:true,
   now:p.offsetWidth-h.offsetWidth
  }
  p.style.visibility='hidden';
  p.style.width='100%';
  obj.style.visibility='visible';
  obj.style.left=o.now+'px';
  this.addevt(h,'mouseup','slide',id);
  this.addevt(window,'resize','resize',id);
  if (out!==false){
   this.slide(id);
  }
 },

 slide:function(id,ud,ms){
  var o=zxcSlider['zxc'+id],ud,t;
  if (o){
   ud=typeof(ud)=='boolean'?ud:o.ud;
   this.slider(o,o.now,o.p.offsetWidth-o.mm[ud?0:1],new Date(),ms||o.ms);
   o.ud=!ud;
   o.h.className=o.cls[o.ud?0:1];
  }
 },

 slider:function(o,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.obj.style.left=now+'px';
   o.now=now;
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.slider(o,f,t,srt,mS); },10);
  }
  else {
   o.obj.style.left=t+'px';
   o.now=t;
  }
 },

 resize:function(id){
  this.slide(id,false,100);
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
  }
 }

}

zxcSlider.init({
 ID:'slide',          // the unique ID name of the slide DIV.                           (string)
 OutClass:'slideout', //(optional) the slide out class modifier of the 'handle'.        (string, default = no class name change)
 SlideDuration:1000,  //(optional) the slide duration in milli seconds.                 (number, default = 1000)
 SlideOut:true        //(optional) false = the slide will not slide on initialization'. (boolean, default = true = the slide will slide on initialization)
});
/*]]>*/
</script>
</body>

</html>

**Jessic4** · 11-21-2012, 11:58 PM

Originally Posted by jscheuer1

It's apparently original code, so cannot be fully revealed here in the forum due to our rules respecting others' copyright.

But basically it's a div position: fixed; bottom: 0; display: none; that's brought into view 2.4 seconds after the document is parsed via jQuery using:

Code:

$("#email-signup-bar").delay(2400).slideUp(1000).fadeIn(700);

on document.ready. It's hidden using:

Code:

$("#email-signup-bar").hide();

when you click the X button or the no thanks link. It also sets a 6 month cookie when hidden (that's with the X button, the cookie may last longer with the no thanks link). The cookie is checked to see if it's there before revealing it in the first place. There appears to be no way to get it back once you dismiss it unless you delete the cookie manually form your browser and refresh the page. It doesn't have to be like that, the person doing the site apparently chose not to have an easier way to bring it back.

There are other functions involved with processing the sign up form, and other styles as to width, height, background color, layout of the form within it, etc. There does seem to be some sort of gradient shadow along its top edge, either from a PNG image or css. That's the basic concept. If that's not enough for you to go on, when I get more time I may make up a simple demo for you.

It's very similar to:

http://www.dynamicdrive.com/dynamici...pdownpanel.htm

The biggest difference being that it comes from the top.

Hi John,

That is all quite helpful. I've tried doing this before, using a small guide I found on http://www.wpbeginner.com/wp-tutoria...-in-wordpress/ . But it seems my theme is designed in such a way that when I try to implement and a bottom toolbar, it just doesnt appear, or it distorts the theme http://goo.gl/pN71z (currently down temporarily). I've found it hard implementing plugins like Wibiya toolbar and such for the same reason.

**Beverleyh** · 11-22-2012, 05:52 AM

If the Wordpress theme is limiting you from adding what should be straight forward CSS and HTML, maybe it would be a better idea to seek advice from dedicated Wordpress forums or the person who originally made the theme.

**jscheuer1** · 11-22-2012, 06:48 AM

Well, here's a bare bones demo without the cookies. I changed it a little so that it actually slides and fades, as was I believe the intent. Should work with virtually any page:

http://home.comcast.net/~jscheuer1/s...ssage/demo.htm

Code:

<!DOCTYPE html>
<html>
<head>
<title>Bottom Message - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color: #e6e6cc;
}
#bottombar {
	background-color: #369;
	color: white;
	font: bold 110% verdana, helvetica, arial, sans-serif;
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 70px;
	padding-top: 15px;
	text-align: center;
	width: 100%;
	box-shadow: 0px 0px 24px rgba(0,0,0,0.65);
}
#bottombar img.close {
	width: 20px;
	height: 20px;
	border-width: 0;
	vertical-align: bottom;
	cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $toolbar = $('#bottombar').appendTo('body'), oH = $toolbar.outerHeight();
	$toolbar.css({opacity: 0}).delay(2500).slideDown({duration: 700, step: function(){
		$toolbar.css({opacity: 0.97 * $toolbar.outerHeight() / oH});
	}});
	$('.close', $toolbar).click(function(){
		$toolbar.hide();
	});
});
</script>
</head>
<body>
<div id="bottombar">Some content here <img class="close" src="close-link.png" alt="close image" title="Close"></div>
</body>
</html>

If you need help adapting it to your page, when you get it back up, let me know.