I am building an interactive visualization app that is pretty much all client-side Javascript, see here:
http://korhal.andrewmao.net:9294/#/classify/APH10154043
Try the following controls:
mousewheel: zoom
drag empty area: pan
drag bottom area or handles: pan/zoom
click once, then click again: draw a box
drag on box: move box
drag edges of box: resize
The underlying mechanism is a SVG overlying a canvas. The canvas has z-index 0 and the SVG z-index 1 - feel free to inspect the DOM. Everything works pretty much fine on Chrome/Firefox.
The problem is, in IE9, the canvas seems to receive click events over the SVG, even with a lower z-index. You can tell because the mousewheel/click/drag actions don't work in the main chart area, yet they work in the edge areas because the SVG is slightly larger than the canvas and it picks up the events there. For example, try mousewheeling in the axis areas or the bottom.
After playing with it some more, I think I saw the pathology. I made a version of the page where I allowed boxes to be drawn outside the canvas (graph) area but still inside the SVG. Then I could do the following (in IE):
Draw a box in the axis area (outside of canvas)
Drag it into the main area (over the canvas)
Hold mouse over the box and use mousewheel - now the zoom events are picked up by the SVG. Mousewheeling where there was no box caused the events to go to the canvas (disappear.)
So it seems what is happening is that the SVG is only picking up mouse events when there is an explicit SVG object under the mouse, otherwise it gets passed through to the canvas, and only in Internet Explorer.
One obvious way to solve this problem is to make a transparent rect over the entire SVG region, but that seems stupid. Also, maybe I'm doing something wrong that is patched up when using Chrome but broken in IE. Does anyone have any suggestions?
Note: One (deleted) answer suggested wrapping the entire SVG region in a <g> element and applying pointer-events: all to it. However, that didn't work. I don't even think that is necessary, as pointer events are being detected fine in the entire SVG region except where there is a canvas.
If you want to prevent clicks on transparent regions in the SVG from going through to the underlying Canvas, then I would use a (slightly modified) "stupid" solution: put a transparent rect underneath the SVG contents. Something like:
<svg>
<rect width="100%" height="100%" pointer-events="all" fill="none"/>
<!-- … everything else … -->
</svg>
With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)
Related
In our OS X application, we have enabled window shadow by view.window?.hasShadow = true. This will create a fine shadow over NSWindow. We have created a hole in the application by a custom view to see the background through it, via its mask layer.
Our problem is that the shadow is visible in the hole region too. Can we make the shadow not appear in the transparent region. We have searched, but didn't get anything to clip window shadow at certain area.
This shadow is creating some problem in the application
We have given a button to collapse/expand the view which have the hole. So the hole will enlarge and shrink according to that. At this time window will not recalculate the shadow. We have tried the view.window?.invalidateShadow(). But it doesn't has any effect.
We are drawing some texts over the transparent region. When the expand collapse happens we can see the traces of the text drawn. It will always be there.
Every thing comes fine if we resize the application, which will recalculate the shadow. How we can overcome these issue. What will be the work around.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.