I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
Related
The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).
Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)
I assume you are doing something like
container.appendChild(newDiv)
Now, when you click and drag an element, you can move it to the front.
var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)
This inserts your desired div as the first child of its parent, which will move to the top.
Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.
recentlyClicked.parentElement.appendChild(recentlyClicked)
On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.
Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.
Im reading through the jquery docs, and Im thinking outterHeight/outterWidth is what I am looking for. But not really sure how to use it for my needs.
Overall I have an element I want to add a submenu to, on click, I want this menu to line up directly under the trigger element. But I need the right edge of the menu element to line up with the right edge of the trigger element. Which the lining up piece of it, I'm sure a little trial and error will get me there its just finding those outter edges and where they are as far as the window/screen/what ever is concerned. So I can nudge them into place.
Key reason I am going this route is cause this menu element is attached to a handful of trigger elements scattered through the UI, and are dynamically recreated for the given trigger element.
Anyway anyone know a good way to achieve my goal? Is outterHeight/width my ideal solution?
I think a better solution would be to use offset or position like the jQuery UI datepicker does it for example. You create your menu at body level and you position it according to the offset of the element that triggers the menu.
I am creating a photoboard in which a user can drag-drop photos, resize it, drag it and rotate it. Whenever a user drag-drops a new image on the board a new div element is created and an img tag is appended to the div element. Each div is set to float left so whenever a new image is created it will automatically be placed in its correct position. The jquery-ui plugins (resizable and draggable) are applied to the div.
A problem occurs when the user resizes any image. jquery-ui sets position: absolute and all image positions get distorted. After that, when we add a new image it will be inserted on the previous image. Can anybody please help me to get rid of this problem?
Without seeing your code it is difficult to know exactly what the issue is. I do have some sense of what the problem is. When using drag/resizable, the div will always be position:absolute. What you will need to do in priciple is bind an .mouseup() event to any selected/dragged/dropped div that will .addClass() to the div applying the new position as well as other styles or jQuery dom manipulation. This is the approach I would take. This also allows the freedom to spice up the dropping of the image with some nice animation maybe.
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.
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.