In IE, for example, when you press the left button on an image and keeping it pressed try to move the mouse, the drag n' drop action is taking place; how could I prevent this default action so that doing that way nothing will happen. I am building an image cropper, so you should understand why I need that. I am not much interested in knowing how to do so with help of jQuery or the like. As I study JavaScript, I prefer coding in plain-vanilla JS. It is important for me to learn how to make it cross-browser if there are any differences for such a thing.
Just like August's, but plain JS:
var imgs = document.getElementById("my_container")
.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmousedown = function () {
return false;
};
}
If you want to do it 'new-style', google for 'addEventListener()' (all browsers but...) and 'attachEvent()' (...IE) methods.
Here's one in jQuery:
$("#my_container img").mousedown(function () {
return false;
});
http://www.google.com/search?q=cross+browser+event+hooking will probably teach you everything you need to know about cross browser event hooking. I don't know how to hook events without a framework, because that's an edge case IMHO. In The Real World (tm), you'll always use a framework.
The core here is that you have to stop the mousedown event from running. This will make drag and drop impossible, if you hook the event on text you won't be able to select that text, and so on.
If you're building an image cropper, you're going to put some kind of overlay on the image, probably a relatively or absolutely positioned div, inside of which you will "draw" a rectangle when the user clicks, holds and drags. This will make it impossible for the user to drag the image itself, so no fix for that is needed.
Even if you do not use an overlay, you are still going to hook the mousedown event - there is no other way to implement a JS cropper as far as I know. Hooking that event will by itself be enough to prevent the browser from initiating a drag and drop action.
I'm using code similar to the following to prevent dragging, which has the advantage of targetting actual drag-related events rather than the generic mousedown (which could conceivably have side-effects). Works in all the mainstream browsers except Opera.
function cancellingEventHandler(evt) {
evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else if (typeof evt.returnValue !== "undefined") {
evt.returnValue = false;
}
return false;
}
function disableDragging(node) {
node.ondragstart = cancellingEventHandler;
node.ondraggesture = cancellingEventHandler;
}
disableDragging( document.getElementById("anImage") );
Related
So I have my controls set up as space bar to jump but I want my HTML5 game to work everywhere so I need to change it to mouse/touch. Mouse/touch doesnt have a keycode so whats the most optimal way to do it for this code? Do I need to do mouse and touch separately?
if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) {
player.isJumping = true;
player.dy = player.jumpDy;
jumpCounter = 12;
assetLoader.sounds.jump.play();
}
// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
player.dy = player.jumpDy;
}
You are talking about touch events in JavaScript. You will have to add an event listener and catch if the user touches screen. Here you can find a well documented tutorial in how to use it on both touchscreen and mouse.
Check out the first answer, you will have to do it like that. You will have to add an event listener on the canvas itself, like the guy did it on myDiv.
Here is an example I wrote (don't mind me being weird, please):
<div id="fakeCanvas">
Click or touch me!
</div>
<script type="text/javascript">
var fakeCanvas = document.getElementById('fakeCanvas');
function methodToInvokeForClick() {
alert('I have been clicked!');
}
function methodToInvokeForTouch() {
alert('I have been touched!');
}
fakeCanvas.addEventListener("click", methodToInvokeForClick, false);
fakeCanvas.addEventListener("touchstart", methodToInvokeForTouch, false);
</script>
I think you can take it over from now. What I did to the fakeCanvas div, you will have to do the same to your canvas by giving it an id etc. Good luck!
I have been using the jQuery UI mobile library and have the following method bound to an element for 'taphold':
// Apply class to annotations details to initiate animation
$('.detailsDiv').on('taphold', function ()
{
var openingID = $(this).parent().attr("annoID");
var showControls = true;
if ($(".annoEditableTextArea.annoName").length > 0)
$('body').append(pThis._getBlackoutOverlay(id));
}
else
{
$(this).off('mousedown');
pThis.base.annotations._setAnnotationDetailsActive(openingID, showControls);
}
});
This hooks the event just fine. However, on iOS safari if I click on a textbox from here after the 'taphold' event does not fire. I've tried to reattach the event after an unfocus of a textbox but still no luck.
Has anyone had any similar experiences with this sort of behavior?
Many thanks
I could not pin point the exact reason behind this, however I found a similar library from some guys called zauberlabs:
https://github.com/zauberlabs/jquery-tap-and-hold
This was a straight swap, with no extra coding required and solved the problem.
Many thanks,
I'm trying to set up an event to display some sharing options using touchstart & touchend. This is a pretty standard function in native apps but I haven't seen it much on the mobile web. The event will allow users to tap the main content area of the site and it the tap is longer than 1 second then an options box will slide on screen displaying options for sharing the page content.
The function below works for the first event, but if users trigger the event more than onces it fires without the 1 second requirement to fire the event.
Can anyone suggest a better approach or see why the timer isn't working every time?
if ( typeof ontouchstart != 'undefined' && typeof ontouchend != 'undefined' ) {
var touchStartOrClick = 'touchstart', touchEndOrClick = 'touchend';
} else {
var touchStartOrClick = 'click', touchEndOrClick = 'click';
};
function shareTog(){
$('.sharing-pop').animate({width: 'toggle'});
}
var touchTrigger;
$('#content').bind(touchStartOrClick, function(){
setInterval(function(){
touchTrigger = true;
}, 1000);
}).bind(touchEndOrClick, function(){
window.clearInterval();
if(touchTrigger == true){
shareTog();
touchTrigger = false;
}
});
I'm aware this would be much easier to do with jQuery Mobile but unfortunately it's not an option.
zepto is a good choice for you. Its touch module offers a good event handler.
Or you can check the source code of zepto touch
I catch your drift but I dont think it's a good solution in a web browser.
On Android for example, you already get a popup when you're longpressing content on a webpage.
You will have to block that event handler, but that means you're going to get native.
Using the dragenter event I show a dropzone on the webpage to have dropped files upload quickly, and it all works well. However, the dropzone also pops up when dragging selected text. How to tell the difference early on?
I know that the drop event exposes all file contents to be iterated using dataTransfer.files, but that's too late. I need it at dragenter, only I see the files array to be empty at all times.
I need full control over look & feel I am not looking for an existing lib.
I can see different values for event.dataTransfer.Clipboard.effectAllowed when dragging text versus files, but values also differ per browser (Chrome vs FF).
MooTools is in place, if that helps.
Okay, I made enough progress to get differentiating working in Chrome and Firefox (3.6+). It's probably not foolproof but in case anyone might find it useful, here's the code:
var isFileTransfer = false;
if (evt.dataTransfer.types) {
for (var i=0; i<evt.dataTransfer.types.length; i++) {
if (evt.dataTransfer.types[i] == "Files") {
isFileTransfer = true;
break;
}
}
}
I needed to determine if a file was being dragged into the browser from outside, versus an image being dragged from within the browser window. I did it by listening for dragstart on the document object. When a file is dragged into the browser from outside, the dragstart doesn't fire. So, if it does fire, it means something within the same page is being dragged.
document.addEventListener('dragstart', function() {
samePageDrag = true;
}, false);
document.addEventListener('dragend', function() {
if (samePageDrag) {
samePageDrag = false;
}
}, false);
With this, you can check the value of samePageDrag after a dragenter or dragover event to determine if the thing being dragged is from outside the browser or not.
See docs here: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
If any files are included in the drag operation, then one of the types will be the string Files.
This is a one line solution
// returns true if dragged item is not a file
// returns false if dragged item is a file
event.dataTransfer.types.indexOf('Files') === -1
// returns true if dragged item is a file
// returns false if dragged item is not a file
event.dataTransfer.types.indexOf('Files') !== -1
I wrote a small function to detect files dragging.
function isFileTransfer(evt){
return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";});
}
I have a normal search box on my webpage. It is filled with text: Search this website
This text is removed when you click into the box to type your search query:
onfocus="if(this.value=='Search this website') { this.value=''};
But how can I detect when someone drags text from the page onto the search box, as I often do myself? onfocus is not triggered and the previous text remains.
You need to use the ondrop event, which will only fire if the ondragenter and ondragover events are cancelled. Turns out it's a bit trickier than that because the behavior is different in Firefox than IE, Safari and Chrome.
(function () {
var inp = document.getElementById("test"),
chg = false;
inp.ondragover = inp.ondragenter = function () {
chg = inp.value == "Drop here";
return false;
}
inp.ondrop = function (evt) {
evt = evt || event;
if (chg) {
this.value = evt.dataTransfer.getData("text")
|| evt.dataTransfer.getData("text/plain");
return false;
}
}
})();
Example - Firefox 3+, IE5+, Chrome and Safari. Near as I can tell, Opera doesn't support the event. At least you can get it working for 95% of your visitors though.
Drag Operations - MDC
Have you tried to use the onchange event?
BTW, there is a nifty little jQuery plugin called jquery-defaultvalue which handles all the corner cases for you. If you're using jQuery anyway, it's worth a look.
See - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html , but page on the russian language (Google Translate would help).