On my website I have a a div (.wrapper) that moves co ordinates absolutely when the mouse wheel is scrolled, or the user uses his arrow keys/spacebar etc.
At certain points, say when the div.wrapper is -1000 pixels left, Id like a function to happen.
Is there anyway I can check for this without using an interval?
setInterval(function(){
if($('.wrapper').css('left') <= 100 + 'px'){
alert('foo');
} else {
alert ('bar');
};
}, 5000);
There's no event to detect changes in CSS properties. The usual way to do this is to put the call the handler explicitly after updating the left property.
You can move the code that changes the value into a separate function:
function setLeft(left){
$('.wrapper').css('left', left);
if($('.wrapper').css('left') <= 100 + 'px'){
alert('foo');
} else {
alert ('bar');
};
}
If you wanted to you could trigger inside the setLeft function and put the checking code into an event handler.
Another thing works is creating a wrapper function for .css that triggers the event:
var originalCssFunction = $.prototype.css;
$.prototype.css = function(){
originalCssFunction.apply(this, arguments);
// Check conditions and trigger event
}
Related
Hi guys I am using the scroll function on this script but it fires each time a user scrolls. I want it to only fire once when the user scrolls down to #ror. I tried using the fired variable to check if it has already been fired but that didn't seem to work. I know some people have answered this before but this is where i got the fired solution from and cant get it to work only once. Anyone think they can help please?
$( window ).scroll(function() {
var fired = 0;
console.log(fired);
if(fired == 0){
$('#ror').html('');
$('#ror').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'progress bar',
textAfter: '',
offset: 10,
});
fired=1;
}
});
You need to move the fired variable outside the scroll function.
As you are doing it now you are reinitializing the fired variable and setting it to 0 each time the scroll event gets fired.
var fired = 0;
$(window).scroll(function() {
console.log(fired);
if(fired == 0){
$('#ror').html('');
$('#ror').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'progress bar',
textAfter: '',
offset: 10,
});
fired=1;
}
});
To detect when a given #target scrolls into view, you can look at it's top position, and check if that position is already inside the viewport.
$('#target').offset().top - $(window).outerHeight() > $(window).scrollTop();
That left part of the equation is constant (as long as you don't move anything around, or change the size of the viewport). Therefore it may be wise to move that outside your event handler function. You need to keep in mind that the scroll event is rather expensive, since it fires constantly when you are scrolling, and the browser is already quite busy with the rendering of the viewport.
When the work is done, you can remove the event handler.
$(window).off(event);
So your final code would look something like this:
var triggerAtY = $('#target').offset().top - $(window).outerHeight();
$(window).scroll(function(event) {
// #target not yet in view
if (triggerAtY > $(window).scrollTop()) {
return;
}
// run your task
// remove this event handler
$(this).off(event);
});
Have a look at the demo: https://jsfiddle.net/6whnfa02/1/
Docs:
http://api.jquery.com/offset/
http://api.jquery.com/outerHeight/
http://api.jquery.com/scrollTop/
http://api.jquery.com/off/
$(window).scroll(function(event) {
var eT = $('#ror').offset().top,
wH = $(this).height(),
wSt = $(this).scrollTop();
if(wSt > (eT-wH)) {
alert('you have scrolled to the ror!');
//detach scroll event handler, as we dont want it to fire again
$(this).off(event);
}
}
The above code checks if user has scrolled down to an element. If yes, alert something and detach the scroll event handler for window. You can refer jquery documentation to see the meaning of offset, height and scrollTop.
Now, as #Pevera pointer out, it is costly to attach event handler to window scroll, you should be aware of that. If you have some heavy code execution inside scroll callback, it will hamper in scrolling the page. So, if you have to attach handler to window scroll, run the scroll callback code within a timeout callback. It ensures to run the scroll callback code after certain delay which helps to scroll the page better. Rewriting the above code with timeout will look like this:
var timeout = null;
$(window).scroll(function (event) {
if (!timeout) {
// set a timeout to run after 250ms
timeout = setTimeout(function () {
clearTimeout(timeout);
timeout = null;
var eT = $('#ror').offset().top,
wH = $(this).height(),
wSt = $(this).scrollTop();
if (wSt > (eT-wH)){
alert('you have scrolled to the ror!');
//detach scroll event handler, as we dont want it to fire again
$(this).off(event);
}
}, 250);
}
});
Everytime user scrolls the page, a timeout is set to run after(atleast) 250ms. In the timeout callback, we remove this timeout handler and check if user has scrolled to the element. If yes, we alert something and detach the scroll handler for window so that it doesn't run again.
Please refer to this FIDDLE for better understanding.
More info on this stackoverflow post and John Resig's blog post.
I have some code, that checks for the visibility of an element on the screen. As soon as it comes in sight by scrolling the page a custom event is triggered. This custom event starts an animation. To prevent this animation to be started over and over the function that starts it is only started once. For that I used the jQuery function .one().
The function to check if element is visible:
checkScrollPos = function() {
if (objTopPos - scrollPos <= windowHeight / 2) {
$(document).trigger('objVisible');
}
}
The function to listen for the event:
evtListener = function() {
//startAnimation() should only be started once
$(document).one(
{
'objVisible': function(event) {
startAnimation();
}
}
);
}
Here it all happens:
$(document).ready(function() {
evtListener();
$(window).scroll(function () {
scrollPos = $(document).scrollTop();
checkScrollPos();
}
}
Now this all works fine but I extended the checkScrollPos() function to also check if the element gets out of sight again, to then stop the animation. That works fine to. Problem is, as the events trigger, the event-bound functions only are executed one time. So when you scroll teh element in sight, then out of sight and then in sight again the animation will not be executed again (what is the correct behaviour of course). Now I would like to have it that the events are triggered exactly one time but EVERYTIME the element gets in or out of sight and not just one time at all. So basicly I need some kind of reset for the
$(document).one()
function – so that everytime the element gets out of sight, I can use the .one() function again. Is there any way to do that?
You have to bind the objVisible event every time the element disappears.
Just call evtListener() after the element is out of sight, so that the objVisible event is bound again.
Your code would be something like this:
checkScrollPos = function() {
if (objTopPos - scrollPos <= windowHeight / 2) {
$(document).trigger('objVisible');
}
if (/* your condition to check if element is out of sight */) {
evtListener();
}
}
I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.
My problem is that the user can click the numbers and other icons multiple times, causing it to crash. Is there a way to overcome this?
I have tried this jQuery one function
$(".character").one("click", function() {
});
But the icons re-appear so I need them to be clickable again.
I have also tried to set a time out but cannot seem to get it working. Can someone point e in the right direction.
setTimeout(function() {
$(".character").one("click", function() {
});
}, 3000);
Fiddle: http://jsfiddle.net/GvNB8/
Your main problem is that you are not interacting with the characters when re-showing them. In that case the only way to prevent the user from clicking is building in a method to prevent clicking twice in quick succession with a timeout.
That method would look something like this:
function clickThrottled(fn) {
var click = true;
return function () {
if(click) {
click = false;
fn.apply(this, arguments);
setTimeout(function () { click = true; }, 1000);
}
};
}
You then use the function like this:
$('.character').click(clickThrottled(function () {
// do your one time magic.
}));
What I am using here is JavaScript closures. The function you pass to the click event handler will only call the underlying function once, then ignore all calls for 1 second and then re-enable itself.
I'd still suggest you go with a normal method of just re-enabling the elements when they are redrawn onto the screen - but the above also works..
Why not just add an information indicating that this item has been clicked :
$(".character").click(function(){
if(!$(this).data("hasBeenClicked")) {
$(this).data("hasBeenClicked", true);
// the rest of your logic ...
}
});
What I'm trying to do is this:
You click in a textarea, and it'll expand to 100px. Normally it's at 50px. If you click outside (or trigger the blur event after clicking in the textarea...) it should go back to it's normal 50px height.
If you trigger the change event by entering something into the textarea, I want to be able to click on the submit button without it triggering the blur (to move it back to 50px).
Am I on the right track?
var expandTextarea = function() {
$('.js-textarea-slide').on('click', function(e) {
var typed = false;
$(this).change(function() {
typed = true;
});
$(this).animate({
height: '100'
}, 0);
});
$('.js-textarea-slide').blur(function(typed, e) {
if (!typed) {
alert('yo');
return false;
} else {
$(this).animate({
height: '50'
}, 0);
}
});
};
http://jsfiddle.net/khE4A/
http://jsfiddle.net/khE4A/4/
var expandTextarea = function() {
//Note that this is in a scope such that the click, blur and change handlers can all see it
var typed = false;
$('.js-textarea-slide').on('click', function(e) {
//If you bind the change handler in here, it will be bound every time the click event
//is fired, not just once like you want it to be
$(this).animate({
height: '100'
}, 0);
}).change(function() {
typed = true;
});
//Note that I got rid of typed and e.
//If typed were included here, it would not have the value of the typed on line 4.
//Rather, it would have the value of whatever jQuery's event processing passes as the first
//parameter. In addition, it would hide the typed on line 4 from being accessible since
//they have the same name.
//Also, I got rid of the e parameter because it's not used, and in JavaScript, it's perfectly
//acceptable to have a paramter calling/definition count mismatch.
$('.js-textarea-slide').blur(function() {
if (!typed) {
$(this).animate({
height: '50'
}, 0);
}
});
};
//Since expandTextarea doesn't depend on the context it's called from, there's no need to wrap it
//in an extra function.
$(expandTextarea);
Note that this follows the logic you described in your question, not what your code was trying to do. Anyway, a few important changes:
Your change event would be bound every time the textarea was clicked instead of once. For example, if you clicked on the textarea 3 times, you would bind the event 3 times instead of just the 1 time required.
Also, the part that actually made the code broken was that typed was out of scope of the blur handler. Giving a callback a parameter with a certain name does not pull that variable into scope. In fact, it would mask it if the variable had been in a previously accessible scope.
Another [pedantic] thing:
$(function() {
expandTextarea();
});
The function wrapping is unnecessary. As expandTextarea does not use this, you can use the function directly:
$(expandTextarea);
Anyway, given the description of the problem in your question, I believe what you're looking for is: http://jsfiddle.net/khE4A/2/
I have a popup that is executed on mouseover with jquery.
Within that function I have a second delay before the popup displays using settimeout
Problem is if in that second they mouse over multiple times then multiple popups are triggered.
$('#div').mouseover(function() {setTimeout("popup()",1000);});
What I need to do is disable the detection and then re enable it in popup().
How might I do that?
You can use .hover() with a clearTimeout(), like this:
$('#div').hover(function() {
$.data(this, 'timer', setTimeout(popup, 1000));
}, function() {
clearTimeout($.data(this, 'timer'));
});
This clears the timeout you're setting if the mouse leaves, you'll have to stay on the element for a full second for the popup to trigger. We're just using $.data() on the element to store the timer ID (so we know what to clear). The other change is to not pass a string to setTimeout() but rather a reference directly to the function.
I guess something like this
(function(){
var popup_timer = 0;
$('#div').mouseover(function() {
clearTimeout(popup_timer);
popup_timer = setTimeout("popup()",1000);
});
});
EDIT updated code, clearTimeout added, wrapped