Todays Special: How is this done? Is there a jquery plugin or product to do it?

I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .

position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.

This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature

You can check out my version of this at uxspoke.com

I wrote a jQuery plugin to do it, and calling it is straightforward:

$('#about').pulloutPanel({open:true}).
    click(function() { $(this).trigger('toggle'); }) });

I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!

The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.

Here it is:

$.fn.pulloutPanel = function(options) {

    var settings = $.extend({}, {
      attachTo: 'bottom',
      css: {
        left: 0,
        minHeight: 390,
        border: '1px 1px 1px 0 solid #666',
        has: [roundedCorners('tr', 10),boxShadow([0,0], 10,   phaseToColor('requirements').saturate(-30).darken(50))],
        cursor: 'pointer'
    }, options);

    return $(this).each(function() {
        var $this = $(this);

        $this.addClass('pullout_panel');

        $this.bind('open', function(event) {
            $this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
                $this.removeClass('closed').addClass('opened');
                $this.trigger('opened');
            });
        });
        $this.bind('close', function(event) {
            var height = $this.innerHeight();
            $this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
                $this.addClass('closed').removeClass('opened');
                $this.trigger('closed');
            });
        });
        $this.bind('toggle', function(event) {
            $this.trigger($this.hasClass('opened') ? 'close' : 'open');
        });

        once(function() {
            Csster.style({
                '.pullout_panel': {
                    position: 'fixed',
                    bottom: 0,
                    has: [settings.css]
                }
            });
        });

        $this.trigger(settings.open ? 'open' : 'close');

    });
};