Can I merge z-index layers into a single image?
I am working on a painting visualizer for homes. Using Javascript, I have 40 divs, all with a unique z-index. At a given time, 1-4 layers are display:block (and the rest are display:none) in a single space, layering colored shapes over a background image (of a house).
Is there a way to essentially screen shot this space so the user can 'save' their selections?
If that is not possible, perhaps I can save their selections to be pre-loaded for a color-combination 'load' or 'open'?
Thanks!
If you use <canvas> then you can use .getAsDataUrl( ), submit the contents of your layers to your backend and use a library like ImageMagik to merge them and serve a new image.
Otherwise, I'm not sure how you're achieving your drawing effects, but you could "record" all the drawing events as they occur, then when you want to merge layers, you could "replay" the events on the target div, then delete the original div.
You could also add code to essentially "link" the two (or more) divs together and cause them to behave as one. When you hide any of the linked divs, they all hide, if you rearrange their z-index, you move them all as a group. To the user, it would appear that they were just a single layer.
Related
I have an imagemap with several mapped areas.
I want on mouseover to overlay my imagemap (essentially my backgroundimage) with previously loaden images. The overlaying images have exactly the size of my backgroundimage and need to fadeIn when the mouse enters the mapped areas, and fadeOut when the mouse leaves.
I want to accomplish this with pure jQuery, no CSS (with overlaying the images previously, display:none and than fading one into each other, etc. - I am aware that there are such solutions, as proposed here e.g. JQuery mouseover image overlay).
There should be a way to paste an image over an existing one, without hiding it in a div tag or something, shouldnt there?
If code is needed, I can provide. But I rather want a hint and figure it out myself - thus I learn more :)
I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
Perhaps the title isn't great, but I had a little trouble with the wording...
Basically, is it possible to have jQuery's hover only fire over the actual content of a png with an alpha channel.
So in the image below;
http://i.imgur.com/3kO7v.png
Only fire on the rectangle and not the alpha channel which make up the rest of the document bounds...
I've tried the obvious $('obj').hover(function(){stuff}) but this fires on the alpha channel too...
The final implementation of this will be for more complex shapes than just a rotated square, so css3 tricks are out for the primary basis, but could be used with a back-up/shim, plus I need to support IE7 and ipad,iphone,ipod....
If there is a CSS2 solution then that would be suitable too. Also any real guidance on this issue is more than welcome.
My backup for this will be to have an empty div, display block and position it over the shape and then use that. This will obviously not be ideal for the less square objects.
Any hits or tips are more than welcome.
Thank you
Yes it is possible depending on the stacking context of your elements. Keep in mind that when you do a focus over any particular element on a page, that you are actually focusing all other elements within the same stacking context.
So what you could do is either stop the event from bubbling up the stack (if the element you want to "hover" is lower in the stack that the elements you want to prevent hover effects on), or specifically put in prevent default for onhover events for all elements in the stacking context except for the one you want to actually get a hover effect.
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
CSS3 Transparency + Gradient
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).
The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.
If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)
Good luck!
Does somebody know an unobtrusive, Prototype or no framework based way to turn a DIV with big content (e.g. a map) into a clickable and draggable "map" container with fixed dimensions, very much like Google Maps?
I want to display HTML chunks in a large input form. Those chunks can exceed the space available (Each chunk can have a viewport of about 150x300 Pixels). A click-and-drag solution would be perfect to move through them. I could use overflow:auto of course but that is not a convenient method to move around in this case.
Have a look at the following:
http://www.switchonthecode.com/tutorials/javascript-tutorial-draggable-view-in-a-container
It may point you in the right direction at least
Are you after something like jQuery portlets?
I make one for a touch-screen kiosk. It involves moving a large map based on someone dragging the viewable area on a mini-map, with various zoom levels.
Take a look:
http://www.mintohomes.com/morgansgrantkiosk/SitePlan/Default.asp
The JavaScript source is in the page.