Vertical, sliding panel with auto-hide v2

Soon after I wrote about Vertical, sliding panel with auto-hide I had the idea for a more robust version which also works with animations that change the width of the panel such as jQuery's .hide()¹⁾

So, for the fun of trying to figure out how it might work, here is a vertical panel, automatically sliding out of the right side, and disappearing upon a click or after the mouse pointer leaves the panel. Again, mouse movements are monitored by Brian Cherne's hoverIntent function which builds on the jQuery Javascript framework.

The main difference compared to my previous approach is that we basically use only 1 div (#rightPanel), but in order to avoid weird wrapping during animations we put all actual content of the panel into a second div (#rightPanelcontent) with a fixed width (see CSS).

<div id="rightPanel">
    <div id="rightPanelcontent">
        <h2>Right Panel</h2>
    </div>
</div>

#rightPanel{ border-left:1.3em solid white; width:0px; right:0; position:fixed; top:0px;
   height:100%; vertical-align:top; border-right:5px solid #800; color:black; 
   background-color:white; padding:0; overflow:hidden; }
 
#rightPanelcontent{ width:166px; padding: 2px; }
 
#rightPanel.expanded { border-left:1px solid #800; padding:5px; }

border-left:1.3em solid white; sets the width of the hot spot area which triggers the "opening" of the panel.

We need to include jQuery and hoverIntent()²⁾.

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript"
   src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>

And finally the Javascript to make things slide :-)

function collapsePanel() {
    if (rightpanel) {
        rightpanel = false;
        $('html').unbind('click');
        $('#rightPanel').animate({width: '0px'}, 666,
            function() {$('#rightPanel').toggleClass('expanded');}
        )
        $('#rightPanel').click(expandPanel);
    }
};
 
function expandPanel() {
    if (! (rightpanel)) {
        rightpanel = true;
        $('#rightPanel').unbind('click');
        $('#rightPanel').toggleClass('expanded');
        $('#rightPanel').animate({width: '180px'}, 666);
        $('html').click(collapsePanel);
    }
    return false;
};
 
var rightpanel = false;
 
$(document).ready(function() {
    /* expandPanel on click - good for mobile devices without mouse */
    $('#rightPanel').click(expandPanel);
    /* show+hide panel on mouse hover with intention */
    $('#rightPanel').hoverIntent({over: expandPanel,timeout: 700,out: collapsePanel});
});

• http://jsfiddle.net/HrSYH/5/

I quickly checked with the following browsers whether the panel works. Please note that the way the sliding mechanism is coded HTML form input fields (<input type="text"> etc.) are not supported/working because any click anywhere is supposed to hide the panel. Still, one might want to use <select> with a click-n-hold action. This works fine on major browsers.

• Firefox 3 & 5 on Windows and Ubuntu
• Google Chrome 12 & 13 on Windows and Ubuntu
• Internet Explorer 8 on Windows
• Arora 0.10.2 WebKit v532.4 on Ubuntu
• Opera Mobile 11.10 on Android 2.2

• Internet Explorer 7: <select> does not work
• Default Browser on Android 2.2: <select> does not work
• Dolphin Mini 2.1.1 on Android 2.2: <select> does not work
• Dolphin 6.1.0 on Android 2.2: <select> does not work

• Opera Mini 6.1.25577 on Android 2.2: Panel not opening on click

I am not a programmer and I am not a web designer. There is probably still quite some room for improvement. Besides, it's not fool-proof, nor does it work flawlessly.