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!
Related
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.
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.
I am working on a custom application for the iPad that runs as a homescreen app, but is made in all CSS/HTML/Javascript. (not using the SDK here)
I have run into an issue with a calculator I have built into my page not hiding the keyboard. No matter what I do, the keyboard stays up. I have searched this extensively and tried everything I can think of, but the keyboard stays up no matter what I do.
Explanation of what I have tried to hide the keyboard:
I have tried to blur all input fields to remove focus. I have tried setting focus onto non-text field items.
There were several threads on Stackoverflow from earlier this year/last year that suggested both of those options, but they do not appear to be working anymore.
To test further, I put a blank a href="#" on an img that was above the calculator, so that I could set focus on a non-entry and see if that would auto-minimize the keyboard. When I tap that item above the keyboard the focus changes and I am no longer in input mode, but the keyboard stays up.
Did Apple break this functionality with the latest update? If so, is there a work around?
Here is some example code that doesn't work:
$('input').blur(function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
That code successfully removes focus from the inputs, but the keyboard stays up. I have also attempted the inverse of that by just .focus ing on a non-text element. And additionally, as stated previously, I have straight-up just added a non-text element on the page and that still doesn't hide the keyboard.
Thanks so much for any help, and feel free to link/abuse me if I have mistakenly reposted. :)
you should be able to blur it just by using something like this
$('input').blur();
you should put this inside the function/procedure that happens when you want it to disappear, unless your looking to disable it completely?
document.activeElement.blur() inside a try catch block works for me. (Possibly you also need a setTimeout? I didn't need a timeout, and it is important to avoid timeouts wherever possible because they can easily cause nasty heisen-bugs!)
Also double check that you are not calling focus() somewhere within a mousedown or click event (which causes the keyboard to show). You can use a console.log(document.activeElement.tagName); or similar to help find what has current focus.
However if you don't find a solution then I am very interested in seeing how you get the keyboard to stay up... I have a use for that :-)
Every once in a while, some feature on a site I use will be broken/have annoying behavior that I want to change with a greasemonkey script. When I try to debug the site using firebug to find out what code is called from an event by using "Break On Next", firebug just breaks immediately to show some jQuery code that is always running. As an example, http://pc.ign.com/ does this. Is there any solution to this? I just want to see what code is running as a result of a mouse click or keypress but it's impossible to use "Break On Next" since jQuery is always running something.
More info you can find on the link I've supplied there are also more debugging options provided. Hope that will help you
http://thecodecentral.com/2007/08/01/debug-javascript-with-firebug
When dealing with bound jQuery events, I highly recommend firequery
It will show jQuery event bindings in the dom inspector, and let you click through to the associated code.
This is not a particularly close solution however, and i myself often find myself following your above process.
I have a series of select elements in a form on a mobile site. These select elements are inside a scrolling pane handled through JS and CSS3 transforms, so getting a touch/click/whatever event to register on the selects was enough of a pain in the first place. However, I'm now finding, on android only, that even though the selects are getting clicked, and are getting focus- they simply refuse to open. I'm 100% sure that the selects are getting their focus event (through debug), so honestly, I am completely stumped. Without the debug, there are no other focus/blur events on the selects. It works fine on iPhone... any ideas?
I've been banging my head against the wall with this same issue. It seems to be isolated to Android 2.1/2.2 (and maybe 2.0?). The selects work fine in Android 1.5/1.6. I even created a simple page that just changes the select's display style from none to block and the select still doesn't open consistently. Oddly, sometimes after page refresh it might work, then after another refresh it might be broken again. As you stated, focus and click/touch events do fire from the element, so I'm at a loss as to what the issue is.
Sometimes if I zoom the page I can get the select to open, but even then the value selected isn't represented in the select element on the page.
I submitted a bug report to the Android dev team, but even if it's fixed in future builds the problem will still exist in 2.1/2.2.
Anyone find a workaround for this yet?
//---- Update ------
If you use a webkit-transition to show/hide the element, attaching the following event to the element appears to fix the select inside of it:
.addEventListener("webkitTransitionEnd",function(e){
this.innerHTML = this.innerHTML;
},false);
I'm not entirely sure why this works, but re-writing the element to the DOM seems to help for some reason. Tested in Android 2.1/2.2 simulator, EVO4G and MyTouch.
I found the solution in this answer by a.meservy. Here is the answer, copied for everyone's convenience.
In this case the problem was actually caused by jQTouch. To fix it, just comment out these 4 lines in jqtouch.css
Under "body"
/*-webkit-perspective: 800;*/
/*-webkit-transform-style: preserve-3d;*/
Under "body > * "
/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/