Good morning all :) I've got an issue here, which is pain in my neck for 2 days already. I'm using bxSlider for images to slide on a page and I'm calling my own function in onAfterSlide callback. Everything works fine except one thing. When I quickly switching between slides my function is being called 2-3 times(I have 3 images on page), which is not good as it returns unexpected results. I can not use newest version of bxSlider, because the markup has been changed. I think this happens, because the animation is still not finished when the onAfterSlide callback is called.
This is how I call bxSlider:
$('#slider_bx').bxSlider({
mode: 'fade',
speed: 1000,
pause: 9000,
auto: true,
autoControls: false,
prevText: '',
nextText: '',
autoHover: true,
captions: false,
pager: true,
onBeforeSlide: function () {
if ($('.slide_in').length) {
$('.slide_in').hide();
}
},
onAfterSlide: function () {
if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
doCrazyStuff();
}
}
});
And this is my function:
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
setTimeout(function () {
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Any help appreciated. Thanks.
EDIT:
I've tried to add .stop(), but didn't helped.
$this.show().stop();
$this.stop().show();
$this.stop().rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
}).stop(); // throws an error
You can cancel a timeout or make a check to see if it's running.
If you want only the last timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
clearTimeout(crazyTimeout); // Cancel previous timeout
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
If you want only the first timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
return; // A timeout is still running: don't create new one
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Try using the
$('.slide_in').stop()
in after slide function I hope it works, if possible try to give code in fiddle it will be easy to help.
Viewing your code I think the problem is not with your code : but as you have set auto to true so the plugin timer is not stopped and is sliding the images in its regular interval.
so I hope the use of stopAuto() bxSlider function in your custom function will solve the problem. and don't forget to start the auto show after you have finished doing your stuff.
thanks
Related
I want the number to count up to its designated value and stay there, but because the function gets called every time the page is being scrolled below a certain height, then it goes back to 1.
The solution would be to make it call the function only once when the page has been scrolled to below the certain height.
Ive tried placing the .one() method several places but that didn't help
http://jsfiddle.net/d7vKd/1543/
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $("#mydiv").position().top) {
window.randomize = function() {
$('.radial-progress1').attr('data-progress', Math.floor(94));
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
setTimeout(window.randomize, 200);
}
})
You should unbind your scroll event once the callback has met its demands:
$(document).on('scroll.someName', function(){
var isPassedPos = $(this).scrollTop() >= $("#mydiv").position().top;
if( isPassedPos ){
$(document).off('scroll.someName') // <-------------- remove the event listener
window.randomize = function() {
$('.radial-progress1').attr('data-progress', Math.floor(94));
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
setTimeout(window.randomize, 200);
}
})
//S1
$('#s1').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 1000,
});
//S2
$('#s2').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 2000
});
//S3
$('#s3').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 3000
});
JSFiddle
I have three sliders. I want to slide them one by one. After 1st slide scroll, it should be pause till 3rd slider scroll. Any help on how can I do this?
Use delay property.
$('#s1').cycle({
fx: 'scrollDown',
speed: 500,
delay : -5000
});
//S2
$('#s2').cycle({
fx: 'scrollDown',
speed: 500,
delay : -3000
});
//S3
$('#s3').cycle({
fx: 'scrollDown',
speed: 500,
delay:-2000
});
Working Fiddle
Have a look at the following source code. It's using jquery.cycle's internal events to pause/resume the other sliders. I think it's more robust than using simple delays (which seems to cause some disturbance after a while).
//S1
var s1 = $('#s1').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s1').cycle('pause'); // when slider1 finishes one slide, pause it
$('#s2').cycle('resume'); // resume next slider, in this case, slider2
}
});
//S2
var s2 = $('#s2').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s2').cycle('pause'); // when slider2 finishes one slide, pause it
$('#s3').cycle('resume'); // resume next slider, in this case, slider3
}
});
s2.cycle('pause'); // by default pause slider2
//S3
var s3 = $('#s3').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s3').cycle('pause'); // when slider3 finishes one slide, pause it
$('#s1').cycle('resume'); // resume next slider, in this case, slider1
}
});
s3.cycle('pause'); // by default pause slider3
I've also bundled up a fiddle.
Small Modifications to #NicolaeOlariu's answer
function applyAnimeScroll(a, b, c) {
return {
fx: 'scrollDown',
speed: 500,
timeout: 1000,
after: function () {
$('#s1').cycle(a);
$('#s2').cycle(b);
$('#s3').cycle(c);
}
};
}
var s1 = $('#s1').cycle(applyAnimeScroll('pause', 'resume', 'pause'));
var s2 = $('#s2').cycle(applyAnimeScroll('pause', 'pause', 'resume'));
var s3 = $('#s3').cycle(applyAnimeScroll('resume', 'pause', 'pause'));
Working Fiddle
I am currently using the following code to initialize a lazy initialization version of Bootstrap tooltip. After the first hover everything works fine in regards to the delay, but on the initial hover it shows right away. I know this is because of the $(this).tooltip('show'); method, but I dont know how to use the delay and show at the same time. I have to use the $(this).tooltip('show'); because once hovered the element doesnt show the tooltip unless I move out and back in.
$(element).on('hover', '.item', function () {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
$(this).tooltip('show');
}
}
});
Updated Answer
$(element).on('mouseenter', '.item', function (e) {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this)
.addClass('tooltip-init')
.tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
.trigger(e.type);
}
});
try use trigger
try the following code
$(this).tooltip({
title: matchup.Title,
html: true,
trigger: 'hover',
delay: delay: { show: 2000, hide: 3000 }
}).trigger('hover');
I found Holmes answer using delay to work, but not reliably. When moving through a series of items, the hover seemed to stop showing. With the help of another stackoverflow answer leading to this jsfiddle by Sherbrow, I simplified the code and got it working in this jsfiddle. Simplified code below:
var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
var show = function(n) {
enterTimeout = setTimeout(function(n) {
var isHovered = n.is(":hover");
if (isHovered) n.tooltip('show');
enterTimeout = false;
}, 750);
};
if(enterTimeout) clearTimeout(enterTimeout);
show( $(this) );
});
$('[rel="tooltip"]').on('mouseout click',function() {
$(this).tooltip('hide');
});
I have a jquery function that will animate the progress bar I have from 0 to 100 when it is on the screen. The problem is, if it is not visible (not visible on the page) on page load, it will never be triggered.
My code
<script>
$(function() {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: true
});
$(".dial:in-viewport").parent().show(0, function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
});
});
</script>
My question is how do I make it so that function will constantly check to see if it is on the screen until it returns valid.
The easiest way would be to create an interval which executes the code every n milliseconds.
var interval = 400;
var timer = window.setInterval(function(){
// your code goes here ...
if (yourCodeHasBeenExecuted === true) {
window.clearInterval(timer);
}
}, interval);
I guess this will work, but it is not the most beautiful solution existing. A better way would be to use window resize or window scrolling events, depending of what you need, and execute your code there.
You find an example for a resize event here.
I developed a simple jQuery animation first and later I create a jQuery function for reusability which will do the same thing. Here is a demo: http://jsfiddle.net/SpMns/
My code is working but not reliably so: when I click on the button to run the code, nothing happens; clicking it two or three times will start the animation. Why wouldn't it work the first time?
Please have a look at my routine and tell me which area I need to rectify:
jQuery.fn.busyToggle = function(ImgLoadSrc, marginBottom, opacity, speed,
easing, callback) {
var oDiv = $("<div id='BusyBox'><img src='" + ImgLoadSrc
+ "' alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
if ($("#BusyBox").exists() == false) {
//alert('div not exist');
oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
oDiv.css("border-top-left-radius", "5px");
oDiv.css("border-top-right-radius", "5px");
oDiv.css("bottom", "0px");
oDiv.css("font-size", "0.8em");
oDiv.css("font-style", "normal");
oDiv.css("font-weight", "normal");
oDiv.css("left", "50%");
oDiv.css("margin-left", "-45px");
oDiv.css("padding-top", "20px");
oDiv.css("position", "fixed");
oDiv.css("text-align", "center");
oDiv.css("width", "90px");
oDiv.css("height", "50px");
oDiv.css("margin-bottom", "-70px");
oDiv.css("background-repeat", "no-repeat");
oDiv.css("background-position", "center center");
oDiv.data('IsUp', 1)
oDiv.appendTo('body');
}
// i work with jquery data function for achieving toggle behaviour
if (oDiv.data('IsUp') == 1) {
oDiv.data('IsUp', 0);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
else {
oDiv.data('IsUp', 1);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
};
$(document).ready(function() {
$("#Process").click(function() {
if (flag == 1) {
$('#BusyBox').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
flag = 0;
}
else {
$('#BusyBox').busyToggle('images/loader.gif', -70, 0, 500, 0, function(){
alert('div hide')
});
flag = 1;
}
return false;
});
});
What could be causing this to fail the first time it's run?
The problem are is the this usage in the #busyToggle
On the first call $('#BusyBox') becomes an empty Array, which means that this (in #busyToggle) is also empty Array.
A better solution to your probelm would be to call busyToggle this way:
$('#Process').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
and use $('#BusyBox') instead of this in your function.
You can find all the code over there: http://jsfiddle.net/ubmCt/8/
P.S: I've also added following line to the ready function, otherwise it won't run in most browsers
var flag = 1;