Slider control

Slidercontrol for left/top/right/bottom bar

by Plippie Plop

HTML

<div id="left_bar">    
<div id="menu_expander_left" class="slide_left_close"><div id="ex_left"> Close </div></div>     
    <div class="bar_content"> 
        BLA BLA BLA
    </div>
</div>

CSS

#left_bar{
position:absolute;
display:block;
overflow:hidden;
left:0px;
top:0px;
z-index:2000;
height:100%;
padding-right:20px;
}

#menu_expander_left{
position:absolute;
display:block;
right:0px;
width:20px;
height:100%;
}

#ex_left{
position:absolute;
display:block;
width:20px;
height:110px;
top:43%;
cursor:pointer;
}

#left_bar .bar_content{
position:relative;
height:100%;
background-color:#EFEFEF;
width:100px;
border-right:2px solid #7a7a7a;
overflow:hidden;
}

JavaScript

function SliderControl(ToggleIO, SliderPos, SliderExp, SliderTime, e){        
    
    var $Element= $("#"+SliderPos+"_bar .inhoud");
    var cMargin= "margin-"+SliderPos;
    var cOpencls= "slide_"+SliderPos+"_open";
    var cClosecls= "slide_"+SliderPos+"_close";
    
    if(!ToggleIO){      $Element.stop().animate({cMargin:SliderExp+'px'},SliderTime);
        e.parent().removeClass(cClosecls).addClass(cOpencls);
    }else{
        $Element.stop().animate({cMargin:"0px"},SliderTime);
        e.parent().removeClass(cOpencls).addClass(cClosecls);
    }

}





$("#ex_left").die().live('click',function() {    
    var toggled=$(this).data('toggled');
    $(this).data('toggled', !toggled);    
    
    // parse to slider control
    SliderControl(toggled, "left", -100, 200, $(this));

/*

    $(this).data('toggled', !toggled);        
        
    
            if (!toggled) {
            
                    $("#left_bar .inhoud").stop().animate({marginLeft:'-380px'}, 200);
                    $(this).parent().removeClass("slide_left_close").addClass("slide_left_open");
                }else{
                $("#left_bar .inhoud").stop().animate({marginLeft:'0px'}, 200);
                    $(this).parent().removeClass("slide_left_open").addClass("slide_left_close");
                }
                */
});