I'm working with an image editor using JavaScript. It has multiple layers of images similar to Photoshop. How can I have a div of grid on top of all the layers and still be able to click and move the bottom layers? I'm using JQuery-ui for draggable and resizable.
Are there any hacks or workaround for this?
Try to use pointer-events: none on the grid/ruler element;
You can find examples here
It's been long since the question was originally asked but below solution might help for anyone visiting this question for implementing grid overlay for html/JavaScript canvas application.
Grid Overlay using css
one can easily play with z-index / background color to make element beneath grid overlay clickable.
Related
I have two maps which are loaded via javascript into DOM (ngOnInit, I am using Angular 10).
The problem is that div of sk-map is overlaying on cz-map and if I want to hover/click on some region on the bottom right side of cz-map it is not possible, because sk-map div overlays on cz-map.
I can fix it - make cz-map with higher z-index, but there will the same issue, but in the sk-map (I am not able to select left top side of sk-map).
You can't really use divs in this situation.
Alternatives would be to use an svg which is fully vector.
Another suggestion is instead of being able to click the whole div, maybe use a good old fashioned image hotspot :)
Is that possible to resize two divs simultaneously using their common edge using html and css only? Is there some Angular2 way to do it?
I tried play with resize:vertical style but without luck:
enter link description here
I was hoping that outer div could limit resizing but it seems I was wrong.
PS I don't want to use jquery or work with elements directly from code because I work with ng2 and it is not a good approach to use such hacks, but I didn't find such functionality in ng2
Try ng2-split-pane. Not sure if this is what you need but there is a quick demo on the page that should clear that up.
It works by inserting a dragging anchor between two divs with the option of orienting them vertically or horizontally.
https://github.com/wannabegeek/ng2-split-pane
Have you tried
display: flex
display: flex-box
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
I'm looking for JS or jQuery (core dependecy only) code that allows you to resize any html element, or just divs - could use div container for content.
The problem I'm having with jQuerys resizeable() function is it's dependencies with UI and the bloat that would bring to my rather slimmed codebase. Also it only uses a corner handle for resizing where I'd like an interface more along the lines with how table and image resizing works in TinyMCE.
That is, a dashed border around the element to be resized, with 8 points to drag from. If you try the TinyMCE demo on their site you'll see what I mean. It allows for both aspect ratio to be kept and distorted based on dragging point.
Most hits I get on resizing is for a one time resize of images to fit the page width, but I'd love to be pointed in the right direction in case there is a snippet or jquery plugin out there that I've missed.
I got the same "problem" a couple months ago, did not want to use the jquery UI but wanted to resize... I came across this "custom event" plugin. Very light and does the job.
threedubmedia jquery.event.drag
You can see a resizing demo at the bottom of the page.
Hope it helps!
You can use CSS3's resize.
http://jsfiddle.net/BramVanroy/uAzVY/
Not as much functionality as you want, though.
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"