Heyo,
I want to call a function that disables the scrollwheel while the Preloader is shown. But after the Preloader is gone, the scrollwhell should be usable again.
I got the function which disables the scrollwheel allready. Now I need a simple code which makes it run only the first 3 seconds.
My anitscrollwheel function looks like so: window.onwheel = function(){ return false; }
Try this:
<script type="text/javascript">
var wheelEnabled = false;
window.onwheel = function() { return wheelEnabled; }
setTimeout(function() {
wheelEnabled = true;
}, 3000);
</script>
You can do something like that
var enable_scroll = false;
//When preloader ends, set enable_scroll = true;
window.onwheel = function(){
if(enable_scroll == false) {
return false;
}
}
Related
I wrote the function for check if button was clicked twice and if it was to measure the time between two clicks. It has to prevent multiple clicks in short time.
Button click:
$("#Save").click(function () {
dateTime1 = new Date().getTime();
BtnId = this.id;
showSaveDialog();
});
And measuring function:
ButtonWasTriggeredTwice: function () {
var result = false;
var currentTime = new Date().getTime();
var time = currentTime - dateTime1;
if (PreviousBtn === null) {
result= false;
} else {
if (PreviousBtn === BtnId) {
if ( time < 1500) {
result = true;
}
else result = false;
}
else {
result= false;
}
}
PreviousBtn = BtnId;
BtnId = null;
return result;
}
BtnId and PreviosusBtn are global scope variables.
The strange thing is this function works great when I set breakpoints in debugger. If I switch off debugger function blocks every next click on button, no matter what time interval is between clicks
You can use this solution with unbind and timeout, like this:
HTML
<input type="button" id="Save" value="save me" />
JS:
function saveEventButton(){
$("#Save").click(function () {
alert('saved!');
$("#Save").unbind('click');
setTimeout(function(){
saveEventButton();
}, 5000); // 5sec
});
}
saveEventButton();
This is the JSFiddle
UPDATE This solution is a mix from mine and Revish Patel solution
function disableTimeout(_this){
$(_this).prop('disabled','disabled');
setTimeout(function(){
$(_this).prop('disabled','');
}, 5000); // 5sec
}
$("#Save").click(function () {
alert('saved!');
disableTimeout(this);
});
This is the JSfiddle
You can also disable button when you first click is performed.
$(document).ready(function () {
$("#Save").click(function(){
$('#Save').prop('disabled','disabled');
// Perform your button click operation
});
});
I am trying to create a neat way to stop an AJAX called based upon if the browser is in focus, and if the mouse moves.. So here's what I want it to do:
If the user goes to a different tab in their browser, minimized the window, or goes somewhere else other than the web app, I want it to kill the AJAX calls in 1 minute. If the user moves the mouse anywhere in the web app, it should consider the user "focused" on the app, and thus continue the ajax calls. I put a timeout called "st" in there to take care of the "timeout" portion, but adding in a mouse detector is a little more advanced. Here's what I have:
var window_focus = true;
$(document).ready(function () {
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});
waitForMsg();
});
I was going to try adding in something like this:
$(function () {
$().mousemove(function () {
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
});
});
But it didn't work. Thanks for your help.
http://jsfiddle.net/popnoodles/5mqMm/
You probably want this using .one(). This will see the mouse move, run your procedure and not run it again, until the window is reloaded or it's on another page.
Putting it inside of blur means blurring sets it up again.
}).blur(function () {
$(document).one('mousemove', function(){
// i react ONCE to the mouse being moved
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
// focus the window again as desired
$(window).trigger('focus');
});
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});
Try this jsfiddle
var window_focus = true, lastMouseMoveTime;
$(document).ready(function () {
lastMouseMoveTime = new Date().getTime();
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
window_focus = false;
console.log('Init Suspension...');
// Set Timeout
});
waitForMsg();
$(document).mousemove(function(){
lastMouseMoveTime = new Date().getTime();
if(!window_focus ){
waitForMsg(); // restarting ajax if it stopped because of mousemove.
}
});
});
in your ajax call method
if( !window_focus){
if( new Date().getTime() - lastMouseMoveTime > 60*1000 ){
return;
}
}
I have trouble with timer in button click. When i click button startpause() method is called there i set start timer and stop timer. It works fine when I click button normally(one click after sometime another click) but when I click the button again and again speedly the timer starts to jump with 2-3 secs. Seems like more than one timer is running.. Anyone have any idea....?? here time is my timer method
function startpause() {
if(FLAG_CLICK) {
setTimeout(tim,1000);
FLAG_CLICK = false;
}
else {
clearTimeout(ti);
FLAG_CLICK = true;
}
}
function tim() {
time.innerHTML = t;
t = t + 1;
ti= setTimeout("tim()", 1000);
}
Try this:
// assuming you declared ti and t out here, cuz I hope they're not global
var t = 0;
var ti;
var running = false;
function startpause() {
clearTimeout(ti);
if(!running) {
ti = setTimeout(tim,1000);
running = true;
} else {
running = false;
}
}
function tim() {
time.innerHTML = t;
t = t + 1;
ti = setTimeout(tim,1000);
}
You can read more about the .setTimeout() here: https://developer.mozilla.org/en/docs/DOM/window.setTimeout
Also, see the jsfiddle I just created: http://jsfiddle.net/4BMhd/
You need to store setTimeout somewhere in order to manipulate it later.
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
ref http://www.w3schools.com/js/js_timing.asp
Maybe you must change this:
if(FLAG_CLICK) {
setTimeout(tim,1000);
FLAG_CLICK = false;
}
to:
if(FLAG_CLICK) {
tim();
FLAG_CLICK = false;
}
It seems works for me normally
I need to run execFunc(); not only when the user moves onto the next field, but also runs when the user remains focused on the same field for 5 seconds.
$('input[name="email"]').bind('blur', function () {
execFunc();
});
var timer = null;
$('input[name="email"]').blur(function(e){
if (timer) clearTimeout(timer);
execFunc();
}).focus(function(e){
timer = setTimeout(execFunc, 5000);
});
If you're doing form validation, there are better ways of doing this.
How about...
$('input[name="email"]').bind('blur', execFunc).bind('focus', function() {
setTimeout(execFunc, 5000);
});
If the function isn't idempotent and you must execute it only once, you can do:
var execFuncHasExecuted = false;
function execFunc() {
if (execFuncHasExecuted)
return false;
execFuncHasExecuted = true;
// ... remainder of implementation
}
This should suffice
var g_timeout = null;
$('input[name="email"]')
.blur(function () {
execFunc();
})
.focus(function(){
if (g_timeout) clearTimeout(g_timeout);
g_timeout= setTimeout(execFunc, 5000);
});
I've written my first bit of proper jQuery for an image slideshow, that allows users to scroll up and down through some images:
$(window).load(function(){
$('.scrollUp').click(function(){
$('.cardWrapper:visible:first').prevAll(':hidden:first').slideDown(function(){
$('.cardWrapper:visible:last').slideUp();
});
return false;
});
$('.scrollDown').click(function(){
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
}
else{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
});
}
return false;
});
});
The problem I have is that if you click very fast on the .scrollDown element link - it loses all the content as it hasn't had the time to add the extra ( i think) - and thus it starts to fail.
Is there a way to make jQuery not accept any new click on an element until its run all of this function?
Maybe something like
var scrollDownClickActive = false;
$('.scrollDown').click(function(){
if (scrollDownClickActive) return false;
scrollDownClickActive = true;
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; } );
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; } );
});
}
return false;
});
Using a flag to determine if the function is active or not.
The use of binding and unbinding removes the use of flag variables =)
function scroller(obj){
$(obj).unbind('click');
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
});
}
$(obj).click(function(){scroller(this);});
}
$('.scrollDown').click(function(){
scroller(this);
});
Hope this helps!
If it's clicking an button element, just have your function disable it and re-enable it in the completion callback function.
Otherwise just write your function to check for a variable value which prevents it from running. If the variable isn't set, have it set a the value (something like var busy = true;) in the handler and set it back to false in the completion callback.
You can use a flag to indicate that it is scrolling (as suggested by MiffTheFox), but you'll have to unset the flag in the slide callback because the slide happens asynchronously:
$(function(){
var scrolling = false;
function startScrolling() {
if(scrolling) return false;
return scrolling = true;
}
function scrollComplete() {
scrolling = false;
}
$('.scrollUp').click(function() {
if(startScrolling()) return false;
$('.cardWrapper:visible:first')
.prevAll(':hidden:first').slideDown(function() {
$('.cardWrapper:visible:last').slideUp(scrollComplete);
});
return false;
});
$('.scrollDown').click(function() {
if(startScrolling()) return false;
if($('.cardWrapper:last').is(':hidden')) {
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(scrollComplete);
} else {
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function() {
$('.cardWrapper:visible:first').slideUp(scrollComplete);
});
}
return false;
});
});
Disclaimer: I haven't checked your code to see how valid it is, I've just added the flag and the callbacks for you.