Push div out when sliding another in

Question

Right now I have a basic template built to allow me to toggle sliding 4 different divs into a frame

here is the site - try clicking the eyes, nose, or forehead

as you can see a div slides into the frame but,

now I want to add the functionality to slide the center div out when one of the div's slide in (so if the top div slides in the div on the screen will slide down and if the left div slides in the screen will slide right, etc)

any way to make this happen? I think it would have a great effect with the transitioned background

thanks everyone

katie

Answer 1

What you need to do is absolutely position your content div within a fixed center div. This will allow you to move around your content div, relative to the center of the page. I am using css-transitions to apply the slide effect. So the sliding will only work in modern browsers, but it degrades nicely to outdated IE browsers.

Here's the fiddle with a working demo: http://jsfiddle.net/WVPDH/263/

You will obviously need to modify this code some to work with your page, but it shouldn't be all too difficult to do so.

I've posted the code below in case the fiddle link goes sour:

HTML:

<div id="fullContainer">
    <div id="right">

    </div>
    <div id="left">

    </div>
    <div id="top">

    </div>
    <div id="bottom">

    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            This is where your face should go.  Notice that I placed it within a centering div.  
            This will enable the face to be absolutely positioned, and allow for you to modify 
            it's position when the side-bars slide in.
            <div data-move="left">Open Left</div>
            <div data-move="right">Open Right</div>
            <div data-move="top">Open Top</div>
            <div data-move="bottom">Open Bottom</div>
        </div>
    </div>
</div>

CSS:

#centerContainer {
    position:fixed;
    top:50%;
    left:50%;
    width:0;
    height:0;
}
#relativeContainer {
    position:relative;
}
#fullContainer {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#content {
    position:absolute;
    width:300px;
    height:400px;
    top:-200px;
    left:-150px;
    background:#BADA55;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content.right {
    left:-250px;
}
#content.left {
    left:-50px;
}
#content.bottom {
    top:-300px;
}
#content.top {
    top:-100px;
}

#content div {
    cursor:pointer;
    color:blue;
    text-decoration:underline;
    margin-top:15px;
    text-align:center;
}
#left {
    position:absolute;
    top:0;
    left:-125px;
    height:100%;
    width:100px;
    background:blue;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left.opened {
    left:0;
}

#right {
    position:absolute;
    top:0;
    right:-125px;
    height:100%;
    width:100px;
    background:green;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#right.opened {
    right:0;
}

#top {
    position:absolute;
    left:0;
    top:-125px;
    width:100%;
    height:100px;
    background:yellow;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#top.opened {
    top:0;
}

#bottom {
    position:absolute;
    left:0;
    bottom:-125px;
    width:100%;
    height:100px;
    background:red;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom.opened {
    bottom:0;
}

JS:

function SlideOut(element){

    $(".opened").removeClass("opened");
    $("#"+element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function(){

    var move = $(this).data('move');

    SlideOut(move);

});
​