How to create a move handle using jquery - javascript

This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?

Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.

The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?

Related

Detecting unhandled mouse events

The question is probably a bit more complex than the title might make you believe, but in the end it nails down to that question. But first let me show you the bigger picture:
I am using chromiums rendering/content/javascript engine for user interfaces in my application. Below the user interface though is a real 3d world that also needs to be informed about interaction. So you can imagine my user interface like a regular html page where the body is transparent. So whenever i get a message for the user interface (like mouse move, mouse down and so on) i need to be able to detect if that message was handled by the user interface or if it should be propagated to the world "below". All this only has to work in chrome, other browsers are unimportant.
So far i had the following ideas (i keep using mouse move as an example):
Attach a mouse move handler to window (or html or body) and when its hit -> deliver to the application. Problem here is that events get propagated up the chain no matter if handled or not
Attach a mouse move handler to window and check if the event target is html or body. Problem here is if i have like a tansparent container div thats only used for positioning or arranging child nodes i will get this element if its hovered even tho it should go to the world there
Attach a mouse move handler to window, mark elements that should not capture the mouse (like transparent divs) with an attribute and in the mouse move handler check if the target has such an attribute. If yes, then fire the event, else its handled. Problem here is if one of these nomouse-elements is over an element that wants to capture the mouse i miss it
Attach a mouse move handler to window, mark elements that should not capture the mouse with an attribute. Add a mouse move handler to all elements that do not have the no-mouse attribute and set a property to true. in the window mouse handler check if that property in the event object is set. This could work i think.
Is my last idea feasible? Do you know of a better way to achieve this? Greetings and thanks in advance.
You could try to make a transparent div over the whole screen and attach the mouse handler to it. Use the z-index for placing the clickable elements in front of it.
The whole screen div CSS:
html, body {
weight: 100%;
margin: 0;
}
#whole-screen {
min-height: 100%;
}

HTML5 Drag and Drop with insertBefore

I am working on a drag and drop project.
How: I am using the HTML5 drag events.
Code: See fiddle here
Problem: It only works sometimes, and I checked the code a million times
Idea:
- Get element and drag it over a div with id: LayerN (N=number)
- Create a new layer before LayerN when dropping
- AppendChild to new Layer.
- Remove empty layers if there are any.
Is there anything I am doing wrong or too complex? I don't want to use a JQuery framework, i want to understand what I am doing. Thanks a lot for reading, any help will be highly appreciated.
I can't get your fiddle to work so I'm giving general comments rather than a full 'answer' so hope it helps!
For D&D I find what works best is attach a mousedown event to the document on page load (or the containing element of the draggable objects if that's more appropriate).
Don't attach any events to the draggable elements themselves at this stage.
On mousedown, check the classname/id of the target and if it's draggable:
If you want to show it dragging, clone the element and append to a position:fixed or :absolute DIV - you can move this on mousemove relative to the cursor. Keeping this element offset to the cursor means you can still detect what's under the cursor.
Hide the element you're dragging. You can put some sort of image showing where it came from at this stage if you wish using insertBefore.
I hide the element rather than move it because if you cancel the drag it's very easy to restore it.
Attach mousemove and mouseup events to the window or document. The function you call on mousemove can, based upon the event.target/event.srcElement, decide whether the dragged object can be dropped or not (again, I generally look for a className here).
This way you've only got a maximum of two event listeners running everything rather than multiple events on every single element. I suspect your event listeners may be tripping over each other.
I don't know if that gets you any further, but good luck!

Register mouseover of an element beneath another one

I'm trying to find a way to register a mouseover event on an element that is beneath another element. I have rows which, when moused over, make a new div appear and positions it on top of the hovered div.
Here's the page: http://www.brunobryan.com/dev/stephanebourgeois/index/
When you mouseover a row, an image appears on the right. I would like to register the mouseover event on the row even when the mouse hovers above the image.
You can permit the cursor to pass-through the image using pointer-events:
#index-hover {
pointer-events: none
}
Note, this isn't supported in all browsers. Better support if you use SVG.
This is not really possible, you have a couple of options for workarounds.
Either a) Register the hover event on a container that will contain both the row and the image.
or
b) Bind the same hover event on the image aswell.
i think the answer here is going to be that your <img> tag needs to be placed inside of the <tr> tag, and then absolutely positioned. you'll probably want to make the row relatively positioned so that you can use the row's position as context.

Mouseover over touching interfaces

I mean android, ios, etc.
While there's no solution / replacement for mouse over on those interfaces, how can we gather all those relevant infos, for instance from stack exchange, while navigating through them? In SE case, it becomes even more relevant when you want to grab the tags info. But I mean in general, for any website.
Should we consider making a complete different style to accomodate this specific lack of info on ipads?
Is there already any good solution for this?
I'm using jQuery to create a click event that is an alternative to the normal mouseover event, In the example a tooltip is inserted after .tooltip on a normal mouseover event.
/**
* when tooltipss are clicked trigger their mouseover event then fade the tooltip
* (this is friendly to touch interfaces)
*/
$('.tooltip').click(function(){
$(this).mouseover();
// after a slight 2 second fade, fade out the tooltip for 1 second
$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
$(this).fadeOut(1000);
}});
});
The idea here is to show the tooltip for a few seconds and then have it fade naturally. But in general all you need to do is have the click event call the mouseover event and then do something to remove the tooltip when you are done with it.
I do not know about other approaches, but what i have done to facilitate non visual browsers is to have a button that when the mouse is over it shows a tooltip and when clicked or pressed shows a messagebox with the same information as the tooltip. Keep in mind "messagebox" does not have to mean the ugly alert box it can be custom. the thought being the alert allows screen readers etc to know about the additional information being provided.

'onmouseover' working unexpectedly in Javascript

I have a div in which there is a link. When a user takes the mouse pointer over the link, I call the basic_nav_mouseover() function which changes the background-image of the parent div. I have also added the function basic_nav_mouseout to the ommouseout attribute of the parent which should set the background-image of the parent div to none when the mouse pointer leaves the div. However, strangely, the function basic_nav_mouseout() is getting called as soon as the mouse pointer in leaving the link in the parent div. Here is a test page : http://spats.in/test/. Look at the links 'about' ,'people','connect' on the top right corner.
Where am I going wrong?
There's a really good explanation of the limitations of the mouseover and mouseout events in the jQuery docs (about half way down that page).
Mouseover and mouseout events trigger when you move the mouse over the bound element, as expected, but they also fire a separate event when you mouse over any inner elements within the parent element - this is obviously undesirable in most circumstances.
Basically, to fix your problem, use the mouseenter and mouseleave events instead.
From a user experience point of view, I'd encourage you to bind both events to the link, so that the special background colour actually indicates that the link is active - I think I'd find the effect you are trying to achieve quite misleading, because the highlighted background would make me think that I can still click the link, even though I cannot..
If you want to keep the visual effect you've current got (with a tall coloured area behind each link), make the link take up the whole box - i.e. 100% of the height and width of the div.
If onmouseover is set on the link, onmouseout should be set on the same element.
onmouseout gets triggered every time a child node is hovered over, you need to check the calling target.
http://www.quirksmode.org/js/events_mouse.html is a good resource.
I'm no javascript expert, but shouldn't you wait with binding the function to the event until the page is fully loaded? So:
window.onload = function(){
$('.item1').bind('mouseleave',basic_nav_mouseout);
};
Also (correct me if I'm wrong) I don't think you have to give the object as an argument in 'basic_nav_mouseout('.item1','red')', you can just use the 'this' keyword. So:
function basic_nav_mouseout(){
this.css('background-image',"none");
}
I don't know anything about the JQuery library though, my only (little) experience is with the Prototype library.

Categories