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.
Related
We have menu which works on onclick/on mouse enter and on mouse leave. All of sudden after chrome got updated the menu is not working.
Especially windows XP/Chrome 40. Strangely not showing any errors is console. Please help us to get out of this.
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeft = document.getElementById('showLeft'),
navigationEdge = document.getElementById('navigationEdge'),
navigationMenu = document.getElementById('cbp-spmenu-s1'),
body = document.body;
$("#navigationEdge").mouseenter(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
$("#cbp-spmenu-s1").mouseleave(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
showLeft.onclick = function () {
classie.toggle(navigationEdge, 'active');
classie.toggle(this, 'active');
classie.toggle(menuLeft, 'cbp-spmenu-open');
};
Here is the JsFiddle.
Yes, it's a Chrome 40 bug. I reported it yesterday, some functions aren't working (even in Developer Tools, the Toggle Element State isn't working).
Only thing I can say is... let's wait :)
BTW, test your fiddle in Firefox, here in v35 it worked well.
I have it running fine on safari right now and not always working in chrome:
app.controller(.... function($window){
$window.focus();
$window.onfocus = function(){
$scope.inFocus = true;
};
$window.onblur = function (){
console.log("onblur");
$scope.inFocus = false;
};
});
The console.log is not always triggered. I was wondering if that was a bug or something I am doing wrong?
Update: I tried the solution given by #Gabe. It is still breaking sometimes, I am wondering if another action is interfering with it. It does look random though...
Update 2: I still don't know how it gets stuck, but I know how to get it unstuck:
I click on an input in the window to focus it.
I click outside of the input to unfocus.
I switch tab and back in. It works again.
Try using the API for angular.element instead
angular.element($window).bind('blur', function (){
console.log("onblur");
$scope.inFocus = false;
});
http://plnkr.co/edit/khYHeJlvn2uCzKeTjndM
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
})
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
I'm using Jquery Mobile, and my touch events are being triggered twice. At first I thought it might be an overlap between mouse events and touch events, but I tried to unbind mouse events on tablets/smartphones and the events are still being triggered twice.
Here is my code
//Tablet Features
var eventType = {
swipeleft: '-=100',
swiperight: '+=100'
}
$('#navMenu').bind('swipeleft swiperight',
function(e) {
$('#prbBtnHolder').animate({left:eventType[e.type]});
//alert(e.type);
}
);
//Device Detection
(function () {
var agent = navigator.userAgent.toLowerCase();
var isDevice = agent.match(/android/i);
if (isDevice == 'android') {
//alert(isDevice);
$('*').unbind('mousedown').unbind('mouseout').unbind('mousemove').unbind('mouseup');
}
})();
I've been trying to figure this out for a while, please help if you have any ideas.
UPDATE
I managed to solve the problem locally by placing the touch handlers outside the .ready() method. However, when i run the page on the server, the double trigger happens again. Now I'm completely stumped. Why are two identical pages (literally identical) behaving differently locally and on the server?
I had the same problem and fixed it with a little tweak around... I don't recommend this for the exact solution but my take you out of the problem fast.
I define a global Flag
var bDidPan=true;
and inside the trigger wrote the following:
if (bDidPan) {
bDidPan = false; // IT'S IMPORTANT TO PUT THIS FIRST
//code to execute when triggers
}
else
{
bDidPan = true;
}
and that did the trick. You can do the trick with numbers (It worked better with numbers for me!)
Hope it helps!
This sounds like you're putting your scripts into the <body> tag. If you do that, they'll get run twice. I've had this very same thing happen and went a little balder for the trouble and frustration. Make sure all your scripts are inside the <head> tag.