HTML5 Drag and drop bug in chrome - javascript

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
})

Related

Mouseenter not working in chrome with YUI

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
};

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

jQuery overlay click event trigger navigation click

I've got an overlay set over an image that I'd like to act as previous and next controls. The code below worked fine until I implemented the History.js plugin.. now things are a little funky and I'm not sure why. Chrome's console shows no errors, but the image isn't toggling appropriately.
Thanks for your help.
Test site: http://brantley.dhut.ch/
JavaScript:
$("#ol").click(function(e) {
e.preventDefault();
$('a.prev').click();
});
$("#or").click(function(e) {
e.preventDefault();
$('a.next').click();
});
Could try this:
$("#ol").click(function(e) {
e.preventDefault();
$('a.prev').click();
return false; //added
});
$("#or").click(function(e) {
e.preventDefault();
$('a.next').click();
return false; //added
});
Also, check in Firefox with Firebug console if you get any Javascript errors on page load, might be something not related causing your code to not work correctly

Jquery-Hot key responds to every key

I have downloaded jquery.hotkeys-0.7.9.js plugin and was trying to provide hot key. on pressing ctr+t it should open new url address . i have made this something like this
jQuery(document).bind('keypress', 'Ctrl+t',function (evt){
alert('ctrl+t is pressed');
window.location.href = ("${createLink(controller:'trip',action:'create')}");
return false
});
But this is not working, it resonds to any key in my keyboard,(even if i press a,b,c etc). What changes i should make so that it should respond to only ctr+t ??
even if i delete the downloaded plugin from js folder the result is same\
jquery version i am using is jquery-1.1.3.1.pack.js
According to the example the project gave, you should do this:
$.hotkeys.add('Ctrl+t', function(){
alert("haha");
});
But in Chrome(and maybe some other browsers too), Ctrl+t is the default hot key to open a new tab, I don't know how to overwrite it. So when I test, I replace Ctrl+t to Ctrl+v, and it worked.
fiddle: http://jsfiddle.net/QFT8f/
UPDATE:
This is copied from the source file of hotkey.js:
USAGE:
$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});
$.hotkeys.add('Ctrl+c', {target:'div#editor', type:'keyup', propagate: true},function(){ alert('copy anyone?');});>
$.hotkeys.remove('Ctrl+c');
$.hotkeys.remove('Ctrl+c', {target:'div#editor', type:'keypress'});
Your code is correct based on the documentation, but the plugin does not work as expected (at least in Firefox). I would ditch the plugin and just handle it based on event attributes.
Here's a fiddle with the plugin installed where you can see the event firing when any key is pressed, and how you would limit to only run certain code when 'Ctrl+t' is pressed. Note: you have to click on the output panel to give it focus for the key events to fire.
JavaScript code:
$(document).bind('keypress', 'Ctrl+t',function (e){
if(e.which==116 && e.ctrlKey){
alert('Ctrl+t was pressed');
return false;
} else {
alert('Any other key. Bad code...BAD!');
}
return true;//Pass the event on
});
UPDATE
I had previously added the plugin when I was testing, but it appears like I lost it somewhere when I was fiddling, so the example above works in plain JQuery (I'd make the second parameter the function though). Here's the fiddle with the jquery.hotkeys-0.7.9.min.js resource added with the same code, and for me it throws an "elem.getAttribute is not a function" JavaScript error when run with JQuery 1.6. Another reason to ditch the plugin!

Categories

Resources