Click on point labels through zoom canvas - javascript

I have onclick event on point labels.
Works fine on IE8+, Firefox and Chrome.
Zoom also works fine.
But on IE7, IE6 I can't click on point labels because we have jqplot-event-canvas and jqplot-zoom-canvas and others on front.
When I increase z-index for <DIV class="chartPointWrapper"> ... </div> we can click on point labels. But zoom is not working.
Do you know any solution to handle chart zoom and onclick event on point labels?
Thanks.

The solution to your problem, I believe, is in EDIT2 of my answer to a similar problem.
Effectively, you must apply z-index to all canvas appropriately so they preserve they intended order.
For answer to question in #Swapnil Chincholkar 's comment above, please see this code sample. It shows how you can use the jqplotClick to detect clicks on the points. As you could read here only when you are on or close to a point the neighbor variable is not null. You could observe that the highlighter plugin uses the neighbor variable in the same way to show its tooltip.

Related

HighChart/HighStock not showing closest tooltip

I'm having this wired tooltip hover problem. It basically feels like HighStock is showing the wrong tooltip when you are close to the edge of the chart.
If you hoover in the middle of the chart, it's spot on. The closer you come to the edge, the more "off" it gets.
I see there are a rect.highchart-data-label-box overlay around the points, that are pretty close to the mouse position in question, but it still shouldn't take preference of the box I'm inside of with the mouse button in the same given moment?
View this screencast
You will see I have the mouse pointer directly outside of the chart (to the left) – fair enough, it snaps to the closest point(s).
Then I move the mouse pointer direct on the first set of points on the Y-axix – it should still snap to the closest point(s)?
I've tried setting snap to zero, tried setting shared to false, among other things.
Have anyone have the same or similar problem? Suggestions on what could be wrong?

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.

how do i remove this yellow box while debugging javascript using web inspector in safari

How do I remove that yellow box? It stays in the same spot regardless of where I move the cursor. If I am not using an external monitor, that yellow box took up half of my screen :(
Thanks!
PS: I am asking here because there does not seem to be a good forum to ask the official webkit/safari crowd or I just miss it but it is not webkit.org
Are you sure that it stays in the same spot no matter where you move the cursor? What should happen, and what does happen for me, is that it appears when you mouseover a particular variable,
but disappears when the mouse is moved off the variable (and off of the "tooltip") after about a second.
Stick your mouse in the upper right corner of the screen for a second and it should be gone. I'm assuming that, as large as your tooltip was, you moved the mouse over the tooltip itself (and we just can't see it since the OS X screen capture does not include the cursor).
It's been a long-lasting bug in the Web Inspector code. Some work has been done towards fixing it. Please give a try to a more recent version of the browser, and if you still can come up with a reliably reproducible case, please add a comment to http://crbug.com/95189 with the case description.

Raphael JS to make a map with tooltips on hover

I am trying to make a map with Raphael JS, pretty much like the example they have on their site:
http://raphaeljs.com/australia.html
However, I want to show the info on hover as a tooltip that fades in/out as you move to different parts of the map (not next to the map like on their example). What is the best way to do that?
This is what I came up with so far, but in IE (e.g. IE6 and IE7) the tooltip doesn't disappear and I'm not sure why:
http://jsfiddle.net/keith/sXCk6/
This posting here on Stack Overflow addresses the issue of IE and mouseover problems: Move active element loses mouseout event in internet explorer

Put a div behind another but still show up above?

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. :)

Categories