V

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()1)

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.

HTML

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>

CSS

#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.

Javascript

We need to include jQuery and hoverIntent()2).

<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});
});

Demo

Browser support

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.

Working reasonably well

  • 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

Working somewhat OK

  • 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

Not working at all

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

Disclaimer

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.

1)
Though, to use .show()/.hide() or other effects one probably would have to rewrite parts of the code I am presenting here.
2)
I am not sure if Brian Cherne appreciates hotlinking his code. I am showing it here in this way only to keep things simple. Please use cautiously.

Discussion

lcwong, 2014-08-04 10:52

thanks for your cool stuff

Andreas Schamanek, 2014-10-23 19:41

More recent versions of Firefox apparently changed the behavior when a <select> is clicked. A quick and dirty workaround is to include something like

$("#myselect").click(function(e){e.stopPropagation();});
Enter your comment. Wiki syntax is allowed:
X J P L Y
 
 
blog/110804_vertical_sliding_panel_v2.txt · Last modified: 2011-10-22 10:55 by andreas