We Keep Coding

CSS transform breaking mouse position events

I'm scaling a div (zoom functionality) on page with non-scaled divs. The scaled div has mouseover events that cause text to follow the mouse. Scaling breaks the position of the element that should follow the mouse.
Hover text is done like:
$("#container").on('mousemove','.mouseMe',function(e){
$("#followA").css("top",e.clientY)
.css("left",e.clientX);
});
//also some additional mouseenter/leave events are used to display hover
Scaling:
#container{
transform-origin: top left;
transform: scale(1.1,1.1);
}
I think what I need is to get the mouse's position on a css scaled div as if it wasn't scaled. (example: if the mouse is at the center of the div say [25,25], it should always return [25,25] even if the div is scaled). I could be wrong about what I need though, so the functional requirements take priority:
Element needs to follow mouse when hovered
Element container (or several containers up) needs to be scalable via css without breaking hovers (other transforms not relavant and no nested scaling)
JS, JQuery, CSS are all in use.
Chrome support is primary. Should also work in FF but not crucial. IE isn't supported.
This fiddle may explain this better and shows what doesn't work: http://jsfiddle.net/yvanaxe1/4/ (make the result pane big enough)

Is having those “follower” elements be descendants of the scaled element(s) an absolute requirement? Because, if you could take them out of there, and then simply position them over the top left edge of the mouseover-triggering element (by using the clientX/-Y values everywhere, plus some offsets to re-position them from there to appropriate distances), I think you might get there easier … http://jsfiddle.net/yvanaxe1/6/
I increased the scale value here, so that the effect on the follower elements (that the scaling has been applied to as well) is more obvious.

Detect DOM element position change using pure Javascript

I want to notify when the position of DOM element changes. I have an image with absolute position in a document at the top of an element but when for example the size of something on top of my element changes, my element's position changes (it goes down) and the image position doesn't change. If I can detect position changing of element I can reposition the image. Is there any way?

I have an image with absolute position in a document at the top of an element but when for example the size of something on top of my element changes, my element's position changes(it goes down) and the image position doesn't change.
Not sure if this needs JavaScript at all – or if instead you might just need to broaden your knowledge about how absolute positioning works a little …?
An element with position:absolute is positioned against it’s closest ancestor element with a position other than the default static – and if no such ancestor exists, it is positioned against the viewport.
I assume the latter is the case with your problem – so if you want your image positioned in accordance to one of its ancestor element’s position, just try giving that ancestor position:relative.

Auto Layouting Notes and Markers on a Web Page

I would like to create screenshots automatically from a browser window and annotate some elements on the website.
I am having in mind to write something like this: (pseudo code)
Place note right of element "#login": "This is the login button"
And the note should be added.
I obviously have to do this directly inside of CSS and/or Javascript because after taking the screenshot the element information would be lost.
What are possible approaches on this?
I am interested in
Relative positioning of notes, arrows and such next to certain HTML elements
Auto Positioning of boxes to avoid overlaps
and anything else which could be useful in this case.
I post one possible draft solution and hope for alternative and better ones
I am also interested in already existing modules (jQuery or others) to help here.

Concerning relative positioning:
We want to add a note right to the element "#login":
Insert a new element, with absolute positioning, as a child of the <body> node.
Obtain the absolute position of the element by iterating from the element back to the <body> and adding up the relative positions. (jQuery's position() would help)
Set left/top for the note-element to the calculated absolute position of #login plus it's current width
Not answered: Auto positioning

expand div to relative top-left positioned contents

I have this problem where I am trying to show multiple graphs (based on jsPlumb) on a single page. Since I want each graph to be side by side on one row no matter how much space is available I am using a table (if I used divs with float:left, if not enough space is available some of the divs move down on a separate row).
Now each table cell contains a main div which in turn contains two or more node-divs. The way jsPlumb works is by creating a separate div for each node. I need to position each node at a particular top/left relative to its parent div.
The problem I have is that the main graphDiv in each table cell does not expand to fit its content. Some of the graph-node divs are outside of it. I understand that when you have "absolute" positioned divs they are not taken into account. But I am using "relative" positioned divs with top/left coordinates. Does the same thing apply?
If so, what would be the best way for me to expand the table-cell/graphDiv to cover its content? (i have tried all the clear fixes and went thru all stack-overflow related posts but could not find a solution).
Here is a link to the jsfiddle page I set up: http://jsfiddle.net/7QkB2/28/

I'm a little rusty but I share your pain in trying to get divs to properly expand to contain their contents.
As explained by this page http://reference.sitepoint.com/css/relativepositioning when you use relative positioning you're actually leaving behind a hole where the content used to be. I'd think of it almost as an optical illusion - The object is still reserving an invisible block in its old position, but it appears as if it has moved.
So in your case, the 3 nodes are still stacked in the upper left corner of the graph even though they look like they're floating outside of it. If you get rid of all the absolute and relative positioning on the nodes you'll see the table is sized to be big enough to fit their original positions.
I'd recommend usually only using position relative if you're only moving your content by a few pixels. Why they designed the css to work this way is a mystery to me, but maybe its something to do with the limitations of the rendering engines? When you use position absolute the object no longer has a "box" taking up space in the document. It's easy to position, but won't affect the spacing of anything else as you observed.
I'm not sure your exact application, but you may need to get creative with how you specify the spacing. If you know the dimensions you can always specify them, but I'm guessing you're not that lucky. Do you really want to set the position relative to the top-left corner, or just relative to the other nodes? I'd probably just use old-fashioned margins. That should allow you to specify the positions of the content that needs to fit in the table while maintaining the block model. Then if you need one of the nodes to overlap, position it using absolute positioning.

Have you tried displaying each div as an inline-block and turning off line wrapping on the enclosing div? You don't have to resort to tables if you want content with a dynamic width to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}

Raphaël - SVG on top of HTML

I'm making a project which uses HTML elements as nodes in a diagram and uses Raphaël to draw lines between them. The problem is that the lines always wind up underneath the HTML elements. I have tried
raphael.canvas.style.zIndex = 1000;
(which is larger than all my other z-indexes) and also tried placing the SVG canvas as the last element in the DOM with no luck. How can I make these lines be drawn on top?

Have you ensured that your SVG element, and its containing element, are relatively or absolutely positioned? z-index only applies to positioned elements, not elements that have static (the default, in-flow) positioning.