I am having an issue with jQuery animate on an iPad Mini (Safari).
I run the following animation when a button is clicked:
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000);
});
This button sends a request that makes the page reload. As it is starting to reload I want the loadBar to animate.
This does not happen as no animation is fired.
It works if you add return false; and stop the page reload from occurring.
Are there any ways around this. I have tried CSS3 animations and get the same issue.
The animation must occur at the same time as the submit event.
Thanks!
You can reload the page in js after the animation completes
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000, function(){
window.location.reload();
});
return false;
});
Maybe something like this is what you're looking for:
http://plnkr.co/edit/2v0s6oIw8jNn8BmoTemi?p=preview
$(function(){
$('body').on('click', '#submitBtn', function (e) {
e.preventDefault();
$('#loadbar').animate({ width: '95%' }, 8000);
setTimeout(function(){ //remove this line
$("#form").submit();
}, 5000); //simulate slow loading page. remove this line
});
});
The idea here is that you prevent the default behavior of the browser, force it to animate, and then continue the submit.
Assuming its a submit form with id "myform":
$('body').on('click', '#submitBtn', function(e) {
e.preventDefault();
$('#loadBar').animate({ width: '95%' }, 8000, function() {
$( "#myform" ).submit();
});
});
EDIT :
Check beforeunload() in http://www.w3schools.com/jsref/event_onbeforeunload.asp
$(window).on('beforeunload', function(){
$('#loadBar').animate({ width: '95%' }, 8000);
});
Related
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
I can stop mousewheel from scrolling the background when the popup image shows ... and I can do it by the following code.
So, I'm here trying to find a way to unbind and scroll the background again. After closing popup, all elements are blocked. The page doesn't scroll.
Any thoughts how to unbid it again?
Thanks.
Have you tried .unbind()?
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
$(document).on("click", ".unbind_button", function() {
$("body").unbind("mousewheel", function() {
// do something
});
});
What's wrong with this code? Probably a lot cus I'm new to jquery. I'm trying to fadeIn the page then fade the background to a different one the fade up and in the nav and set it up so the links will fade the page out and bring in the new page. The code I have now isn't quite working and I think some syntax and formatting is the problem.
$(document).ready(function() {
$('body').fadeIn(1500);
});
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Thanks!
$(document).ready triggers as soon as the DOM is fully loaded. Any javascript outside of the $(document).ready block is run while the browser is still loading the page. so if your $('#background') element is not yet loaded to the DOM jQuery cannot add the 'background' class to it. And more than likely only some of your $('.link') elements will have the click event listener added since they weren't yet loaded when the javascript ran. That's why you should embed such things inside the $(document).ready function.
$(document).ready(function() {
$('body').fadeIn(1500);
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
Notice with proper indentation you can easily see what is inside the $(document).ready function. Also notice you don't put standard functions like your newpage() function inside the $(document).ready.
When You click on button, page should scroll down, to div with id="myTarget".
here is my HTML:
<button class="go"> GO </button>
<div id="myTarget">
<p>
la lalal lalala lalala
</p>
</div>
and jquery:
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
My problem is that when you click a few times on button, page scroll down. After that you can't scroll up. Is any way to stop click event while page moving?
JsFiddle
And if you stop the animation when user mousewheel?
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
Demo
What about disabling the button while it is running and enabling it again once animation is done?
$(function() {
$(".go").on('click', function(event) {
var $but = jQuery(this);
event.stopPropagation();
$but.attr("disabled", true);
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000, "linear", function(){
$but.removeAttr("disabled");
});
});
});
I assume you mean that if you rapidly click the button a couple of times it'll scroll down and not let you scroll back up, and not that it doesn't work when you "Click Button, Scroll Down, wait, Scroll Up".
If it's the first case, you can fix it like this.
$(function() { $(".go").on('click', function(event) {
event.stopPropagation();
$(".go").attr("disabled", true).delay(3000).attr("disabled", false); $('html, body').animate({
scrollTop: $("#myTarget").offset().top
},
3000);
});
});
This means that when you click on the button, it will be disabled for 3000 milliseconds (the time of your animation. This should stop a user from being able to click on it and trigger the animation more than once while it's animating.
The issue is that your animation is getting appended onto the previous animation for the html and body tags. Thus, you have to wait for all of the animations that have been started to die before you can scroll back up.
Things that you can do about this problem
Make the duration of the animation smaller
Call stop() on the elements you are animating before creating the new animation
Call stop() if the window is scrolled. This solution could be problematic if you ever have the body tag doing other animations. The first two solutions should be enough, anyway.
The first should be self explanatory and the second is very easy:
$(".go").on('click', function(event) {
event.stopPropagation();
$('body').stop().animate({
scrollTop: $("#myTarget").offset().top }, 500);
});
You also only need to animate the body element (not the html element).
JSFiddle Example
Use a scrolling state, like so :
$(function() {
//global var
isScrolling = false;
$(".go").on('click', function(event) {
event.stopPropagation();
if(!isScrolling) {
isScrolling = true;
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000,
//Only when it's completed (callback)
function() {
isScrolling = false;
}
);
}
});
});
Your problem is that it keeps trying to scroll down even though you are already down.
Does anyone know if there's a way to preventDefault(), but on a timer, so default actions are restored after a certain time?
Here's what I have so far:
function setResetInterval(bool){
var el = $('article');
if(bool){
timer = setInterval(function(){
setTimeout(function(){
console.log('default prevented');
e.preventDefault();
}, 500);
},1000);
}else{
clearInterval(timer);
}
}
if(object.touch.touch){
object.header.menu_button.attr('href',null);
object.touch.articles = $('article');
object.content_blocks.on('click','article',{},function(e){
object.touch.articles.removeClass('on');
$(this).addClass('on');
e.stopPropagation();
setResetInterval(true);
setTimeout(
function() { setResetInterval(false); }, 500);
});
}
Problem is, the function is called after the clickthrough and the action is not prevented. The alternative is the prevent the default action on click, which stop scrolling on mobile devices.
Thinking about it more clearly, the real problem is the click tag in question is basically the entire screen width on mobile.
To build on what Cayce said, one way to approach this is to tie the functionality to a class you later remove.
Demo Fiddle:
In the example, the default will be prevented as long as the div has the .red class, the setTimeout will remove the class after 3 seconds.
JS:
$('body').on('click', '.red', function (e) {
e.preventDefault();
console.log('I only show up while default is prevented');
});
$('body').on('click', 'div', function () {
console.log('I will always show up');
});
setTimeout(function () {
$('div').removeClass('red');
},3000);
I have some problem, i need to block/shut down some click action for some little time. What i'm trying to do is fire all actions after my click, but block this click when this actions is under procesing. So this is my code, thx for help:
carousel_controls_buttons.live('click', function(e){
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
carousel_controls_buttons.removeAttr('disabled');
}, 450);
});
I am presuming you are wanting something like this:
$(document).ready(function () {
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
carousel_controls_buttons.removeAttr('disabled');
}, 1000);
carousel_controls_buttons.live('click', function(e){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
});
});