Put a div behind another but still show up above? - javascript

Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.
In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?

You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.

While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.

I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.

Actually, on browsers that support css3, pointer-events is the simplest solution. :)

Related

Using DHTMLX Scheduler, prevent tooltips from disappearing when hovering out of the event to the tooltip

I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.
The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;

Zooming image to mouse cursor with Javascript and returning to the images original position

Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.

Zooming into an element without changing the element's size

For example; if I had a flot canvas graph and I wanted to be able to view a closeup of one of the areas, I want to be able to zoom into a specific area and have a scrollbar appear for horizontal and vertical panning so every section can be viewed. Is this possible?
You may want to use the zoom CSS property. Here is a little example of it in action.
As for the scroll bars, you could try placing the zoomed element within a parent which has overflow: scroll; set.
I hope this helps.
Anything is possible, but flot doesn't support that by itself. Your best bet would be to use the panning and zooming functions built into flot (via the navigate plugin), but then for the scrollbars, you might have to overlay some fake scrollbars (perhaps using a div with overflow:scroll, as #Wolfy87 suggested) and hook them up to the flot graph.
Flot triggers plotpan and plotzoom events when the graph has moved, so you would use them to keep your scrollbars in sync.
I haven't seen anyone do this before, so I can't point you towards an example. But the code doesn't seem unreasonable to put together.

In XUL or JavaScript, is there a way to move the mouse cursor to specified position?

In XUL or JavaScript, is there a way to move the mouse cursor to specified position?
The only time that Gecko moves the mouse is on Windows for the snap-to-default-button effect. This is used by XUL dialogs and wizards. The backend code doesn't actually check that you're giving it a button; any XUL control works. The mouse is moved to the centre of the element, if that point is on-screen, and the window is active. Normally the code checks that the system cursor snapping is enabled, but there is a preference that overrides that.
No. you cannot move a mouse cursor using javascript.
But you can do this.
Hide the cursor. Load an image shaped like cursor. Animate the image.
You can use nsIDOMWindowUtils.sendNativeMouseEvent(x, y, 0, 0, null) to reposition the mouse cursor. Perhaps combined with window.screenX/Y to work out where you should move the cursor to, since sendNativeMouseEvent seems to treat the (x,y) as absolute screen coordinates.
I haven't tested this method very thoroughly, so there could be caveats. I can't think of any myself.
I know this is an old question, but I have not seen this solution suggested anywhere before, and it's not exactly obvious.
I've only tested with Firefox v48 on Windows 7. Here, sendNativeMouseEvent calls SetCursorPos to perform the actual repositioning.

How to emulate this javascript functionality (movable div and saved positions)

I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.

Categories