Is there any possibility to tell Firefox to use the mousewheel für scrolling through the select element. In firefox after selecting another value the select element looeses its focus, and in IE it doest loose its focus, so if i use my wheel the onchange event is fired.
Try here.
Is there any solution?
Thank you
There's a tutorial on how to act on mousewheel events at http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel.
Mootools is a good way of engaging this as well: see the tutorial at http://demos.mootools.net/CustomEvents
But, I'd recommend against using Javascript to change how a browser behaves. Firefox users (whether they're aware of it or not) learn to expect certain behaviors, so changing that would make your site harder to use. Jakob Nielsens comment on 'the scroll wheel's revenge' comes immediately to mind.
There is this really cool jQuery Mouse Wheel Extension
Adds mouse wheel support for your application! Just call mousewheel to add the event and call unmousewheel to remove the event.
Example
Related
Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:
The problem is that this doesn't seem to set off any JavaScript events.
I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.
I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:
$("#custom-element-hover").mouseover();
Which feels wrong (and is a little cumbersome).
Is there a better way to do this that I don't know about?
In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:
You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.
If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.
You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.
I can share with what I do in this kind of situations. I open elements tab in chrome debugger and right click on target element. Then I choose "Copy CSS path"
If you do this you will get something like this
#mdhelp-tabs > li:nth-child(1)
And this string can actually be used as legimit selector for jQuery. So this
$("#mdhelp-tabs > li:nth-child(1)")
will give jquery object with target element of dom in it.
So you would not have to assign an ID to every single element you want to deal with.
I am not sure but you can use console to handle tooltip
On our page we have some iframes in a long horizontally-scrolling <div>. If the user is using a mouse they can scroll with the scrollbars and we would like them to be able to select text within the iframes. If they are using touch only however, the scrollbars are a hassle and I would like to overlay a transparent element over the whole thing to give them the ability to scroll easily by dragging, this of course sacrifices the select-text feature but makes sense in that scenario.
Which gets me to my question, is there a way to reliably detect if a user is interacting with a webpage via a mouse?
Everything I've seen on detecting touch or mouse is that touch will broadcast mouse events so it is very difficult to detect touch OR mouse (not to mention that you can have both). My problem is simpler - it is whether the user has interacted with the page via a mouse.
Can anyone think of a way to check this reliably?
A mouse can do one single thing a touch device can never do - move without having any buttons pressed. So I'd just install an onMouseMove event on page load, and if it triggers without buttons pressed mark the user as a mouse user. You could then persist this through a cookie or LocalStorage since the flag will not change within the same environment, and remove the event right away. The precise way of implementing the single-fire event depends on which library you use (if any at all), but it should be easy with Mootools/JQuery docs in hand.
In general I'd recommend the easier route of just checking for a touch interface in most cases :
if('ontouchstart'in window)
{
/* it's a touch device */
}
i have a simple system to register who is present at a party.
I created an easy numkeypad with buttons, and that works. But when I try it in Safari (or any other mobile browser), it takes about a second before I can press the next button. It has to be quick, so this is too long.
Is there any way to shorten this "waiting" time between button presses.
click events are delayed in mobile browsers due to the fact the browser has to ensure the user isn't double-tapping or tap-holding an element.
I have written a jQuery plugin that can handle touch and mouse events in a convenient way, and allows you to bind one event to trigger without a delay (tap). You can check it out here:
https://github.com/benmajor/jQuery-Mobile-Events
I would like to put in my own graphics instead of the OS dependent boring scrollbars for the website I'm building. Is there a way to do this in GWT?
The best solution i found is to create my own scroll panel. The scroll bar is wrapped around a Focus panel. I've added Mousedown, mousemove and mouseout handlers to the focus panel. Recording the mouse movements and moving the contents accordingly.
I agree with Slaks. Best bet is to use the Jquery plugin JScrollpane.
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I have posted my answer in fallowing link GWT CustomScrollPanel example. But this won't work for IE just like gmail.
I'm working on a web app where I support dragging on the page, by simply watching for mousedown/mousemove/mouseup events. That part works great.
The problem is that I'm only handling dragging inside one particular element, by design, and if a user (accidentally or not) drags outside, it gets "stuck" in drag mode. That is, mouse-down, then mouse-leaves-window, then mouse-up, then mouse-returns to window looks like it's still dragging, to my app.
I haven't figured out any way to solve this -- even something simple like "when the mouse re-enters the window, is the mouse button down?" would work.
Does such functionality exist, and I'm just missing it? Or is there some clever workaround I can employ here?
Legacy support has no importance to me -- if it's an HTML5 solution that only works in FF3.5/Chr4/Sf4, I'm happy with that.
In IE7/IE8 you can detect if the mouse was released outside the window by using the following code:
document.onmousemove = function(event) {
event = event || window.event;
if (document.all && event.button != 1) {
canceldragging();
}
}
In Firefox and Webkit the mouseup event is fired on the document when the mouse is released even if mouse pointer outside the browser window. You can see this using http://www.quirksmode.org/dom/events/tests/click.html
For IE8 the document onmouseup event is fired when the mouse button is released outside the browser window only if you allow document selection to occur (as the link above does). That is, in IE8 you don't get the mouseup event if you use document.onselectstart and cancel the selection, or if you use unselectable="on" on the starting element, or if you called document.selection.clear() combined with document.selection.empty() while the mouse was down.
What if you had the onmouseout event of the element fire the mouseup event?
If you're just using inline handlers, something along the lines of:
<div id='dragElement' onmouseup='alert("stop dragging!")' onblur='this.onmouseup();'></div>
added to whatever event handling code you're already using. This would 'release' the drag whenever the element loses focus. Not the cleanest code, but you get the idea.