Extend div while shifting another in

Question

Right now I have a basic template created to allow me to switch to 4 different divs per frame

here is a site - try clicking your eyes, nose or forehead

as you can see the div in the frame but

now I want to add functionality to shift the center of the div when one of the divs moves (so that if the top div of the slides in the div on the screen slides down, and if the left div of the slides on the screen slides to the right, etc.)

how will this happen? I think this will greatly affect the revised background.

thanks everyone

Katie

Answer 1

What you need to do is completely place your div content within the fixed center of the div. This will allow you to navigate your div content in relation to the center of the page. I use css transitions to apply a slide effect. Thus, the sliding mode will only work in modern browsers, but it is great for legacy IE browsers.

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

You will obviously need to change this code to work with your page, but it should not be too difficult to do.

I sent the code below if the link to the violin looks 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 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); });​