Imitating Facebook Bottom Toolbar with a few lines of CSS and a couple of JS lines

I've been working on a project that's built on Elgg Social Networking engine. An Open-Source software. This project required us a Chat plugin that could be used by its members for private conversations. Good thing we found this Elggchat module from Elgg community which surely had saved us some time. And that's it. The only thing left for us to do was to modify it a bit to fit into our application. Of course we had to upgrade it's look-and-feel and tweak a little further.

Ok. So things work perfectly under my favorite web development browser, Firefox. Now it's time to check for consistencies with other browsers. Firstly, I run a test under IE6. Too bad, the chat toolbar looks kinda messed up. It's supposed to stay at the bottom of the window no matter where you position the scrollbar (I'm sure you're aware of Facebook's nifty toolbar that's placed at the bottom of its pages). The problem is, it's stuck in one location of the page. So when you move your scrollbar up and down, it remains right there like any other blocks.

I tried looking for solutions around the net. I know it's a problem common to IE6 browser. That CSS's Position:fixed property isn't supported at all. Anyway, it took me few hours though since i need to make sure that the solution i'm looking really works with my application. Fortunately, that leads me to Ryan's blog.

It's a great solution. It solved my need to dock the Chat toolbar perfectly at the bottom of the page similar to Facebook. The only thing I added to Ryan's solution was a short Javascript code which allows me to position the toolbar where it should be centered. With ryan's solution, if you keep the toolbar's width a hundred percent, meaning whatever the window's viewable width is, that's the same as the toolbar's, then the tendency is everytime the scrollbar appears, it overlaps on the scrollbar.

<script type="text/javascript">
$(window).resize(function(){
    $(".main_container").append('<div id="spacer"></div>');
    $("#elggchat_wrapper").css("width", $('#spacer').innerWidth());
    $('#spacer').remove();
});
</script>

Here's a reference to Ryan's Blog:

fixed-that-bar-at-the-bottom-like-facebook


...to be continued.