I'm currently working on a small jQuery element but having some trouble with clearInterval.
I made a jsFiddle with an example what I'm working on: http://jsfiddle.net/eWTSu/
As you can see it rotates fine but when I hover over a navigation button the rotation does not stop. Also there's a problem with the order of the rotation. The rotation goes div1, div2, div3, div4 and repeat. But when I hover of the third button while the rotation is on the first div it loads the second div on top of the third.
Does anyone have a good tip for me?
Try this (See DEMO):
jQuery(document).ready(function () {
$('.greenC, .blueC, .orangeC').hide();
$('.nav li').hover(function () {
var liClass = $(this).attr('class');
$('.slider').hide();
$('.' + liClass + 'C').show();
});
(function () {
var interval_function = function () {
jQuery('#header_slider > div:first')
.hide()
.next()
.show()
.end()
.appendTo('#header_slider');
};
var interval = setInterval(interval_function, 1000);
$('.nav li').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 1000);
});
}());
});
Related
I have a slider with arrows. When I click on these arrows a lot of times, the slider continually slides depending on how many times I click the arrow. How do you prevent clicking on the arrow until the sliding animation is done?
Please see what I mean in my pen here: http://codepen.io/gianaguilar/pen/JGaxKL
Try clicking on the arrows multiple times and how the slider responds. I need to be able to slide one click at a time.
Thank you!
Here is the jquery code
var $visibleSlide, getDataSlide, sliderInterval, getDataNextSlide, getDataPrevSlide, getDataNavDot;
var fadeDuration = 1000;
var pause = 8000;
//show first slide
$('.slides li:first-child').css('display', 'block');
//show first nav dot
$('.nav li:first-child').addClass('active-cd');
//find out what slide is visible and get its data attribute
function getSlideInfo() {
$visibleSlide = $('.slides').find('li:visible');
getDataSlide = $visibleSlide.data('n');
getDataNextSlide = $visibleSlide.next().data('n');
getDataPrevSlide = $visibleSlide.prev().data('n');
}
//show next slide
function showNextSlide() {
getSlideInfo();
$('.nav li').removeClass('active-cd');
if (getDataSlide < 3) {
$visibleSlide.fadeOut(fadeDuration);
$visibleSlide.next().fadeIn(fadeDuration);
$('.nav li[data-cd=' + getDataNextSlide + ']').addClass('active-cd');
} else {
$visibleSlide.fadeOut(fadeDuration);
$('.slides li:first-child').fadeIn(fadeDuration);
$('.nav li:first-child').addClass('active-cd');
}
} //end showNextSlide
function showPrevSlide() {
getSlideInfo();
$('.nav li').removeClass('active-cd');
if (getDataSlide > 1) {
$visibleSlide.fadeOut(fadeDuration);
$visibleSlide.prev().fadeIn(fadeDuration);
$('.nav li[data-cd=' + getDataPrevSlide + ']').addClass('active-cd');
} else {
$visibleSlide.fadeOut(fadeDuration);
$('.slides li:last-child').fadeIn(fadeDuration);
$('.nav li:last-child').addClass('active-cd');
}
} // end showPrevSlide
// controls
$('.next').on('click', showNextSlide);
$('.prev').on('click', showPrevSlide);
//autoplay
function startSlider() {
sliderInterval = setInterval(showNextSlide, pause)
}
startSlider();
$('.slideshow').mouseenter(function() {
clearInterval(sliderInterval);
});
$('.slideshow').mouseleave(startSlider);
//control dots clicks
$('.nav li').on('click', function() {
getDataNavDot = $(this).data('cd');
getSlideInfo();
$('.nav li').removeClass('active-cd');
$(this).addClass('active-cd');
$visibleSlide.fadeOut(fadeDuration);
$('.slides li[data-n=' + getDataNavDot + ']').fadeIn(fadeDuration);
}); //end dots click
You can define a variable isAnimating that is set to true when you are in the next or previous slide function, and set to false when the animation is complete (within a callback function to one of your fade functions).
A simple check at the top of these next and previous functions to return false if the isAnimating function is set to true will prevent the animations from queuing up.
See here: http://codepen.io/anon/pen/XXPOQY
I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});
I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
see http://liveweave.com/Pieivc
what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish
how can i do to check it ?..
(function () {
$('#scrollup').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({scrollTop: 0}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
$('#scrolldown').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({
scrollTop: $(".sidebar-menu")[0].scrollHeight
}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
})();
You can check this using $('.sidebar-menu').scrollTop() value.
So for example, I wrote a function called check(), which checks the location of the scroll and display/hide the appropriate arrows. This function is called on mouse touchend event of each arrow.
function check() {
if ($('.sidebar-menu').scrollTop() == 0) {
$('#scrollup').hide();
$('#scrolldown').show();
} else if ($('.sidebar-menu').scrollTop() == height - 100) {
$('#scrolldown').hide();
$('#scrollup').show();
}
}
See it in action: http://jsfiddle.net/ry2zwho1/1/
Try to use this jsfiddle
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
$(".btnPrevious").css('color', 'red').show();
itemWidth =......
I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});
Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});
In a webapplication I'm working on, when you click on a listitem, a div pops out.
You can find an example here.
How can I adjust the top of the div to the listitem?
The div (#home in the example) has to pop out with the top next to the list item.
$(function () {
$("#home_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});
$(function () {
$("#edit_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});
So, I cleaned up some of it and reorganized it. Basically, I marked a container element (which holds both the navs and the content), and use that to determine the desired offset. I made everything more generic so you can just add more hyperlinks as you need! Hopefully this is helpful, let me know if you have any questions about why I did things this way, or how something works.
jsFiddle
$(function () {
$("#list a").click(function () {
var $this = $(this);
var $container = $this.closest('[data-id="container"]');
var $target = $($this.attr('href'));
$target.css('margin-top', $this.offset().top - $container.offset().top);
$target.animate({width: 'toggle'}, 500);
});
});