Question

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:

1. Get position of #glass.
2. Get content behind #glass.
3. Store that in a variable or give it a class or something to refer it to.
4. Append a span before and after.
5. Style it with scale-transform.
6. 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.

Answer 1

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/