CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3158473
user3158473

Reputation: 51

Slide a div in from off screen and then back on toggle

I am trying to move a div in from off screen and then back on toggle

$('a.show').on('click',function() {
if($('#left-navi-designers').css('left')=='0px'){
    $('#left-navi-designers').animate({left: '-100%'}, 1000);        
}else{
    $('#left-navi-designers').animate({left:0}, 1000); 
}
});

That is what i have for the JavaScript. I have this for my CSS:

#left-navi-designers {
height: 100%;
position: fixed;
background: #fff;
width: 100%;
left: -100%;
 }

This is my HTML:

<div id="left-icons"><a class="show" style="color:#999;">DUH!</a></div>
<div id="left-navi-designers">
 <div id="topNavigation">
<ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>
<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>
<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>
<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>
<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>
<a href="#box1" class="button"><li>MEDIA KIT</li></a>
<a href="#box1" class="button"><li>BEAUTY</li></a>
<a href="#box1" class="button"><li>BRANDS</li></a>
<a href="#box1" class="button"><li>MODELS</li></a>
<a href="#box1" class="button"><li>PARTIES</li></a>
 </ul></div>

I'm very new to this and am just trying to get some things figured out. Here is the site i am playing on http://keithfrenchdesigns.com/RunwayMag/designers_main.html

Thanks in advance!

Upvotes: 5

Views: 21666

Answers (4)

kasper Taeymans
kasper Taeymans

Reputation: 7026

you also can toggle your div with a css transition. This is more quick because you only have to toggle a class. See my example jsfiddle to see what I mean.

http://jsfiddle.net/8Wkgf/1/

jquery

$('button').on('click', function(){
    $('#slider').toggleClass('open');

})

css

#slider{
    background:blue;
    height:100px;
    width:500px;
    position:relative;
    left:-520px;  
}
.open{
    left:0px !important;
}
.transition{

  -webkit-transition: left 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: left 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: left 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: left 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}

html

<button>slide</button>
<div id="slider" class="transition"></div>

Upvotes: 5

Irvin Dominin
Irvin Dominin

Reputation: 30993

Your code works and I see you have included jQuery UI, so instead using animate and negative left, you can use visibility and toggle with animation:

Display or hide the matched elements.

Code:

$('a.show').on('click', function () {
    $('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});

Demo: http://jsfiddle.net/IrvinDominin/r7m3C/

Upvotes: 2

DaniP
DaniP

Reputation: 38252

I have tried your code like here http://jsfiddle.net/wm3c4/. And it works just fine the only problem I see is in your page you have this:

$('a.show').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

But there is no element with id="website". Try to change that selector to the one you post here.

Upvotes: 0

JiFus
JiFus

Reputation: 968

You can use this functions.

function SlideIn(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "10px";
}
function SlideOut(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "-200px";
}

// Use this buttons, for example.
<button onclick="SlideIn('box1')">Slide in</button>
<button onclick="SlideOut('box1')">Slide out</button>

<div id="box1">Put something in here</div>

This is just an example, try it at your own boxes.

Upvotes: 0

Related Questions