I spent a good two hours figuring out how to do this and so I'm gleefully going to share it with you. Those of you with small monitors (or other strange habits) might have operating system dock (the thing at the bottom or top of the screen that you use to start programs, check the clock, and see what's running away with your CPU and network) set to "autohide."
If you've ever wanted to simulate that in your HTML, here's the bare-bones skeleton of a dock. Feel free to embellish it at your leisure.
My "dock" is just a pair of paragraphs contained within a DIV of set width and height. For my example, I chose 640 width, which assumes that most people have a screen bigger than that. The height of the DIV is 80 pixels-- 20 for the header, 60 for the body. The header will always be visible, the body only on mousover.
The CSS for the dock really controls most of it. By setting the style POSITION: FIXED, BOTTOM: 0, and HEIGHT: 20, I expose the header/handle, but not the body of the dock, and it gets nailed to the bottom of your viewport, independent of any scrolling.
The resize function repositions the dock in the middle of the screen. I bind this to the window's resize event so that the left position will always be recalculated after a window resize. I also call it manually on the document "ready" event. I attach mouseenter/mouseleave events to the dock (I love jQuery for porting mouseenter/mouseleave to Firefox & Safari so much this makes me want to take it back behind the middle school and get it pregnant). The use of animate is somewhat odd; javascript-controlled objects move last, after all the browser's native rendering has finished, but I thought it was cool. You could always just use a $.css() call instead.
So what's with the hide/fadeIn line? Ah, that's the trick. JQuery does not automatically provide visibility when using fadeIn/fadeOut; you have to do that yourself, so the hide() call gives the dock jQuery's notion of "hidden," then I unset the CSS hidden, and then use fadeIn(). I do this so the user does not see the dock as it's being drawn-- as it will initially be drawn off-center, and it make take the browser some time to get its act together and prepare to render the dock, especially if it's a particularly complex dock (the application I'm working on has a sliding display of draggable/droppable items in the dock, so yeah, that took a while to get set up). This gives the viewer a pleasant experience of seeing the dock fade in (quickly!) once it's completely ready to be rendered.
As always, the code has been de-fanged by Wordpress:
<html>
<head>
<title>Nail It Down</title>
<style>
#top {
width: 640px;
height: 200px;
background-color: antiquewhite;
border: 1px solid darkseagreen;
margin: 0 auto;
}
#dock {
bottom: 0;
background-color: rosybrown;
position: fixed;
overflow: hidden;
height: 20px;
width: 640px;
visibility: hidden;
}
#dock1 {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
height: 20px;
clear: both;
}
#dock2 {
color: white;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
height: 60px;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script src="jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function resize() {
var width = $(window.viewport).width();
if (width < 640) { width = 640; }
$('#dock').animate({'left': Math.floor((width -
($('#dock').outerWidth())) / 2)}, "fast");
}
resize();
$(window).bind('resize', function() {
resize();
});
$('#dock').hide().css('visibility', 'visible').fadeIn("fast");
$('#dock').bind('mouseenter', function() {
$('#dock').animate({"height": "80px"},"fast");
});
$('#dock').bind('mouseleave', function() {
$('#dock').animate({"height": "20px"},"fast");
});
});
</script>
</head>
<body style="width: 100%">
<div id="top">
<p>This is a my test box</p>
</div>
<div id="dock">
<p id="dock1">This is my dock. It's pretty, no?</p>
<p id="dock2">This is the body of the dock. You should only see this
on mouseover</p>
</div>
</body>
</html>