HTML 5 drag and drop in firefox not working as expected - javascript

I am implementing a file processor in JS and HTML 5 and it is working as expected in Chome, but not in Firefox.
Here is the jsfiddle: http://jsfiddle.net/vapocalypse/G9QbX/
In Firefox, the drop event is forwarded to the browser, which opens the file, not being processed by my script. It behaves as if I dropped something over an empty tab.
What am I doing wrong? I have tried changing from jQuery to native DOM using getElementById and overriding the ondrop method, but same results...
Thanks,
Apoc

As far as I can tell, your basic problem is that you're not cancelling the dragover event on the the element you're trying to capture the drop event on. The drop event is ignored in this case. Here is the code I added:
$('#topDiv').bind("dragenter dragover", function(e) {
e.preventDefault();
return false;
});
I also removed the $(document).ready form your code and just set the jsFiddle to run all the JS onDomReady instead, but I don't think that made much difference. Here's the example.

Well, see http://jsfiddle.net/G9QbX/75/. It's based on your's example. Don't know why, but dragover event is not boud via $.bind or addEventListener functions in FF14. The example is very dirty, but it works. I will write if i find a better solution.

Related

Angular issue with Drag and Drop

I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2
After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.
For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz

jQuery: Prevent page scroll when user's finger touches an element

I'm using the following jQuery plugin: http://willowsystems.github.io/jSignature/
I'm trying to do something very simple which is stopping page scrolling when the user's finger is inside a signature area (the page movement when writing a signature on the phone is excruciatingly bad to the point where you can't write your signature at all). I have tried the following which is not working in Firefox and I'm not sure why:
$('.signature').on('touchmove', function(e) {
e.preventDefault();
});
I have also tried this which isn't working either:
$(document).delegate('.signature', 'touchmove', false);
I've searched for hours and I can't seem to find anything that works. If anymore detail is required please let me know and I will happily append to the question.
Thank you very much for everyones help.
edit: I'm using the latest version of Firefox on the phone.
try to use the e.preventDefault() on the ontouchmove of the html element.
<div class="signature" ontouchmove="event.preventDefault();">
</div>
this example works for me:
http://jsbin.com/pulul/1/edit?html,css,output
Same problem in field on Android browser. Capturing signature gets dots instead of sig. So, testing in browser I see the focus is never lost from prior field when i click with mouse into jSignature. So, try something like this:
onblur="if(this.value.length>1) document.getElementById('CustomerSignature').focus()"
Welp, with that you'll see the onblur DOES NOT FIRE when you touch your jSignature but does fire when you touch your other fields. There ya go. Have not been able to reproduce the exact bug reported to me yet on the tablet; but I think the scroll is being sent to ANOTHER element.
So, fix is to force the focus to change to the jSignature. That's what I think.
For now, I fiddled around with the HTML so my last field is a select and use the onchange to set the focus to my jSig.

How to check event Listeners on an element in IE9

I have a page that has some td elements in a table that the user can click and drag to reorder. The page is built using prototype. In everything but IE9, this works, but in IE9, when I try to click and drag, I just highlight some of the things on the page. My suspicion is that the handler isn't actually attaching to the td element.
Is there a way to check what listeners are attached to an element in IE9?
(The code is also not in a place that I can share it, which is why I have not posted any.)
Edit: It turns out I was actually using prototype 1.6.1, and the problem was ultimately caused by that not knowing that IE9 and IE10 are less awful than < 9. It's going to be a much bigger fix than I thought.
The latest PrototypeJS (1.7.1) stores the event observers in an Event Cache
So for example a <div> with id 'mydiv'
<div id="mydiv"></div>
After you create an observer via the observe() or on() methods like this
$('mydiv').observe('click',function(){
alert('Click Happened');
});
The click property of the Event cache will be set like below
Event.cache[$('mydiv')._prototypeUID].click
However this might not be the source of your problem as you said it is working in all other browsers except IE9 - is there a way you can extract some of the code and put it into a JSFiddle and then post the link?

How do i turn this jQuery to javascript?

I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.

Drag-Drop disabling not working in Safari/Chrome WebKit Browsers

I have created a Rich Text Editor Web application using document.designMode="on" in an iframe.
I want the selection of text to work but want the drag and dropping of text to be disabled.
I tried this:
evt.dataTransfer.effectAllowed="none";
evt.dataTransfer.dropEffect = "none";
This works fine in Firefox but it doesn't work in Safari/Chrome WebKit browsers.
I have tried to put this in every event: dragover, dragstart, drag, dragenter etc. but to no avail. Putting evt.preventDefault() in mousedown or mouseup addEventListeners disables the selection of text which I don't want. Please help.
Ok here I can see the same issue as mine, I've been working on these last month and I just got lucky to solve using using trial and error. I was using Asp.net MVC and Safari and Chrome does not include scripts created on the views that has content place holders mapped in the header of the masterpage if you understand what I mean.
In your scenario you might need to check your javascript if it was successfully invoked by the time that the function was called. Like for example you add a library
make sure that it is on the header and when you try to call a function say for example:
function Drag(){
// Alert to prove that this Drag method was really called
alert("Drag method was called");
}
Using alerts will help you to check if your function was successfully executed although alerts are annoying but if you use it wisely it would surely help you in debugging. And most of the time it is also helpful if you can put all your scripts in the header part although some situations can't be avoided.
This worked for me in my Safari/Chrome javascript issues.
Please vote if it helped you. Thank you!

Categories

Resources