A Useful jQuery Popup Dock Menu

Written by Karl Binder on September 28, 2009

The following snippets of code is a useful jquery popup dock menu that sites at the bottom of your screen irrespective of page scrolling and has a popup section that can display a menu or other block to the user. We’re using this on a couple of social media sites and is good for something like Facebook’s chat window popup.

—————— IN DRUPAL PAGE.TPL.PHP ——————

<?php if ($dockleft || $dockmiddle || $dockright): ?> <div id="dockbottom"><div id="dockbottom-inner" class="clear-block"> <?php if ($dockleft): print '<div class="dockleft-block">'. $dockleft .'</div>'; endif;?> <?php if ($dockmiddle): print '<div class="dockmiddle-block">'. $dockmiddle .'</div>'; endif;?> <?php if ($dockright): print '<div class="dockright-block"><div id="chat">'. $dockright .'</div><div class="slider"><a href="#" class="toggleup">Chat with Me</a></div></div>'; endif;?> </div></div> <?php endif; ?>

—————— JAVASCRIPT ——————

<script type="text/javascript"> //toggle chat block on dockright bottom, assuming placed on .dockright-block $(".toggleup").click(function(){ $("#chat").slideToggle("slow"); $(this).toggleClass("toggledown"); return false; }); </script>

—————— STYLESHEET ——————

/* DOCK - bottom */ #dockbottom { bottom:0; position:fixed; clear:both; width:960px; border:1px solid #999; border-bottom:0; padding:2px 0 0; height:37px; background-color:#fff; z-index:11000; /*Allow layering*/ }

#dockbottom-inner { text-align:left; width:100%; height:32px; float:left; padding:5px 0 0; position:relative; overflow:visible;/*Make sure it doesnt crop the widget*/ background-color:#ccc; }

#dockbottom-inner .block-inner { padding:0 }

.dockleft-block { float:left; display:block; margin-right:20px; min-width:30%; width:auto!important }

.dockmiddle-block { float:left; display:block; margin-right:20px; min-width:30%; width:auto!important }

/*this is specific to chat/meebo/gtalk, etc.*/ .dockright-block { display:block; width:200px; position:absolute; right:10px; bottom:0; width:auto!important; overflow:visible }

/*reset default*/ .dockright-block .block { margin-bottom:0; padding-bottom:0; text-align:center }

#chat { width:175px; height:255px; position:relative; z-index:11002;/*value above #dockbottom-inner*/ display:none;/*hide the widget, let jquery play*/ padding-top:8px; background-color:#E8E9ED; border:1.5px solid #ADADAD; border-bottom:0 }

.slider { float:right; position:relative; z-index:11003;/*value above #chat*/ width:175px; height:25px; padding:5px 0 0; margin-bottom:5px; background-color:#E8E9ED; border:1.5px solid #ADADAD; border-top:0 }

.toggleup,.toggledown { text-align:center; display:block; line-height:22px; background-color:#E8E9ED;/*Match .slider*/ }