Jul 3, 2012

JQuery Slide Left Right | JQuery Toggle Left Right

Recently I completed a project where I had to show a panel to the left side using JQuery, on mouse hover it comes out and on mouse leave it goes back. Its seems to be easy but to maintain the functionality is not that easy.

Here's a small snippet on how to do it.

HTML


[html]
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle">
<p>Facebook</p>
</div>

</div>
[/html]




JQuery


[js]
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});

jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {

jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);

});
});
});
[/js]



Demo :





14 comments :

  1. very cool and simple..

    ReplyDelete
  2. It helps a lot for me! Thank you!

    ReplyDelete
  3. looks very slick, but being new to jquery, can this be done without downloading plugins? Facebook like box?

    ReplyDelete
  4. Nice, i like your approach to it.,

    ReplyDelete
  5. wow , it is so surprise !

    ReplyDelete
  6. Really nice. How can we animate it using on click function.

    ReplyDelete
  7. Hi, nice work! When scrolling the page, the handle will stay in place but it will not function anymore. I therefore set the position of #sidePanel absolute, so it stys at top of the page.

    ReplyDelete
  8. Thanks for this tutorial, it has saved my day ;)!

    ReplyDelete
  9. mukesh dutt16/2/13 3:33 AM

    thanks dude

    ReplyDelete
  10. works fine with chrome and ff... but not working properly on IE.. :(

    ReplyDelete
  11. linktoebook@yahoo.com30/8/13 9:14 PM

    Hello. Thank you. Because the problem is not with Microsoft Internet Explorer Zero lines can be added.

    * html #sidePanel {
    position: absolute;}
    #panelHandle{
    background-color:#00F;
    ....}

    ReplyDelete
  12. please let me how to add the panel handle on right side of the screen with same functionality.. it will be great help from you

    ReplyDelete