We Keep Coding

jQuery carousel slide animation

I am working on jQuery carousel. Here is my code:
// CAROUSEL
$('#left-arrow').click(previousSlide);
$('#right-arrow').click(nextSlide);
function nextSlide() {
var $currentSlide = $('#carousel .slide-image:first');
var width = $currentSlide.width();
var $lastSlide = $('#carousel .slide-image:last')
$currentSlide.animate({ 'margin-left': -width }, 1000, function() {
$currentSlide.remove().css({ 'margin-left': '0px' });
$lastSlide.after($currentSlide);
});
}
function previousSlide() {
var $currentSlide = $('#carousel .slide-image:first');
var width = $currentSlide.width();
var $last = $('#carousel .slide-image:last');
$last.remove().css({ 'margin-left': -width });
$currentSlide.before($last);
$last.animate({ 'margin-left': '0px' }, 1000);
}
/* CAROUSEL */
#slide1 {
background-color: red;
}
#slide2 {
background-color: blue;
}
#slide3 {
background-color: magenta;
}
#carousel {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100vw;
height: 75vh;
}
.slide-image {
width: 100vw;
height: 75vh;
background-position: center;
background-size: cover;
display: inline-block;
}
.arrow {
width: 2%;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#right-arrow {
right: 30px;
}
#left-arrow {
left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
<div class="arrow" id="left-arrow">L</div>
<div class="arrow" id="right-arrow">R</div>
<div class="slide-image" id="slide1">
</div>
<div class="slide-image" id="slide2">
</div>
<div class="slide-image" id="slide3">
</div>
</section>
The problem is that it is acting differently for left and right side. If you click left side multiple times, it will just move the slider number of times, according on the number of clicks at once. If you however click multiple times on the right side, it will always move only once. That is because the current slide is being pushed before the last slide and there is no slide yet. However I would like it to act the same as the left side so it should be able to move multiple times.
How could I achieve that behaviour?

Try stoping the current animation and move to next slide.
You can use a variable like nextAnimation to check if the animation is still playing.
// CAROUSEL
$('#left-arrow').click(previousSlide);
$('#right-arrow').click(nextSlide);
var nextAnimation = false;
function nextSlide() {
var $currentSlide = $('#carousel .slide-image:first');
var width = $currentSlide.width();
var $lastSlide = $('#carousel .slide-image:last');
if(nextAnimation) {
$currentSlide.stop();
$currentSlide.remove().css({ 'margin-left': '0px' });
$lastSlide.after($currentSlide);
$currentSlide = $('#carousel .slide-image:first');
width = $currentSlide.width();
$lastSlide = $('#carousel .slide-image:last');
}
nextAnimation = true;
$currentSlide.animate({ 'margin-left': -width }, 1000, function() {
$currentSlide.remove().css({ 'margin-left': '0px' });
$lastSlide.after($currentSlide);
nextAnimation = false;
});
}
function previousSlide() {
var $currentSlide = $('#carousel .slide-image:first');
var width = $currentSlide.width();
var $last = $('#carousel .slide-image:last');
$last.remove().css({ 'margin-left': -width });
$currentSlide.before($last);
$last.animate({ 'margin-left': '0px' }, 1000);
}
/* CAROUSEL */
#slide1 {
background-color: red;
}
#slide2 {
background-color: blue;
}
#slide3 {
background-color: magenta;
}
#carousel {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100vw;
height: 75vh;
}
.slide-image {
width: 100vw;
height: 75vh;
background-position: center;
background-size: cover;
display: inline-block;
}
.arrow {
width: 2%;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#right-arrow {
right: 30px;
}
#left-arrow {
left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
<div class="arrow" id="left-arrow">L</div>
<div class="arrow" id="right-arrow">R</div>
<div class="slide-image" id="slide1">1
</div>
<div class="slide-image" id="slide2">2
</div>
<div class="slide-image" id="slide3">3
</div>
</section>

slideshow troubleshooting with javascript

I am making a slideshow and am having some trouble with the javascript.
When I click right once it works all good and then if I hit left it works too but then if I click on right again it should just go to the next image but it skips it and goes to the following. Anyone knows the solution?
$('#droite').click(function() {
if (photo == 4) {} else {
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
photo++;
}
});
$('#gauche').click(function() {
if (photo == 1) {} else {
$('#plateau-gallerie').animate({
left: (-300 * (photo - 2)) + 'px'
}, 500);
photo--;
}
});
#gallerie {
width: 60vw;
height: 300px;
background-color: #a9a9a9;
border-radius: 10px;
border: 3px solid #999;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#plateau-gallerie {
width: 1780px;
float: left;
top: 50px;
position: absolute;
}
#gallerie img {
height: 200px;
margin: 0 0px 0 80px;
float: left;
}
.bouton {
position: absolute;
height: 100px;
width: 60px;
top: 100px;
background-color: #444;
opacity: 0.7;
cursor: pointer;
z-index: 99;
font-size: 3em;
}
.bouton:hover {
background-color: #222;
}
#gauche{
left:15px;
}
#droite{
right:15px;
}
<section id="gallerie">
<button class="bouton" id="gauche"><</button>
<section id="plateau-gallerie">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
</section>
<button class="bouton" id="droite">></button>
</section>
Anyone got an idea on why this is?

I have change the script, change the logic of slide left and right
Change the image width to 300px, and align it to center
#gallerie img {
height: 200px;
float: left;
width:300px;
text-align: center;
}
Here is the js fiddle https://jsfiddle.net/bqg2aheh/
$('#left').click(function() {
if (!(photo < 0)) {
photo--;
$('#plateau-gallerie').animate({
left: (-300 * (photo)) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
$('#right').click(function() {
if (!(photo > 5)) {
photo++;
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
please ignore the style

I am not able to reproduce the behavior you are describing. I've created a fiddle (fiddle id eozpp6vo) with your code and the gallery seems to be working as expected.

Toggle div in and out off screen

I am using the code below to toggle a div out of screen partially, and back in screen fully. This code tells how far "sidebar" is to move offscreen. But in my case this functionality has a problem, due to media queries applied to sidebar width. Therefore I need the code not to state how far over sidebar will move, but how much of sidebar will be left onscreen in pixels. The demo here (with the media queries).
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-55%'
});
}
});
});

Simple maths:
Say you want the side bar to have 40px left on the screen, and the rest hidden. So you want to move it left by (width - 40). I.e.
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: - ($("#sidebar").width() - 40)
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

Instead of setting negative left value in percentages, use the width of your element and set the left value according to the width of your element:
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
Check this snippet:
$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$("#sidebar").animate({
left: '0'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

SOLVED!!
SEE DEMO HERE
$(document).ready(function() {
$("#togglebutton").click(function() {
var $container = $('#myToggleDiv');
$container.toggleClass('hide');
});
});

Cannot get source of image

I am trying to get the source of an image to use in a bigger image and the problem is that it just says that it is undefined when it is not. Here is my code and I appreciate the help in advance.
edit
It appears the code works perfectly in the code snippet but not here when I open the index file ;(, I have no idea why this is happening... halp me! D:, also, when I inspect the element with my own index.html file, it says that the source is equal to undefined
var src = $('.button').attr('src');
$(document).ready(function() {
$('.button').click(function() {
$('.backdrop').animate({
'opacity': '.5'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.box, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + src + '">');
});
});
$(document).ready(function() {
$('.backdrop').click(function() {
close_box();
});
$('.close').click(function() {
close_box();
});
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
.backdrop {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box {
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close {
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.button {
border-radius: 30px;
height: 300px;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg">
<div class="backdrop"></div>
<div class="box">
</div>
</body>
</html>

You set the var src = $('.button').attr('src'); before DOM has loaded, and is therefore not defined.
Try moving it inside $(document).ready()
$(document).ready(function() {
var src = $('.button').attr('src');
...
});

Thanks to one of the comments, I figured it out, I just had to have the var inside of the document.ready function :D

how can I add animation time to css changes

Is it possible to add a duration of a css change so that when I change the left, top, width and height of a div this could be animated?
In the jQuery code I want to animate the duration of the css properties.
Thanks a lot if you could help me, Its appreciated!
My code
HTML:
<div id="slideshow">
<img class="image1" src="images/car1.jpg"></img>
<img class="image2" src="images/car2.jpg"></img>
<img class="image3" src="images/car3.jpg"></img>
<img class="image4" src="images/car4.jpg"></img>
<img class="image5" src="images/car5.jpg"></img>
</div>
CSS:
#slideshowshadow{
background: yellow;
border-radius: 100px;
width: 700px;
height: 500px;
position: absolute;
opacity: 0.2;
margin: 50px 50px;
box-shadow: 0px 0px 100px 15px yellow;
-moz-box-shadow: 0px 0px 100px 15px rgba yellow;
-webkit-box-shadow: 0px 0px 100px 15px yellow;
}
#slideshow{
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
#slideshow img{
color: white;
}
.image2, .image3, .image4, .image5{
position: absolute;
width: 300px;
height: 200px;
}
.image1{
position: absolute;
width: 350px;
height: 250px;
top: 175px;
left: 225px;
z-index: 2;
}
.image2{
top: 0px;
left: 250px;
z-index: 1;
}
.image3{
top: 200px;
left: 500px;
z-index: 1;
}
.image4{
top: 400px;
left: 250px;
z-index: 1;
}
.image5{
top: 200px;
left: 0px;
z-index: 1;
}
JQUERY (This is where the magic happens :p):
$(".image2").click(function(){
$(".image1").css("top", "0px");
$(".image1").css("left", "250px");
$(".image1").css("width", "300px");
$(".image1").css("height", "200px");
$(".image1").css("z-index", "1");
//middle
$(".image2").css("top", "175px");
$(".image2").css("left", "225px");
$(".image2").css("width", "350px");
$(".image2").css("height", "250px");
$(".image2").css("z-index", "2");
$(".image3").css("top", "200px");
$(".image3").css("left", "500px");
$(".image3").css("width", "300px");
$(".image3").css("height", "200px");
$(".image3").css("z-index", "1");
$(".image4").css("top", "400px");
$(".image4").css("left", "250px");
$(".image4").css("width", "300px");
$(".image4").css("height", "200px");
$(".image4").css("z-index", "1");
$(".image5").css("top", "200px");
$(".image5").css("left", "0px");
$(".image5").css("width", "300px");
$(".image5").css("height", "200px");
$(".image5").css("z-index", "1");
});

You should either use animate where 5000 is the time in milliseconds.
$( ".image5" ).animate({
opacity: 0.25,
left: "+=50",
height: "25px"
// css goes here, last one should not have comma
}, 5000, function() {
// Animation complete.
});
Or to use CSS animations, set the CSS transition time via jQuery:
var time = 5000
$('.image5').css({
'webkitTransition': 'all ' + time + 's ',
'mozTransition': 'all ' + time + 's ',
'msTransition': 'all ' + time + 's ',
'oTransition': 'all ' + time + 's ',
'transition': 'all ' + time + 's '
});

Perhaps you looking for:
transition-duration
see: http://css-tricks.com/almanac/properties/t/transition-duration/ for further details