I have an SVG and in it a lot of elements. I also have a popup element which is shown on an element click. When I zoom the SVG the popup should not be zoomed. How can I prevent this popup from being zoomed with the SVG?
See this demo. Basically you can zoom only one SVG group while keeping others static.
Related
With reference to the question clip-path not working in SVG sprite, it seems we can't use style="display:none" to hide an SVG element that defines a clip path that will be used elsewhere.
However, the suggested alternative for hiding it given (using width="0" height="0") is not working for me (at least in Chrome, the SVG element still gets allocated space in the page layout, which causes a vertical scroll bar to appear, as I have a div with height="100%" above it). What other was are available for hiding an SVG that won't stop it being used for clipping?
In the end, I used position:absolute to take the item out of the usual HTML document flow. I don't understand why a zero-sized element would cause scrollbars to appear, but that certainly seemed to be what was happening.
I've got this page http://jsfiddle.net/UFTSK/2/ When you hover at image there is popup block overlay bug. if I remove z-index in a tag ( http://jsfiddle.net/UFTSK/3/ ), all working correct. But in IE7 the same problem. Please help.
I used jQuery to Dynamically update z-index of your popup and anchor and also change the position of the popup and here you go.
http://jsfiddle.net/KwB9k/
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.
Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?
#thirtydot If you know of a solution
that works in only one browser I still
would love to here it! Although the
more support the better.
You can use pointer-events: none.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
http://jsfiddle.net/QC5Yw/
Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.
http://www.w3schools.com/Css/css_image_transparency.asp
No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it.
Thats why you can put a completely empty div with fixed with and height and it will be clickable.
I want to let a canvas exactly overlaps a image with css height = 100% http://clec.twbbs.org/Screenshot.png ?
However when I zoom in, zoom out or press "full screen", canvas doesn't match the size of image http://clec.twbbs.org/Screenshot-2.png . I am wondering to know how could I solve this problem.
thanks a lot
Without seeing your source I would suggest adding a wrapper around the image and canvas tag.
<div id='wrapper'>
<img/>
<canvas/>
</div>
Then the canvas element wouldn't expand beyond the bounds of the wrapper.
Another way is to bind an event to window.resize and make the canvas element equal the width/height of the image element.