The document.ondrop seems to work in chrome, but not in firefox?
Attached is an example:
http://auth.letschat.info/test2.php
If you drop a file on to the page it should pop up an alert box. However it doesn't work in firefox, but does in chrome.
When I use firefox console the document.ondrop handler is correctly set.
Assuming the original javascript looks like this and works in Chrome:
document.ondrop=function(event){
alert("hello");
}
It can be changed to work in both Firefox and Chrome. Firefox requires you to stop the default action from occuring when you drag a file over, which can be solved by using the ondragover event. The following javascript code will also work in Firefox:
document.ondragover = function(event){
event.preventDefault();
}
document.ondrop=function(event){
alert("hello");
}
I found this solution by looking at w3schools and looking for the differences between their simple example and your code.
From html5rocks on slide #18 there is also an html5 example of another way to use drag and drop by adding the listener to the page.
Related
I'm having problems with navitation on safari using nodejs with expressjs and javascript. I have links with a function on its onclick event like this one (simplified version):
<a href="#" onclick="goToPublicView('/home/main')">
I have this method defined on javascript (is important to know that this is a reduced example. Is necesary to have the onclick event with a function for doing more stuff rather than navigation):
function goToPublicView(viewUrl) {
window.location = window.location.origin + viewUrl;
}
When the link is clicked on chrome or firefox it works perfectly, but on safary this method doesn't seems to work (no error messages that I could see).
If I write the method on console it works
goToPublicView('/home/main');
I don't understand what could be the problem. Any idea?
it seems to be any problem with browser. I reinstalled safari and it works fine.
I'm porting my Chrome extension into Safari, and I've encountered a little issue I would like to ask about.
Does anyone have an idea why the following code doesn't work in Safari, but does in Chrome?
shadow.addEventListener('click',function(e){
console.log(e);
if(e.target && e.path[0].id == "share"){
alert("clicked");
}
});
This gives me the following error in Safari: TypeError: undefined is not an object (evaluating 'e.path[0]') and the console.log doesn't give me anything useful either.
I prefer this way instead of adding a seperate click event listener for each element, but unfortunately it doesn't seem to work in Safari, or should I change something to make it work in Safari?
I should mention that I have added the event listener to the shadow dom.
I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});
I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.
I'm just trying to understand a difference between IE, Chrome and Firefox. I have the following code on a page:
$('object').live('click', function(){
alert('Fired');
});
I then populate the page with some Flash controls (in my case, I'm using Uploadify). When I click on the Flash control, I see the alert in Firefox 4. However, I do not see the alert in IE8 or Chrome (I havent tested any other browsers).
Is there something obvious I'm missing?
Many thanks.
Could we see more code? This seems like it should work, so I can see why you're puzzled. Could be a syntactical error in your markup. Maybe try something like this, unless you have a specific reason for the live().
$('object').click(function() {
alert('Fired!');
});
I am trying to trigger the onScroll event this way using prototype:
Event.observe(document, 'scroll', function(){
alert('boo');
});
It works perfectly on Firefox, but nothing happens on IE. Does anyone know why? and if there is another way to do so?
Thanks
Try attaching it to the window instead:
Event.observe(window, 'scroll', function() {
alert('boo');
});
Works for me on IE, FF. Honestly, I don't know why it would work attaching it to the document.
Don't know if anyone is still following this answer, but i thought i would put down some of the information i found. In general the scroll event is supported on "window" on the following browsers below...
IE 5,6,7,8 (don't know about 9)
FF all versions
Safari 3.0.. up
Chrome
Opera 9.0.. up
However, when it comes to the document, it is not supported on any of the IE versions. Now, the funny thing is the Iphone 3G browser is the reverse of IE. The scroll event only works on the document. For more info on this, check out http://www.quirksmode.org. This site has alot of good stuff on event handling. Hope this helps someone...