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();
});
});
});
Related
I am trying to move a div to a certain position. The following piece of code works fine:
$('#image1').click(function() {
$('#div1').animate({
'marginTop' : "+=160px"
});
});
However, I would like to animate the div to its original position once the image1 is clicked again. Does anybody have an easy to use idea for this? Thanks
Another way:
function firstClick() {
$('#div1').animate({
'marginTop' : "380px"
});
$(this).one("click", secondClick);
}
function secondClick() {
$('#div1').animate({
'marginTop' : "0px"
});
$(this).one("click", firstClick);
}
$("#image1").one("click", firstClick);
#div1 {
width: 200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">image1</div>
<div id="div1"></div>
You can use a class with css transition for this. Example code -
HTML
<div class="main">
Hello
</div>
CSS
.main {
background: green;
width: 100px;
height:100px;
margin-top:0px;
transition: margin-top 1s;
}
.set_margin {
margin-top:100px;
}
jQuery
$('.main').on('click', function() {
$(this).toggleClass('set_margin'); // toggle class on click event
})
You can implement it like -
$('#image1').click(function() {
$('#div1').toggleClass('set_margin');
});
Fiddle
You can add class to #img! its clicked first time, and remove on the second time, using is as an indicator of dive being clicked.
Example:
$('#image1').click(function() {
if($('#image1').hasClass("clicked")){
$('#div1').animate({
'marginTop' : "-=160px"
});
$('#image1').removeClass("clicked");
}
else{
$('#image1').addClass("clicked");
$('#div1').animate({
'marginTop' : "-=160px"
});
}
});
One more way
var toggle = true;
$('#image1').click(function() {
if (toggle) {
$('#div1').animate({
'marginTop': "+=160px"
});
toggle = false;
} else {
$('#div1').animate({
'marginTop': "-=160px"
});
toggle = true;
}
});
#div1 {
height: 50px;
width: 50px;
background: black;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="image1">Toggle</button>
<div id="div1"></div>
Here and example with codepen live editor
var move = true
$('#image1').click(function() {
if (move) {
$('#div1').animate({
'margin-left': "+=160px"
}, move = false);
} else {
$('#div1').animate({
'margin-left': "0px"
}, move = true);
}
});
#image1 {
width:100px;
height:100px;
background:red;
cursor:pointer
}
#div1 {
width:100px;
height:100px;
background:green;
margin-left:0px;
}
<div id="image1">ClickMe</div>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By using toggleClass we can achieve this animation.
<style type="text/css">
.animation{
margin-top:160px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#image1').click(function(){
$('#div1').toggleClass("animation");
})
})
</script>
Here is JsFiddle link animate
I want to add two arrows to the sides of the "boxes" divs (below) to cycle through the 3 divs.
Working JSFiddle: https://jsfiddle.net/HBHcC/11/
Can someone help me with this?
HTML:
<div class="container">
<div class="boxes">
<div class="one box">
</div>
<div class="two box">
</div>
<div class="three box">
</div>
</div>
</div>
CSS:
.container{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.box {
display:inline-block;
float: left;
width: 100px;
height: 100px;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:blue;
}
.boxes{
width:400px;
}
JS:
$(document).ready(function(){
$('.box').on("click", function() {
// Is this the last div, or is there a next one?
if ($(this).next().length) {
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
}
});
});
After adding arrows to the div, here is a new fiddle that should get you started:
$('.rightarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
https://jsfiddle.net/tx2yg06w/1/
Updated w/arrows moved out of divs:
$(document).ready(function(){
var animSpeed = 200;
$('.rightarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
});
https://jsfiddle.net/b56r0d72/
Errata has given you a good solution. Just wire up his code to the arrows in the snippet below.
Run snippet to view:
<html>
<body>
<style type="text/css">
.leftarrow, .rightarrow {
font-size: 48px;
color: blue;
text-decoration: none;
}
.rightarrow {
color: red;
float: right;
}
.content {
width: 200px;
padding: 4px;
border: 1px gray solid;
}
.box {
height: 200px;
border: 1px green solid;
}
</style>
<div class="content">
<div>
◀
▶
</div>
<div class="box">slide</div>
</div>
</body>
</html>
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;
}
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.
I have a horizontally centered div #box1 that has margin: 5px auto that has to slide to the left and off the screen, while #box2 slides into the screen from the right, when the button .class is clicked on. I've seen how its done for absolutely positioned divs, now how do you do it if its not?
HTML Structure
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
Failed attempt
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({
left: '150%',
}, 'slow' );
});
Is this the effect you're looking for: jsFiddle example.
jQuery:
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({ left: '-500px' }, 'slow');
$("#box2").animate({ left: '0px' }, 'slow');
});
CSS:
#box1, #box2 {
margin: 5px auto;
border: 1px solid #999;
position:relative;
}
#box2 {
left:500px;
}
#container {
overflow:hidden;
}
HTML:
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
If you want to slide out a dive you could use jQuery UI hide methods
$(".button").click(function() {
$("#box1").hide('slide', {
direction: "left"
}, 2000);
});
and you can do the same to slide in
$("#box2").show('slide', {
direction: "left"
}, 1000)
Try
$(".button").click(function() {
$("#box1").animate({
marginLeft: '-150%',
}, 'slow' );
});
If you needed to, it wouldn't be difficult to absolutely position the element in the same spot it was before animation.
var elm = $("#box1");
var position = elm.position();
var cssObj = {
'position' : 'absolute',
'top' : position .top,
'left' : position.left
}
elm.css(cssObj);
This might work for you.
$(".button a").click(function() {
var $docWidth = $(window).width();
var $boxOffset = $('#box1').offset();
$("#box1").css('marginLeft', $boxOffset.left);
$("#box1").animate({
marginLeft: $docWidth
}, 'slow');
});
CSS:
#container: { overflow: hidden; }
http://jsfiddle.net/dZUXJ/