Toggle function left to right

<html>

<div class=”pollSlider”>

Text Goes Here

</div> <!– close –>

<div id=”pollSlider-button”>Button</div>

</html>

<java>

$(document).ready(function(){

var slider_width = $(‘.pollSlider’).width();//get width automaticly

$(‘#pollSlider-button’).click(function() {

if($(this).css(“margin-right”) == slider_width+”px” && !$(this).is(‘:animated’)){

$(‘.pollSlider,#pollSlider-button’).animate({“margin-right”: ‘-=’+slider_width});} else {

if(!$(this).is(‘:animated’))//perevent double click to double margin

{

$(‘.pollSlider,#pollSlider-button’).animate({“margin-right”: ‘+=’+slider_width});

}

}

});

});

</java>

<css>

.pollSlider{position: fixed;height: 100%;background: #003471;width: 200px;right: 0px;margin-right: -200px; height: 700px; top: 100px;border: 1px solid #dcdcdc; }

#pollSlider-button{position:fixed;width:50px;right:0px; top:110px;margin-top:5px;background:#222;cursor:pointer;padding: 6px; text-align: center;border:1px solid #dcdcdc;border-right: none;display:inline-block;color:#fff;font-family:arial;

font-size:22px; font-weight:bold;font-style:normal;height:50px;text-decoration:none;}

</css>

Fiddle example

http://jsfiddle.net/Ammad/UXgh6/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s