Advanced Search

Results 1 to 6 of 6

Thread: Alibris Toolbar

  1. #1
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Alibris Toolbar

    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
    Last edited by jscheuer1; 11-21-2012 at 01:57 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. IE Developer Toolbar - DOM?
    By jlizarraga in forum Computer hardware and software
    Replies: 0
    Last Post: 09-28-2009, 07:48 PM
  2. detect yahoo toolbar
    By joecool2005 in forum JavaScript
    Replies: 1
    Last Post: 03-09-2006, 03:05 PM
  3. Ie Toolbar
    By Briton in forum HTML
    Replies: 4
    Last Post: 12-06-2005, 07:14 PM
  4. IE Image Toolbar
    By cindirob in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-04-2005, 01:44 AM
  5. toolbar error
    By Freeman in forum JavaScript
    Replies: 1
    Last Post: 10-12-2005, 02:39 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •