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*/
}