Function keeps running although it shoudn't - javascript

I wrote a on ended for video player, like this:
$('.vast').on('ended', function() {
$('.vast').removeClass('vast');
Player.constructPlayer(
'//techslides.com/demos/sample-videos/small.mp4',
'//techslides.com/demos/sample-videos/small.webm'
);
});
My problem is, even when I remove the vast class, it's still running in loop. What can I do?

The event has nothing to do with the class you used to bind it. You need to remove the event handler itself.
$(this).off('ended');

Related

Run function onscroll, unless parent has class in Javascript

I'm puzzled; I have a window.onscroll = function() { .. } which works fine, except for some cases. In these cases, the <html> element has one of two specific classes. So that seems easy enough; don't run the onscroll if either of those classes exist. But, how?
Roughly, I have this set up;
if (!html.classList.contains('firstClass') && !html.classList.contains('secondClass')) {
window.onscroll = function() { ... }
}
But the onscroll function runs every time. I've also tried to put the if statement inside the onscroll, but no luck.
Now I'm unsure if the markup of the if statement is correct. So I've also tried in in a simpler fashion, where the statement is always true or false;
if (html.classList.contains('thirdclass') { }
In this example, the code either runs or it doesn't, no matter if the class gets added or removed. It might have to do with how the DOM works, and the html element maybe not getting picked up?
I'm unsure if the markup in the if statement is even correct; all sources I find on this use jQuery, and none of them clearly state how to run if (element has one of either two class classes) {}.
Who can help me get on the right track?
edit:
Well slap me silly. I set up a jsfiddle to demonstrate, but in there it does work as expected(!). This leaves me to think that it has to do with the ecosystem this code is running in (Magento 2 frontend). Maybe how the js is initialized? (Yes, I do need to call jquery sadly);
define([
"jquery"
],
function($) {
"use strict";
// code here
});
Could that be the case?
Based on your description, I guess your html tag initially dont have the classes firstClass and secondClass.
So, here the problem is that you are registering an event listener to onscroll event only if the html element don't have the classes firstClass and secondClass. As initially it is true (because initially the html element doesn't have the class required classes), it will register the event listener and it will always fire whenever you scroll.
Also your code will never fire the event listener if initially the classes are firstClass and secondClass.
Now, what you need to change to achieve your goal is to add the if statement inside the onclick listener instead of outside.
Here's the code:
window.onscroll = function () {
if (!html.classList.contains('firstClass') && !html.classList.contains('secondClass')) {
// Do stuff
}
};
What the above code does is that it first registers the event listener no matter what the class of the html element. But it will execute the code inside the if block only if the html element don't have both the classes. So, your goal is achieved here.
Hope this helps :)

moveend event fired many times when page is load with Leaflet

I need to do some operations when the map is paned or zoomed, so I attached a callback to the event moveend.
map.on('moveend', function() {
// code stuff
});
It works fine, but when the page is load the event is fired three times and I don't know why.
Probably because during its creation the map is moved.
To avoid this i tried to wait the load event before subscribing moveend event, but nothing changed. So I tried to attach it within whenReady callaback, but again it is fired three times.
map.whenReady(function() {
map.on('moveend', function() {
// code stuff
});
});
Finally, I discovered that after the resize event it works quite fine: moveend is fired jonly one time. But I really believe there is a best way to fix the problem.
Another solution could be to attach my callback to both events zoomend and dragend, to cover paning and zooming cases.
But I didn't find a way to do it.
Thank you for your help.
The best solution I found is to attach the callback to both events:
map.on('zoomend', function() {
// callback
});
map.on('dragend', function() {
// callback
});
Although this way the code is a bit replicated, this is by far the best solution.
For others looking into this, research the options.debounceMoveend option on the invalidateSize function. It's mentioned in briefly in the documentation, but unfortunately it looks like it's only for that function, rather than generally for the moveend event.
[...] If options.debounceMoveend is true, it will delay moveend event so that it doesn't happen often even if the method is called many times in a row.
Reference to the line in source code (L3541)
You can use mouseenter and mouseleave events.
Example:
block.addEventListener('mouseenter', ()=>{
//some code when hover
})
block.addEventListener('mouseleave', ()=>{
// some code when leaving block
})
link to developer.mozilla.org
The 'zoomend' and 'dragend' option didn't work for me. I searched a lot for a suitable option and realized that the "moveend" event fires several times because this event is created every time you move the map. Therefore it is necessary to stop this event. I got out of the situation in this way.
Immediately after the map was initialized, I wrote:
map.off('moveend');
and for me it worked. Now it works fine.
I will be very happy if this is useful to someone.

JavaScript firing on page load instead of event (Bug)

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/
Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​
You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.
You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​

Jquery - Toggle mousedown event without destroying it in the dom?

So on Friday I asked this question and it wasn't well written, let me explain this in better detail:
So this might sound remedial, but I have this container that I include a mousedown event and all I want to do is toggle it without destroying the properties of it.
If it do :
$("#div").unbind("mousedown") // This will just destroy the event.
I was thinking I could move the event to a dom element that isn't being used? And then just switch it back when I'm done...
So this is whats happening : I have a plugin lets just call it Vinny for now
$("#div").vinny(settings);
vinny has a mousedown event that I want to enable/disable via a trigger.
I was thinking I would have a $fn.disableMouseDown function that could disable it, but was curious if theirs a way to unbind a mouseDown on the dom but not destroy it?
If you know of a quick way of doing it help me out! Thanks, Vinny
Put your command inside a function, so you can bind/unbind with one line only, i.e:
function some() {
// some commands
}
$("#div").bind("mousedown", some);
$("#div").unbind("mousedown");
One approach is to just use a named function, bind it when it's needed and unbind it when it's not:
function foo () {
// do something on mousedown
}
// When needed:
$("#div").bind("mousedown", foo);
// When not needed:
$("#div").unbind("mousedown", foo);
I would just stick an if(toggle) statement inside the event. Any reason you can't do that? (only thing i can think of is you wouldn't want to have the event being continually fired over and over, which makes sense - is that the case?)
here is a working example http://jsfiddle.net/samccone/ENzyk/
I think this is a simple and elegant solution
Hey guys thanks for all the ideas, but I kinda did a hacky way of approaching this.
I explainz:
So this plugin on the mousedown is binded in the plugin.init() and in their i defined a local function checks disableValue and in their I just check the dom for a or do a bool return and run that against the other function that was already present in exiting the mousedown event.
Make sense? I hope so too
Thanks,

Setting onclick event removing the handlers attached before

What is the difference betwen setting the onclick function in this way:
obj.onclick=new Function('functionname')
and
obj.onclick=function(){ functionname();};
How can i set the onclick event removing all previrius attached? (using jquery or simply javascript)
i try something like this:
$(obj).unbind('click');
$(obj).click(function() {
functionname();
});
but the unbind seems to remove even the next attached events.
thanks
EDIT:
I set the click event using jquery:
function ON(){
$('#makecorr').unbind('click');//i unbind for some reason..
$('#makecorr').click(function() { OFF(); });
}
function OFF(){
$('#makecorr').unbind('click');//i want to remove prev attached fun
//and replace it with new event
$('#makecorr').click(function() { ON(); });
}
this doesnt work for me, when i click the object 'makecorr' it goes in loop , if i put an alert, it comes up infinitely
but when i use: '
function ON(){
$('#makecorr').get(0).onclick=new Function('OFF()');
}
function OFF()
{
$('#makecorr').get(0).onclick=new Function('ON()');
}
it works. strange where am i wrong?
This pair of lines:
$(obj).unbind('click');
$(obj).click(function() { functionname(); });
...if executed in the order above should result in just the handler you've defined there being attached. If you're seeing other behavior, it must be something else in the script.
Regarding
What is the difference betwen setting the onclick function in this way:
obj.onclick=new Function('functionname') and
obj.onclick=function(){ functionname();};
If you're dynamically adding handlers to an element and you're already using jQuery for other reasons, you don't want to use the onclick property at all; stick to the jQuery API, to avoid really confusing yourself. :-)
Even if you're not using jQuery, you almost never want to use new Function(...). There are only very special situations where you'd need that. Mostly stick to function() { functionname(); } (or just use functionname directly).

Categories