Develop Reference

Make height of div container smaller when nested divs slide out

I'm trying to make the height div.container smaller whenever the divs inside of the div.container slide out on click, but the height of the div continues to stay the same height.
I also want the div that hasn't been clicked yet to slide into place of the div that has been clicked.
Here's my JSFiddle: https://jsfiddle.net/ispykenny/soysd2zu/
Any help would be very helpful! Thanks!
and here's the code.
<div class="container">
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
.container{
background-color:green;
}
.two{
width:300px;
margin-left:auto;
margin-right:auto;
cursor:pointer;
background:#666;
text-align:center;
padding:10px;
font-size:10px;
border:1px solid black;
position:relative;
}
.three{
width:300px;
margin-left:auto;
margin-right:auto;
cursor:pointer;
background:#666;
text-align:center;
padding:10px;
font-size:10px;
border:1px solid black;
position:relative;
}
$(document).ready(function(){
$('.two').click(function(){
$(this).animate({right:"1500px"},'5000');
});
$('.three').click(function(){
$(this).animate({left:"1500px"},'5000');
});
});

Seemed like you need to make a style 'display' of your clicked div to set 'none' after animation is completed. But in this way there will not be any animation of vanishing in that empty field.
$(document).ready(function(){
$('.two').click(function(){
$(this).animate({right:"1500px"},'5000', function() {
$(this).css("display", "none")
});
$('.three').click(function(){
$(this).animate({left:"1500px"},'5000', function() {
$(this).css("display", "none")
});
});

Use slideUp to move the remaining blocks smoothly.
$(document).ready(function () {
$('.two').click(function () {
$(this).animate({
right: "1500px"
}, '5000', function() { $(this).slideUp(); });
});
$('.three').click(function () {
$(this).animate({
left: "1500px"
}, '5000', function() { $(this).slideUp(); });
});
});
Updated JSFiddle

https://jsfiddle.net/mblenton/soysd2zu/3/
$(document).ready(function () {
$( '.two' ).click(function() {
$( this).animate({
right: "1500px"
}, 1000, function() {
$(this).remove();
});
});
$( '.three' ).click(function() {
$( this).animate({
left: "1500px"
}, 1000, function() {
$(this).remove();
});
});
});

Reverse animation on a second click

I have submenu elements that has on click, slide out then spread out to fill a space. On the second click I'd like the animation to reverse before sliding in, but my jquery knowledge isn't good enough to achieve this. Can anyone help please?
my js:
$('.box').click(function(){
var flag = $(this).data('flag');
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});
$(this).data('flag', !flag)
});
JSFiddle

The animations for an element run after the previous one has finished, so at the moment the left slides will always run and when that has finished, the vertical animation kicks in.
When flag is true, you want the vertical animation to run first. So you need to do the vertical animation first.
The other issue then is that you are not animating .tab2 in the vertical animation, so it starts shrinking too early and looks odd. You can get around this by animating it by 0px during the vertical animation, so it will wait until the correct time to shrink:
$('.box').click(function(){
var flag = $(this).data('flag');
if(flag) {
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$('.tab2').animate({top: '+=0px'});
}
$('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500);
if(!flag) {
$('.tab1').animate({top: '-=50px'});
$('.tab3').animate({top: '+=50px'});
}
$(this).data('flag', !flag)
});
.square{
margin-left:100px;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:transparent;
color:#fff;
text-align:center;
}
.tab4{
position:absolute;
right:10px;
top:50px;
width:70px;
height:40px;
background-color:grey;
}
.tab{
width:70px;
height:40px;
background-color:grey;
display:none;
}
.tab1{
position:absolute;
right:-70px;
top:50px;
}
.tab2{
position:absolute;
right:-70px;
top:50px;
}
.tab3{
position:absolute;
right:-70px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="square">
<div class="box">
<div class="tab4">CLICK</div>
<div class="tab1 tab"></div>
<div class="tab2 tab"></div>
<div class="tab3 tab"></div>
</div>
</div>

This is just an ordering problem. Try this out:
function slide(){
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
}
function expand(flag){
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}, 500);
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')}, 500);
}
$('.box').click(function(){
var flag = ($(this).data('flag')!=undefined)?$(this).data('flag'):true;
if(flag){
slide();
expand(flag);
}
else{
expand(flag);
setTimeout(slide, 500);
}
$(this).data('flag', !flag)
});

I have updated your Jsfiddle:
http://jsfiddle.net/VDesign/k52c9h12/5/
JS Code
$('.box').click(function(){
if($(this).hasClass('open'))
{
$('.tab1').animate({top: '-=50px'});
// add callback function to wait untill tab1 and 3 are back to 0
$('.tab3').animate({top: '+=50px'}, function() {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
});
$(this).removeClass('open');
} else {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$(this).addClass('open');
}
});

how to show sliding div alternately

Need some help on this please, I need to have the div close when a tab is open alternately, or one tab can be open and others will close automatically
Here is My fiddle I just got from someone
HTML:
<div class="siteMap">
<div class="mapButton"></div>
<div class="theMap" style="background:red;">content here</div>
</div>
<div class="siteMap" style="margin-top:70px;">
<div class="mapButton"></div>
<div class="theMap" style="background:blue;">content here</div>
</div>
JAVASCRIPT:
$('.mapButton').click(function() {
var mapPos = parseInt($(this).parent('.siteMap').css('left'), 10);
if (mapPos < 0) {
$(this).parent('.siteMap').animate({
left: '+=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
else {
$(this).parent('.siteMap').animate({
left: '-=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
CSS:
.siteMap {
width:200px;
position:fixed;
left:-200px;
top:0px;
display:block;
color:#FFF;
z-index:2;
opacity: 0.95;
}
.siteMap .mapButton {
display:block;
color:#333;
background-color:#ACACAC;
height:50px;
width:50px;
text-align:center;
position:absolute;
left: 200px;
cursor:pointer;
}
.siteMap .theMap {
width:100%;
height:100px;
background-color:#666;
position:relative;
}
Here is the fiddle

Try
$('.mapButton').click(function () {
var $siteMap = $(this).parent('.siteMap');
var mapPos = parseInt($siteMap.css('left'), 10);
if (mapPos < 0) {
$siteMap.animate({
left: '+=200'
}, 458, 'swing', function () {
// Animation complete.
});
} else {
$siteMap.animate({
left: '-=200'
}, 458, 'swing', function () {
// Animation complete.
});
}
$('.siteMap').not($siteMap).filter(function () {
return parseInt($(this).css('left'), 10) == 0
}).animate({
left: '-=200'
}, 458, 'swing', function () {
// Animation complete.
});
});
Demo: Fiddle

Jquery animation stuck on load

I have written a note app using Jquery but the container is stuck on load, how i can fix this bug ?
Demo : http://sallibert.com/apps/notes/notes.php
The html (simplified):
<div id="wrapper">
<div id="contentWrapper">
<div id="ntes_left_side">**Notes list and add one**</div>
<div id="ntes_right_side">**Note content and back**</div>
</div>
</div>
Js:
$(document).on('click','#ntesliste li', function(evt) {
$('#contentWrapper').animate({"left": "320px"}, "fast");
$('#zonote').focusout();
fns.textAreaPopulate(+$(this).data('id'),this);
});
$(document).on('click', '#retrlste', function() {
$('#contentWrapper').animate({"left": "0px"}, "fast");
});
$(document).on('click', '#compteurnte #ajouternote', function() {
$('#contentWrapper').animate({"left": "320px"}, "fast");
fns.addNewNote();
});
CSS:
#wrapper{
width:320px;
height:480px;
overflow:hidden;}
#contentWrapper{
width:640px;
height: 480px;
float:left;
position:relative;
}
#ntes_left_side, #ntes_right_side{
width:320px;
height: 480px;
position:absolute;
}
#ntes_right_side{
left:0px;
}
#ntes_right_side{
left:320px;
}

Jquery/javascript sliding content

I'm trying to reproduce this and it's not working:
http://www.templatemonster.com/demo/44543.html
Here is my result: http://webs-it.com/callstar/
What I want is to navigate through the menu like the example I posted. I'm kinda new to javascript and I didn't manage to make it work.
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#block1 {
float:left;
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#block2 {
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#logo {
margin:0 auto;
width:502px;
height:259px;
margin-top:144px;
}
</style>
</head>
<body>
<div id="continut">
<div id="header">
<div id="social">
<img src="images/social/facebook.png" name="facebook" alt="."> <img src="images/social/ytube.png" name="ytube" alt="."> <img src="images/social/en.png" name="en" alt="."> <img src="images/social/cz.png" name="cz" alt=".">
</div>
</div>
<div id="block1">test test</div>
<div id="block2">test test</div>
<div id="logo" >
<img src="images/logo/logo_homepg.png">
</div>
<div id="meniu">
<img src="images/meniu/about.png" id="go1" name="about" alt="."><img src="images/meniu/photo.png" name="foto" id="go2" alt="."><img src="images/meniu/video.png" id="go3" name="video" alt="."><img src="images/meniu/ref.png" name="ref" id="go4" alt="."><img src="images/meniu/contact.png" name="contact" id="go5" alt=".">
</div>
</div>
<div id="footer"></div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate({ margin: "100px 1558px" }, { queue: false, duration: 700 });
});
</script>
</body>

That was a fun challenge.
I created a similar effect for you here.
Check out the jsFiddle DEMO
P.S: All, HTML, CSS, and Javascript is new.
HTML
<div id="container">
<div id="content">
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
</div>
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
CSS
*{margin:0; padding:0; font-family: Helvetica}
#container{
width:100%;
height:600px;
overflow:hidden;
float:left;
background: url(http://webs-it.com/callstar/images/covers/electric_guitar2.jpg) center no-repeat;
}
p {
font-size:25px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color:#666;
margin-top:22%;
}
#content {
width:100%;
height:200px;
margin: 50px auto 0;
position:relative;
overflow:hidden;
}
#content > div {
display:block;
width:400px;
height:200px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;,
top:40px
}
#nav {
list-style:none;
display:table;
margin:0 auto;
position:relative;
}
#nav li {
display:table-cell;
align:cen
display:inline-block;
padding:20px
}
#nav a {color:#fff; text-decoration:none;}
JS
$(function() {
var content = $('#content'),
contentHeight = content.height(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.height(100);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide down animation once
if (count === 0) {
content.animate({'height': contentHeight }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
Let me know if you have any questions.