Google maps is an impressive display of what you can do with JavaScript and Ajaxy-goodness. Even my mouse scroll wheel and right-click works to provide specific functionality.
In the standard HTML spec, I don't see an onmouserightclick event or similar basic JavaScript handling for the mouse wheel. Maybe I am looking in the wrong places.
I presume these events are browser and platform-specific (or "sensitive" instead of specific). And am wondering what the basic, plain HTML and JavaScript are needed to exploit these events, in ALL browsers.
Naturally, when designing a site these features have to be extra since some people still use the one-button mouse.
How to I use events with the mouse wheel and right-click? I'm looking for sample code.
EDIT: Thanks for the jQuery code guys! The system-developer in me still has questions and doubts though. Mainly I'm concerned about platform-limitations that would seem to apply here. Is there a browser that some of these features don't work in? Does the mouse wheel up and down events also allow for mouse wheel click events? I would just expect there to be some limitation out there and am wondering if it's officially documented. I want to know how it works at a low level. I am glad to see it is easy in jQuery, another reason for me to get into it.
Mouse Wheel: ol' no-jquery-or-prototype-library method: here
Prototype method: Here
JQuery method: Here
If you're using jQuery, it's extremely simple to do things with the right click menu :
$(document).bind("contextmenu",function(e){
alert("You right clicked!");
return false; //disable the context menu
});
Otherwise, you can use this script, provided by quirskmode:
http://www.quirksmode.org/js/events_properties.html#link6
As for the mouse wheel, this a great script that I've used in the past:
http://adomas.org/javascript-mouse-wheel/
You said cross-browser so you must mean jQuery :P
http://www.ogonek.net/mousewheel/jquery-demo.html
http://abeautifulsite.net/notebook_files/68/demo/
I bet you can find JavaScript that do that, but I think its always better to go with component(or plugin) because it could have bugs(or maybe cross-browser bugs) and the person that made it would get an email from somebody that is using that and fix it. With pure JavaScript, you always should check it in every version of every browser.
Related
I'm developing a website for someone who requested a dynamic sliding page when you scroll (i.e. like this). At first I was thinking it was something I could use CSS transitions for, but then I realized there might be a JS tool out there which could make it work.
I discovered this page of dynamic movement examples with an associated library on github, but I'm not quite sure how to make it work. Basically, I'd like the page to listen for the event of a scroll, and then slide up a section of the page in the same way as the example above. When looking through the code for the dynamic movement examples, it seems like it's a a bunch of cases in the JS file that get used somehow in the event of a button press.
Please, if anyone is familiar with building something like this, please let me know how it might be done.
I would encourage you to make use of fullPage.js.
It is nowadays the most popular library for single scrolling pages. It has plenty of options, methods and callbacks and you can almost do whatever you think of with it.
Compatible with old browsers, kinetic scrolling (Apple laptops) and touch devices.
The W3C spec doesn't explicitly use the word touch.
This is a popular answer around the internet but
I can't get it to work
That code is a couple years old and partially deprecated
Manually converting touch events into mouse events does not work (or is too complicated +it will break in future browsers). See code below as an example:
myDragElement.on("touchstart", function (e) {
e.preventDefault();
drag.trigger("dragstart");
});
myDragElement.on("touchmove", function (e) {
drag.trigger("mousemove", e.originalEvent); // what event to send to .trigger? does it even matter?
});
What is the most native way of accomplishing drag and drop on a touch device? I can write the code manually or find a plugin but a native solution would be nice.
I have some sliders and they require to control touch, drag, etc, but some of them doesn't work properly on touch device at all since they just use the native event from HTML 5. I've found the useful plugin to handle this thing.
Try it
http://eightmedia.github.io/hammer.js/
GitHub Wiki
The source has included the demo to see what event would happened when you will run it on touch device
I had success using jQuery's HTML5 drag drop features along with Touch Punch. Give credit to roman m for recommending it.
https://stackoverflow.com/a/16865205/705483
I'm a teacher at a school which has an SmartBoard interactive whiteboard in each classroom. I'm trying to create a web application for kids to use that basically involves dragging and dropping various elements around a web page. I've actually already created one that works fine when used on a computer with a mouse. However, on the SmartBoard, the drag-and-drop really lags, and sometimes fails completely.
As far as I can tell, the whiteboard doesn't mimic the onmousedown capability, and instead all touches are interpreted as onclicks. Is there any way around this? I can't think of a way to implement drag-and-drop without using onmouseup and onmousedown, nor do I know of any way to make the whiteboard interpret the input differently.
The only way I can think of to get around this is to write the application in Java, since I know from experience this will work. However, it's obviously a lot more work, so I'd rather not do it if I don't have to.
First thing I would do is log all the events that the smartboard allows you to register:
function log(e) {
console.log(e.type, e.pageX, e.pageY, e);
}
document.addEventListener('mousedown',log,false);
document.addEventListener('mousemove',log,false);
document.addEventListener('mouseup',log,false);
(console.log is native to Google Chrome, you may need to install plugins to other browsers.)
This will help you decide what to do. A possible solution would be to use a double click to trigger the start/stop of the dragging motion.
This might seem like a really dumb question, but I am writing an application and I have come across where my mouse-over, mouse-click and mouse-hover need different events bound to them. Now on Internet Explorer, Firefox, and Safari. It all works as expected.
However, on my iPhone the actions will not trigger. Now my question is are their any specific ways I can have the Mouse-Over essentially be fired when I hold my finger down and trigger an event?
An example where this doesn't work is right on this website when you hover over a comment it is supposed to display the +1 or flag icon.
I am using jQuery.
The answer is in the documentation that Remus posted. If you add an onclick = "void(0)" declaration, you will instruct Mobile Safari that the element is clickable, and you will gain access to the mouseover event on that element.
More info here
I think you need to reconsider your design for the iPhone (and any mobile for that matter). iPhone web interfaces shouldn't depend on mouse-overs and hovers, as they just complicate the interface significantly.
I strongly recommend that you design a new interface that is optimized for mobile viewing, that don't require clicking on small tiny arrows just to show more options.
Mobile Safari has no mouse and hover events (at least not in the usual accepted sense), they are explicitly called out in Creating Compatible Web Content Unsupported iPhone OS Technologies:
Mouse-over events The user cannot “mouse-over” a
nonclickable element on iPhone OS. The
element must be clickable for a
mouseover event to occur as described
in “One-Finger Events.”
Hover styles Since a mouseover event is sent only
before a mousedown event, hover styles
are displayed only if the user touches
and holds a clickable element with a
hover style. Read “Handling Events”
for all the events generated by
gestures on iPhone OS.
Yeah...I don't think anyone posing the question actually expected the device to "sense" a hover or mouseover. Actually you'd have to be pretty arrogant to assume someone actually meant that. Some method of triggering those event handlers is what is desired. I can definitely see a use for them in "hint" text appearing above items.
And whomever said not using mouse events makes a cleaner, simpler experience is taking their own opinion a bit too seriously. Those can greatly enhance a web page/application experience or make them worse. It's a matter of prudent usage.
The only answer anyone provided here worthwhile is whomever said it is best to have an alternate site optimized for mobile. Or possibly use a content management system that generates the page based on the browser type (similar to how Wikipedia works).
Congratulations on discovering the first thing about touch screen UI design. The bad news, is that what you want just is not going to happen.
The good news is that this will force you to make a much easier interface, for both iphone users and regular web users.
You simply cannot have a mouseover or hover functionality on touch screen devices, unless you can move a virtual pointer (though no touch UI offer that kind of functionality), but that would defeat the point of a touch screen UI.
Touch screen UI's are a paradigm shift and retro-fitting mouse-pointer UI interfaces back into touch UI design only limits and damages your solution.
Writing a mousehandler in javascript seems fairly straightforward, although I can imagine it being easy to get a lot of edge cases wrong.
The good news is, someone wrote a javascript mouse-handler/emulator whatever -- as a bookmarklet. It's called iCursor (not to be confused with the pointless mac app of the same name).
The bad news is, the guy's site (icursor.mobi) has gone off the air, and I can't find a copy, so I can't tell you how well it works. Here's a review (because I can only post one link):
What apple should have done for the iPhone/iPad was make one-finger panning move a virtual mouse pointer, and two-finger panning move within the viewport (as one-finger does now).
Two finger panning is easy; the only reason I can imagine for Apple not doing this is that they actually wanted to break 50% of the websites in the world. Seriously. It's right up there with the evil manipulative attempts to break standards that Microsoft has been doing all these years.
You're a web developer. What do you hate most? Internet Explorer. Because of all the extra headaches it causes you. Well, Stevie had to have his "me too" moment, and you're going to pay for it.
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.