Mouseenter not working in chrome with YUI - javascript

YAHOO.util.Event.on("divName", "mouseenter", function (e) { }
This code is working in all browsers except chrome. Is there any issue with YUI 2.x for chrome.

As an alternative, it worked in all browsers when I used the following code.
document.getElementById("divName").onmouseover = function() {
// code to run when the user hovers over the div
};

Related

javascript toggleclass not working in chrome

Below script was working fine until yesterday 9/4/2019
I found in many search result toggleClass isn't functioning properly after certain version of chrome.
Would anyone have any suggestion on how it should be changed?
I've tried related findings but it didn't work
$(".special_list > li").unbind("mouseover")
.unbind("mouseout")
.bind("mouseover", function() {
$(this).find(".ov_layer").toggleClass("on");
}).bind("mouseout", function() {
$(this).find(".ov_layer").toggleClass("on");
});
toggleClass should bring up intended CSS page
Try this:
$(".special_list > li").unbind("mouseover")
.unbind("mouseout")
.bind("mouseover", function() {
$(this).find(".ov_layer").addClass("on");
}).bind("mouseout", function() {
$(this).find(".ov_layer").removeClass("on");
});

.bind paste (ctrl+v) handler in jQuery

This works great in Chrome:
$('body').bind({
paste : function() {
if(!$('input, textarea').is(':focus')) {
alert('you used ctrl/cmd + v');
}
}
});
However it doesn't seem to work in Firefox ESR (haven't tested latest version). What adjustments need to be made?
jsFiddle

HTML5 Drag and drop bug in chrome

I am trying to implement drag and drop feature in my website, but after few hours of trying i came to conclusion that there is a bug in chrome, for example try this example and see for your self.
It seems that dataTransfer property doesn't exist therefore i'm getting undefined error.
Here is my code:
$(document).on("dragover", "#dropFile", function(e){
e.dataTransfer.setData('text/x-example', 'Foobar'); //error
return false;
});
$(document).on("drop", "#dropFile", function(e){
e.preventDefault();
console.log(e.dataTransfer); //error
});
P.S this does work in firefox.
I've just been dabbling with drag-drop lately, and my primary browser is chrome and things work great so far. The method I use to wire up the events is a bit different from yours
$(".droppable").bind("dragover", function (e)
{
// do stuff here
});
$(".droppable").bind("drop", function (e)
{
// do stuff here
})

Javascript Drag&Drop in Firefox

I implemented a Drag&Drop function for a website. Chrome works fine, IE9 does too (somehow), but Firefox refuses to accept my code someway.
I can click on the draggable object and Firefox fires the ondragstart event, but doesn't go any further. The draggable object does not show up and nothing is following my mouse movement. If I click another time on it, the same thing happens, so Javscript doesn't get killed.
This is my code:
self.allDraggables.on({
dragstart:self.startDragging,
dragend:self.stopDragging
});
self.allDroppables.on({
dragenter:self.enterDroppable,
dragover:self.overDroppable,
dragleave:self.leaveDroppable,
drop:self.dropped
});
this.startDragging = function () {
$('div.insidePopup span.close').trigger('click');
self.createWidget(this);
self.allDroppables.animate({opacity:self.options.light}, self.options.animation);
};
this.stopDragging = function () {
self.destroyWidget();
self.allDroppables.animate({opacity:self.options.unlight}, self.options.animation);
};
this.enterDroppable = function (event) {
event.preventDefault();
$(this).animate({opacity:1}, self.options.animation);
};
this.overDroppable = function (event) {
event.preventDefault();
};
this.leaveDroppable = function () {
$(this).animate({opacity:self.options.light}, self.options.animation);
};
self refers to the main this pointer and since in Chrome and IE9 everything works okay, it can't be something in the syntax, can it?
This is really a problem, I got a presentation on monday and need to fix this.
Any help would be much appreciated!
Edit: I'm using Firefox 11.

$(window).load() in IE?

Recently I ran into a mysterious problem that IE (6-8) is keeping throwing me an error. I don't know if this is the problem, but I think it is.
Open up the F12 developer tools in a jQuery included website, enter
$(window).load(function(){
alert("Wont able to see me");
});
And an error will popup:
"Unable to get value of the property 'slice': object is null or undefined"
Did I do anything wrong, or anything else???
I recently found a work-around for IE not recognizing $(window).load()...
window.onload = function() {
alert("See me, hear me, touch me!");
};
This is a little different than $(function(){}) as it executes after all elements are loaded as opposed to when the DOM is ready.
I recently implemented this in another project and it worked wonderfully.
For anyone still running into this, IE11 (only one I tested) does not fire the the load event if the listener is inside of the jquery ready function. So pull the load function outside of the ready function and it will fire in IE11.
//this is bad
$(() => { //jquery ready
window.onload = () => { //wont fire in IE
cosole.log('window loaded');
}
});
//this is good
$(() => { //jquery ready
cosole.log('dom ready');
});
window.onload = () => { //will fire in IE
cosole.log('window loaded');
}
The latest jQuery (1.7.1) with IE10 and IE9 does not produce such an error for me.
As a side note; If you wish to execute something when the dom is ready;
Try this way;
$(function(){
alert("Wont able to see me");
});
I believe this is the standard convention for attaching a function to domready event.
Reference: jQuery Documentation

Categories

Resources