DIVs dynamic position with jQuery - javascript

I'm working on a project to create a website in which I need 3 divs to appear/disapear when ticking some checkboxes (one per div). I made an exemple here : http://jsbin.com/okevuy/1/edit
My problem (quite complicated to explain) is that I want the first ticked DIV appears at the top (no matter which one is triggered first) and the next ticked DIV below the first. If the first is hidden by unticking the checkbox, the second one moves to the top, and the next ticked appears below, etc...
Can some one help in doing that and show me how to ?
Thanks a lot !

How this http://jsbin.com/okevuy/5/
example code
$('#red_div').animate({
'height': '50',
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'height': '0',
'opacity': '0',
'margin-left': '-80px'
}, 300);
});

try this
markup: Add a wrapper around the boxes
<div id="mianwrapper" >
<div id='red_div' class='divs'></div>
<div id='blue_div' class='divs'></div>
<div id='green_div' class='divs'></div>
</div>
script:
$(document).ready(function () {
$('#checkbox_red_div').click(function () {
if ($(this).is(':checked')){ checkPosition("red_div"); $('#red_div').show(10); $('#red_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px',
"display":"none"
}, 300 , function(){$('#red_div').fadeOut(100)});
});
$('#checkbox_blue_div').click(function () {
if ($(this).is(':checked')) { checkPosition("blue_div"); $('#blue_div').show(10); $('#blue_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300 )}
else $('#blue_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#blue_div').fadeOut(100)} );
});
$('#checkbox_green_div').click(function () {
checkPosition("green_div");
if ($(this).is(':checked')){ $('#green_div').show(10); $('#green_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#green_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#green_div').fadeOut(100)});
});
function checkPosition(getBox)
{
$("#"+getBox).appendTo("#mianwrapper");
}
});
Css:
Small change in css
#red_div{
border:solid 1px red;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#blue_div{
border:solid 1px blue;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#green_div{
border:solid 1px green;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}

I've edit your example: http://jsbin.com/okevuy/7/edit. Check it. What have been changed: "height: 50px" if div visible, height:0px otherwise.
Hope it will solve your issue.

It is still taking spaces since you are just moving them instead of hiding them. You can try hide/show the div when animate is complete:
if ($(this).is(':checked')) $('#red_div').show().animate({
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px'
}, 300, function(){ $(this).hide();});
});
http://jsfiddle.net/WqbH4/

Related

Changing the color of a box on click with JS

New to js and could use some help. I have been trying to change the color of the box after clicking the button blue. Can I just use js to change the box color or do I need some css magic?
$("#btn1").on("click", function() {
$("#box").animate({
height: "+=35px",
width: "+=35px"
}, "fast");
})
$("#btn2").on("click", function() {
$("box")({
backgroundColor: "blue"
});
})
$("#btn3").on("click", function() {
$("#box").fadeOut();
})
$("#btn4").on("click", function() {
$("#box").animate({
height: "150px",
width: "150px"
}, "fast");
$("#box").fadeIn(), "fast";
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div id="box" style="height:150px; width:150px; background-color:pink; margin:25px;"></div>
<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>
Your jquery function should be:
$("box").css({backgroundColor:"blue"});
http://api.jquery.com/css/
As Heretic Monkey hinted at missing code, as Guzz mentioned you are missing the method .css() and as Rafv mentioned, your selector is wrong is it should be $('#box'). I'll go one step further in the spirit of the code and animate the color change:
$("#box").animate().css({
backgroundColor: "blue"
}, 2500);
and more importantly add this to the CSS:
#box {
transition: background-color 2.5s ease-out
}
As a bonus, the reset function is rewritten so that the methods are chained and arranged so that each animation can be seen in reverse.
...
$("#box").fadeIn("fast").animate({
height: "150px",
width: "150px"
}, "fast").css({
backgroundColor: "pink"
}, 1500);
...
Demo
$("#btn1").on("click", function() {
$("#box").animate({
height: "+=35px",
width: "+=35px"
}, "fast");
});
$("#btn2").on("click", function() {
$("#box").animate().css({
backgroundColor: "blue"
}, 2500);
});
$("#btn3").on("click", function() {
$("#box").fadeOut();
});
$("#btn4").on("click", function() {
$("#box").fadeIn("fast").animate({
height: "150px",
width: "150px"
}, "fast").css({
backgroundColor: "pink"
}, 1500);
});
#box {
transition: background-color 2.5s ease-out
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div id="box" style="height:150px; width:150px; background-color:pink; margin:25px;"></div>
<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>
You missing # in box section and for non-multiple css, better use
$("#box").css("background-color", "blue");
css("propertyname","value");
More about this here.

move box from right to left continously using jquery

i want to move box right then left and again right left continously but it make only one cycle
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
any help ??
Yes, it works without any problem.
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
https://jsfiddle.net/n7u7q42d/
Probably you have loaded multiple libraries. Could you post errors please?
Your code already does what you are asking for:
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
But, you can also accomplish the same thing with much better performance if you use use CSS animations:
#foo {
background: red;
width: 100px;
height: 100px;
position: absolute;
left:0px; /* This is the property that will be animated */
animation:9s leftRight infinite; /* configure the animation */
}
#keyframes leftRight {
0% {
left:0;
}
50% {
left:calc(100% - 100px);
}
100% {
left:0;
}
}
<div id="foo"></div>

How to ask jquery to apply on one div when other div have the same class

The problem here is that when i hover the specific div, the jquery script applys on every div with the same class. I'd like the script works only on the hovered element even if other divs have the same class. I don't have css ID's in this to make it easier.
Here is my jQuery code :
jQuery(".enprod_grille .isotope-container").hover(function() {
// do this on hover
jQuery('.enprod_grille .post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
jQuery('.enprod_grille .post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
jQuery('.enprod_grille .entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
},function() {
// do this on hover out
jQuery('.enprod_grille .post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
jQuery('.enprod_grille .post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
jQuery('.enprod_grille .entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
});
Here is the link of the website, it appears in "En production" column on the bottom right : http://mwww.fr/fullhouse/?lang=fr
Target the current div using this like:
jQuery(".enprod_grille .isotope-container").hover(function() {
// do this on hover
jQuery(this).find('.post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
jQuery(this).find('.post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
jQuery(this).find('.entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
}, function() {
// do this on hover out
jQuery(this).find('.post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
jQuery(this).find('.post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
jQuery(this).find('.entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
});
Change your code to
jQuery(".enprod_grille .isotope-container").hover(
function() {
var cont=jQuery(this).closest('.enprod_grille');
// do this on hover
cont.find('.post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
cont.find('.post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
cont.find('.entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
}
,
function() {
var cont=jQuery(this).closest('.enprod_grille');
// do this on hover out
cont.find('.post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
cont.find('.post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
cont.find('.entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
}
Try:
$('.divname')[0]
$('.divname').get(0)
or of course:
$('.divname:first-child')
just try this example replace img background with image.
<!DOCTYPE html>
<html>
<head>
<title>Que</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.parent{
height: 100px;
width: 100px;
margin: 20px 20px 20px 20px;
}
.text{
position: absolute;
height: 100px;
width: 100px;
text-align: center;
opacity : 0;
}
.img{
position: absolute;
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="img"></div>
<div class="text"><span>a</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>b</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>c</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>d</span></div>
</div>
<script>
$('.text').on('mouseover', function(){
$(this).animate({
'margin-left' : -20,
'opacity' : 1,
},300);
$(this).closest('.parent').find('.img').animate({
'margin-left' : 40,
'opacity' : 0.2,
},300);
});
$('.text').on('mouseout', function(){
$('.text').animate({
'margin-left' : 0,
'opacity' : 0
},300);
$('.img').animate({
'margin-left' : 0,
'opacity' : 1
},300);
});
</script>
</body>
</html>

jQuery slideUp/Down fadeIn/Out Asymmetry

I am trying to alternate display between two containers on a page using fadeOut/fadeIn & slideUp/slideDown. I would like the transition from the first container to the second to look the same as the transition from the second to the first; they fade in/out respectively, the current container slides up and away, and the other slides up from below it, all simultaneously. The first button triggers the animation described, but when I use the second button to transition to the first element the first element suddenly pops into existence while fading in jerking the page down, the second fades out, but no slide occurs. Thanks for your help, and let me know if I can clarify for you!
var main = function () {
$('.button-1').click(function () {
$('.container-1').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.container-2').fadeIn({ duration: 1400, queue: false }).slideDown(1400);
});
$('.button-2').click(function () {
$('.container-2').stop(true, true).fadeOut({ duration: 1400, queue: true }).slideUp(1400);
$('.container-1').fadeIn({ duration: 1400, queue: false }).slideDown(1400);
});
$(document).ready(main);
you actually only need 1 button to do this if you animate the height and opacity with toggle. ive added it twice since your use case was for 2 buttons
js fiddle here
js
var main = function () {
$('.button-1').click(function () {
$('.container-1')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
$('.container-2')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
});
$('.button-2').click(function () {
$('.container-2')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
$('.container-1')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
});
}
$(document).ready(main);
html
<div class=container-1>container1</div>
<div class=container-2>container2</div>
<input type=button class=button-1 value=button1>
<input type=button class=button-2 value=button2>
css
.button-1 {
color: red;
}
.button-2 {
color: blue;
}
.container-1, .container-2 {
width: 100px;
height: 100px;
}
.container-1 {
background-color: green;
}
.container-2 {
display: none;
background-color: orange;
}
Not sure if this is what you want. But here is one way to switch between two containers with slide and fade at the same time:
HTML:
<input type="button" class="redclick" value="Red"></input>
<input type="button" class="blueclick" value="Blue"></input>
<div class="red"></div>
<div class="blue"></div>
CSS:
.red, .blue{
width:200px;
height:200px;
position: absolute;
}
.red{ background:red; }
.blue{ background:blue; }
Javascript:
$(function() {
$('.red').hide();
$('.blue').show();
$(".blueclick").click(function() {
if($('.red').css('opacity') == '1'){
$('.red').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.blue').slideDown({ duration: 1400, queue: false }).fadeIn(1400);
}
});
$(".redclick").click(function() {
if($('.blue').css('opacity') == '1'){
$('.blue').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.red').slideDown({ duration: 1400, queue: false }).fadeIn(1400);
}
});
});
JSFiddle Demo
Hope this helps.

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');
}
});

Categories

Resources