Vertical, sliding panel with auto-hide & pin

Last year, I was playing around with a vertical, sliding panel that appears and disappears automatically depending on the mouse pointer¹⁾. Sebastian Bohnen asked me whether it was possible to add a pin to the panel that would stop the auto-hide when pinned.

I replied with a rough sketch that I thought must have been quite incomprehensible but it didn't stop him from adding this feature. Here's the bare bones:

Of course, we need a pin. A picture of a pin would be nice but to keep it simple let's just use an empty <div> for now:

<div id="rightPanelPin"> </div>

Then we need to register a Javascript function to be triggered when the "pin" is clicked. So, we add

$('#rightPanelPin').click(rightPanelPin);

to the $(document).ready(function()).

The actual function rightPanelPin() toggles a variable and the content of the "pin" (should show a pinned pin or something when clicked).

var rightpanelpinned = false;
function rightPanelPin() {
    if (rightpanelpinned) {
        rightpanelpinned = false;
        $('#rightPanelPin').html(' ');
    } else {
        rightpanelpinned = true;
        $('#rightPanelPin').html('P');
    }
}                                                    

That's it. Now we can add && !rightpanelpinned to the collapsePanel() function to stop the auto-hide if the panel is pinned.

function collapsePanel() {
    if (rightpanel && !rightpanelpinned) {
(...)

I have updated the jsfiddle demo to include the pin feature

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

Sebastian currently has the panel with a pin live at

• http://e-ducation.net/technicalscience/

As of now, to show it: Click on 'Open', and 'toggle layout'. Then the vertical panel is on the left side.

• Vertical, sliding panel with auto-hide v2