I'm trying to learn jQuery and I have this case, I have 3 slides, each slide has some boxes and I want to display them one by one by adding the class .show.
The thing should work like this:
show boxes on the first slide one by one
after all are showed, i want to wait 1 second and do the same for the second
repeat, but after show I want to show first slide again.
$('.slide').each(function() {
var $childrens = $(this).children();
$childrens.each(function() {
$this.addClass('show');
});
});
Can someone explain me how to do this?
Here is what I tried.
http://jsbin.com/jigoku/22/edit?html,css,js,output
I used recursion in a few places here to facilitate the delay in showing the slides. Your code is solid but it runs near-instantly so I don't think you get the effect you are going for.
showSlideItems is responsible for adding the show to each child of the slides. It waits 200ms and displays the next child.
slideDelay takes all slides and goes through them, adding a 1 second wait after all children of one slide is shown.
showSlides is responsible for grabbing all our slides and resetting their children so we can loop after both of the above functions complete.
jsFiddle example
javascript
function showSlides(){
var slides = $('.slide');
$('.slide i').removeClass('show');
slideDelay(slides.toArray());
}
function slideDelay(slides) {
var slide = slides.shift();
showSlideItems($(slide).children().toArray(), function(){
setTimeout(function(){
if(slides.length > 0){
slideDelay(slides);
}else{
showSlides();
}
}, 1000);
});
}
function showSlideItems(slideItems, callback) {
if(slideItems.length === 0) {
callback();
return;
}
var slideItem = slideItems.shift();
$(slideItem).addClass('show');
setTimeout(function(){ showSlideItems(slideItems, callback) }, 200);
}
showSlides();
html
<div class="slide">
<i>one</i>
<i>two</i>
<i>three</i>
</div>
<div class="slide slide-2">
<i>four</i>
<i>five</i>
<i>six</i>
<i>seven</i>
</div>
<div class="slide slide-3">
<i>eight</i>
<i>nine</i>
<i>ten</i>
</div>
css
.slide{
margin-top: 20px;
}
.show {
display: block !important;
}
.slide i {
display: none;
}
Related
I managed to hide and show my classes when the user moves his mouse over the specific element. But what I would actually like is that these show when the user moves his mouse anywhere on the screen, not just the selected div's.
This is my current code:
$(window).on('mousemove', function () {
$('.barhide').addClass('show');
try {
clearTimeout(timer);
} catch (e) {}
timer = setTimeout(function () {
$('.barhide').removeClass('show');
}, 1000);
});
And my css:
.barhide {
background: #333;
color: #fff;
display: block;
opacity: 0;
transition: all 1.5s ease;
}
.barhide.show {
opacity: 1;
display: none;
}
So what I would like is that after 3 seconds, the classes with .barhide get hidden and if the user moves his mouse anywhere in screen, they show up again, instead of just when they move over the element.
Also I was wondering if it's not a lot easier to do these things with React?
I have restructured the code a bit and added some comments explaining what's happening and when. Also, lose the try since attempting to clear a timer will never throw an exception.
Keep in mind that mouseover type events are an issue on mobile devices. These two articles may help in that regard:
JQuery's Virtual Mouse Events
Simulated Mouse Events using JQuery
$(function(){
// When page loads, wait 3 seconds and hide all elements with .barhide class:
setTimeout(toggle, 3000);
});
var timer = null;
// General function for adding/removing the "hide" class.
// This is used when the page first loads and each time
// the mouse moves on the page. We're not calling toggle()
// here because a flicker effect can happen which would leave
// the elements showing instead of being hidden.
function toggle(){
$('.barhide').toggleClass('hide');
}
$(window).on('mousemove', function(){
// When anywhere on page is moused over bring back .barhide
// elements for 3 seconds. Removing "hide" simply restores
// the original CSS & layout
$('.barhide').removeClass('hide');
// Kill any previous timers
clearTimeout(timer);
// Wait 3 seconds and hide again
timer = setTimeout(toggle, 3000)
});
.barhide { background-color:blue; }
.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="barhide">ONE</div>
<div class="show">TWO</div>
You just count the nr of timers running and when the last finishes you hide the bar.
var count = 0;
$(window).mousemove(function( event ) {
$('.barhide').show();
count += 1;
setTimeout(function() {
if (count == 1) {
$('.barhide').hide();
}
count -= 1;
}, 3000);
});
I am trying to make an image carousel. I am using the jQuery .each() method to iterate over all the images in the div with class="slideshow".
HTML code
<div class="slideshow">
<img src="images/page-1-hero-image.jpg" alt="school's image" class="img-responsive page-one-pic mySlides">
<img src="images/Capture2.PNG" alt="school pic" class="img-responsive mySlides">
<img src="images/Capture.PNG" alt="school pic" class="img-responsive mySlides">
<img src="images/Capture3.PNG" alt="school pic" class="img-responsive mySlides">
</div>
CSS code
.mySlides {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 1;
/* to make pic responsive */
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
}
Javascript:
function carousel() {
$(".slideshow > img").each(function(index, element) {
$(element).fadeIn(1000).delay(2000);
setTimeout(carousel, 1000);
});
}
The function only fades in the first image and then stops. The other images are not displayed.
here is the link to the hosted project:
https://rimildeyjsr.github.io/St.Anthony-Website/
This code:
function carousel() {
$(".slideshow > img").each(function(index,element){
$(element).fadeIn(1000).delay(2000);
setTimeout(carousel,1000);
});
}
Says: "For each img element, spend a second fading in, then delay by two seconds before doing nothing, and reschedule this entire process (not per element, for all of them) to run again a second from now."
That doesn't make much sense, you'll be calling carousel several times again roughly at the time the first image finishes fading out.
Given the term "slideshow" I'd guess what you're trying to do is show each image for two seconds before spending a second having the next one fade in, looping when you get to the end. If so, you want to call carousel once, two seconds after the last image has finished fading in. You can do that by delaying the fades and the next call.
function carousel() {
var imgs = $(".slideshow > img");
imgs.each(function(index,element){
// Don't make the first one (index = 0) wait at all;
// make the second (index = 1) wait 3 seconds, the third
// (index = 2) wait 6 seconds, etc. And then fade in
$(element).delay(index * 3000).fadeIn(1000);
});
// Start the entire process again two seconds after the last image fades in
setTimeout(carousel, imgs.length * 3000);
}
Just an improvement to the previous answer, you can do it in the form of a callback(which ensures you that the function is called only after the fadeIn has occurred or happened, so you wont need a setTimeout) as follows
function carousel() {
var imgs = $(".slideshow > img");
imgs.each(function(index, element) {
$(element).delay(index * 2000).fadeIn(1000, function() {
if (index + 1 >= imgs.length) {
carousel(); // call the function only after all images are fadeIn completed
}
});
});
}
See if that helps and if not drop a comment below
Edit:
After .fadeIn() does it's job, it sets the display value to block what you have to do here is, hide the elements before continuing the slideshow animation, for simplicity we'll set all the img elements display to hidden by using .hide(0). This sets the elements display to none
function carousel() {
var imgs = $(".slideshow > img");
imgs.stop().hide(0); // hide all the images whenever the carousel() is called
imgs.each(function(index, element) {
$(element).delay(index * 2000).fadeIn(1000, function() {
if (index + 1 >= imgs.length) {
carousel(); // call the function only after all images are fadeIn completed
}
});
});
}
Let me know if you need anything else
this code fades in and fades out the div #shape while the start variable is true.
when i call the "start" method from event "click" the browser stops working because the while inside method is infinitive and "click" event does not finish until "start" method is done.
i want the method to run after the "click" event is finished.
what should i do?
CSS
#shape {
background-color:red;
width:100px;
height:100px;
display:none;
}
HTML
<div id="shape"></div>
<button id="startButton">start game!</button>
JS
var start = false;
$("#startButon").click(function () {
start = true;
startGame();
});
function startGame() {
while (start == true) {
$("#shape").fadeIn(1000).delay(1000).fadeOut(1000);
}
}
You don't need the flag, just make a recursive function. I changed the time to 300 milliseconds so you can see it easier
http://jsfiddle.net/zfbptz9c/
$("#startButton").click(function () {
startGame();
});
function startGame() {
$("#shape").fadeIn(300, function () {
$("#shape").fadeOut(300, function () {
startGame();
});
});
}
The div will fade in and on complete of the fade in, it will fade out then call the startGame function again and the entire process will repeat infinitely.
Alternatively, this can be achieved with css only if you only need to target modern browsers. I will put this fiddle link here, it is from a different question. I won't paste the code since you did not tag the question with css but the fiddle shows everything. I take no credit for it.
How can I create a looping fade-in/out image effect using CSS 3 transitions?
http://jsfiddle.net/FTLJA/261/
JavaScript runs in a single threaded environment, meaning once you enter an infinite loop, you can only quit the loop from within it. In synchronous execution, like the one you have here, no code outside the loop can affect the loop condition.
As far as your problem, people suggested solutions such as making a recursive function or using CSS3 transitions.
Another possible way could be to use timing functions like setTimeout and/or setInterval
The code bellow will make the fadeIn/Out happen after every second, after start button is clicked and until stop button is clicked.
var toggle = true; // flag for animation direction
var shape = $("#shape"); // so we don't select the shape each time we animate
var duration = 1000; // animation duration
var delay = 1000; // delay between animations
var timerId; // timer id returned by setInterval
// start animating the shape after the delay
$("#startButton").click(function() {
timerId = setInterval(animate, delay);
});
// stop animating the shape and hide it
$("#stopButton").click(function() {
clearInterval(timerId);
shape.css('display', 'none');
});
// function that animates the shape depending on the toggle flag
function animate() {
if (toggle) {
shape.fadeIn(duration);
toggle = false;
} else {
shape.fadeOut(duration);
toggle = true;
}
}
#shape {
background-color: red;
width: 100px;
height: 100px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shape"></div>
<button id="startButton">start game!</button>
<button id="stopButton">stop game!</button>
I'm creating a very basic content slider in CSS3 however this question is regarding the jQuery part of it. My content structure is as follows:
<div class="slider>
<div class="container>
<div class="slides">
<div class="slide active"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
These slides have an opacity of 0 however when .active is added to slide, I change the opacity to 1. What I'm trying to accomplish is moving the active class to each div every x seconds.
if($('.slider').length) {
// Element exists
var height = $('.slide .col-md-8').outerHeight(),
slide = $('.slide'),
wait = 5000;
$('.slides').css('height', height);
slide.each(function() {
});
}
This is all I can come up with. I'm sorry if it's not enough, I'll also apologize if this is very easy to do and I'm just wasting your time. I've got to learn somewhere. I hope I don't get voted down, I'm trying to build up my rep with this awesome community of developers.
Threw together an example of a script that applies a class to elements in order over time, and loops. This can be implemented in what you currently have.
var i = 1; // Counter
$slides = $('.slides > .slide'); // Array of slides
$num = $slides.length; // Number of present slides
wait = 5000; // Wait time
setInterval(function() {
// If reached the last slide - reset to the first slide
if (i++ == $num) {
$('.slide').removeClass('active');
$($slides[0]).addClass('active');
i = 1;
}
else {
// Add the active class to the next slide
$('.active').removeClass("active").next().addClass('active');
}
}, wait); // Time per slide in ms
Fiddle
If I understand you correctly you just want to move the next slide up in the stack so to speak. This is how I would go about doing it. Working example on jsfiddle
if($('.slider').length) {
// Element exists
var height = $('.slide .col-md-8').outerHeight(),
slides = $('.slides'),
wait = 2000;
var slideInterval = setInterval(startSlideInterval, wait);
$(slides).find('.slide').on({
mouseover: function(){
clearInterval(slideInterval);
},
mouseout: function(){
slideInterval = setInterval(startSlideInterval, wait);
}
});
function startSlideInterval() {
var active = $(slides).find('div.active');
nextSlide = $(active).next('.slide');
lastSlide = $(slides).find('div.slide:last');
$(active).removeClass('active');
$(lastSlide).after($(active));
$(nextSlide).addClass('active');
}
}
I wasn't able to comment about pausing the timer, but I modified the code I had posted originally and also update the jsfiddle.
I have a testimonials area on my website that fades from one testimonial to another. I'm having an issue where it will fade out too slowly before the next item fades in causing both to come up making a large div making it look ugly.
I want it to fade from one testimonial to another without jumping and flashing with both.
You can see an example here: http://ledragonvert.com/index_test.php
Here is my Javascript code:
function rotate_p() {
if (p_current == p_count) {
p_current = 1;
} else {
p_current++;
}
var $container = $('#container');
$container.find('p').fadeOut();
$container.find('p:nth-child(' + p_current + ')').fadeIn();
}
var p_count;
var p_current = 0;
var p_interval;
$(document).ready(function () {
rotate_p();
p_count = $('#container').find('p').length;
p_interval = setInterval(function () {rotate_p();}, 7000);
});
Thanks you very much for taking your time out to help me.
the solution is CSS based. since the position of the "p" element is static and you call both fadeOut and fadeIn, there is an overlap, as two p elements are inevitably shown together. To get them one on top of the other you need to use absolute positioning on the p element, like so:
#container {
position:relative;
}
#container>p {
position:absolute;
//use any values you wish, to set the testimonial relative to #container:
top:10px;
left:50px;
}