[jQuery] Re: Slide out sidebars

[Jeffrey Kretz]

Try something like this:

div.toolbox{
  position:absolute;
  top:0px;
  right:0px;
  width:220px;
  height:99%;
  border-left:solid 1px #000000;
  overflow:hidden
  overflow-x:hidden;
  overflow-y:hidden;
}

Monitor the resize event.

window.lastWidth = $(window).bind('resize',adjustToolbox).width();

function adjustToolbox(e)
{
  var width = $(window).width();
  if (width<1024 && window.lastWidth>=1024)
  {
    $('div.toolbox')
        .animate({width:6})
      .hover(slideTool,unslideTool);
  }
  else if (width>=1024 && window.lastWidth<1024)
  {
    $('div.toolbox')
        .animate({width:220})
      .unbind('mouseenter')
      .unbind('mouseleave');
  }
  window.lastWidth = width;
}

function slideTool(e)
{
  $(this).animate({width:220});
}

function unslideTool(e)
{
  $(this).animate({width:6});
}

You can use the blockUI plugin to grey out the screen while the tool is out.

JK


-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Taco
Sent: Wednesday, November 05, 2008 3:38 PM
To: jQuery (English)
Subject: [jQuery] Slide out sidebars


I am attempting to design a site with a central liquid area, and two
side areas that provide auxiliary information. When the browser window
is made smaller and the viewport is reduced below 1024 px, I want
these side areas to slide into a minimized position showing different
xhtml files. when they are moused over, I'd like them to slide out to
their original size OVER the main area, and graying out the main area.

How would I get started? I am not a complete newbie at javascript, but
this will be my first experience with jQuery. Can someone point me in
the right direction? I appreciate it.

Ty Underwood