WRITTEN BY

ntechi

VN:F [1.9.22_1171]
Rating: 3.9/5 (13 votes cast)

Demo

JQuery Slide Left Right | JQuery Toggle Left Right

Browser Support

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


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

JQuery


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

        });
    });
});

Demo :



JQuery Slide Left Right | JQuery Toggle Left Right, 3.9 out of 5 based on 13 ratings

Demo

  • http://www.pixelario.com.ar Bernardo Raskovsky

    Great!!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Demis

    very cool and simple..

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • sunny

    It helps a lot for me! Thank you!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Michael

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • http://www.sigididesign.com Vezu

    Nice, i like your approach to it.,

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • bedian

    wow , it is so surprise !

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Aditya

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • bombo

    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.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Robert

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • mukesh dutt

    thanks dude

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • camilord

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • https://facebook.com/ Huan Nguyen

    ok

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • linktoebook@yahoo.com

    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;
    ….}

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Suraj

    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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)