So, I've tried getClientBoundingRect().top, elem.style.top, and all sorts of other wacky combinations, and my ultimate goal is the set one element vertically or horizontally lined up with another. This should be a simple task, but it seems there are a lot of issues.
If the element is embedded in say, a shadow DOM, this appears to affect its location/position? Is this supposed to be the case? I'm using Polymer 3 if that makes any difference.
Related
I'm writing a tool that uses javascript to do something like convert an HTML document into SVG.
That requires knowing which elements could overlap other elements, and thus the overall z-index stacking order of the entire document.
So I want to assign each element in the source page a number such that if I rearranged all the elements to overlap one another, the number would reflect their position in that stack, with 1 being the top (or bottom), 2 being the next, etc.
This is of course influenced by z-index values but is not directly related to them.
I know there's a way to do this myself using careful DOM traversal and sorting, but it would be tricky.
Is there an existing approach that's easier?
I can use any necessary library, though understanding how to do it in vanillaJS would be helpful.
Thanks!
Edit: as I look into rolling my own, the CSS entry on painting order is at https://www.w3.org/TR/CSS21/zindex.html, with a healthy discussion at http://vanseodesign.com/css/css-stack-z-index/
Untested idea:
Massage the entire DOM tree with CSS transform: translate() styles until all visible elements are stacked in a way that their bounding boxes overlap at a particular point, e.g. at the top left corner of the document.
obtain the top-most element with document document.elementFromPoint
style the element with pointer-events:none;, this excludes it from the element retrieval
goto 2
That should give you the total ordering.
Well, honestly, this is a hard one to answer you say:
This is of course influenced by z-index values but is not directly related to them.
But, if I simply answer the question in the title:
Determine effective z-index (vertical stack position) of each element in the DOM?
If you know the id (or name) of the elements then it is relatively easy to get the zIndex as you can get the z-index of any dom element with:
document.getElementById('someID').style.zIndex;
For any additional answers, you will need to narrow down your requirements.
I am developing a website where diagrams can be dragged around the screen, using raphael js.
An well-known limitation of Raphael js is that it there is no built in method for grouping and dragging elements around.
In order to deal with this, I was thinking of creating an individual div element for each diagram. Each div would then have its own raphael canvas and I would use jquery ui to drag these mini raphael canvases around.
I tried this with a a few elements and it works perfectly, but before I implement this into a fully functional prototype I was wondering if anyone has used similar solutions and if there are any known issues with this approach.
Thanks.
If it works for you it is great, still there is one limitation I am aware of. When you want to handle mouse click events of the elements on different svg canvases, there might be a problem when these canvases overlap. When clicking on the element which is overlapped by the other canvas, even if the canvas does not contain any elements, you will not be able to intercept the click. This issue is broadly explained here.
I'd like to find a way to tell the distance between two DOM elements. Not in pixels, but as in traversal steps.
The practical use of this would be the following: There is one core element, that needs to find other similar elements in the site, and mimic the behavior of the closest related.
E.g. a gallery without a set width, in tabs. The invisible tabs could have no width, thus the gallery in the tab will not be visible unless it's reinitialized when the tab is shown. The hidden gallery would be the core element and it will to look for another possible instances of the gallery which is working properly and copy its width in order to work. The working gallery could be in the first tab, or in the content, or a small gallery in the sidebar or footer. What I'd like is for it to 'know' that the closest related other instance is the one on the other tab, not the one in the footer. Since this is a WP plugin I can't hardcode anything, and the scenario is not just limited to tabs.
.closest() doesn't work for this purpose.
I found out that for this pupose the most efficient solution is this:
var commonParentsDepth = a.parents().has(b).first().parents().length;
You'll get a number that tells you how deep the two elements' common ancestor is. You do this test in a loop for multiple elements, comparing two at a time, one of which does not change. You'll be able to tell by the result if two elements are closer related than others. The larger the number, the deeper down the tree your two elements are, which means the closer they are.
Note: This is not for comparing two elements against another two.
I've combined these two, somewhat related questions:
How to find the nearest common ancestors of two or more nodes?
JS/jQuery: Get depth of element?
I am building a web application which relies on svg heavily. For the reference, I am using raphael js library to deal with all of it.
In this particular case I have implemented something that mimics a scrollbar and moves bunch of svg features (~500 elements) across the screen. Part of those features are <text> (~100) elements. Other elements include <rect>, <image> and <path> elements.
So, I noticed that my application is not really very snappy on my laptop, and is down right annoying to deal with on an ipad, due to speed. However, whenever text elements are removed or ignored during scrolling, it immediately gets up to decent speed.
I tried doing some speed tests (very crude ones, using new Date().getTime()) and discovered that it takes ~10 ms to move all the elements except for <text> elements, however it takes ~120 ms when <text> elements are included.
I believe this happens because each letter is rendered as a vector shape and it takes loads of processing power to calculate what exactly is obstructed by such a complex structure.
Is it possible to just embed the text, so the text is rendered as raster graphic, and not as shapes? Or improve performance of rendering text in any other way?
I do not need background transparency, and I do not use any fancy fonts.
You can prerender the text using Canvas and embed images into the SVG. I don't know how this compares to text element rendering in general, but for our demos this works quite well (see the drop shadow in the "hierarchy" example - they are rendered into canvas first and then replicated and referenced from within the SVG).
Note that these demos also make heavy use of virtualization, i.e. if you zoom into the image and only some of the elements are actually inside the viewport, the others are removed from the SVG, which gives a huge speedup.
The demos do a lot more than just moving the elements around, so it should be easy to get the same or even better performance.
I don't know how to do this with raphael, though, but I believe you should be able to put the data url from the canvas image into the SVG with raphael, too.
Paper.print() according to the Raphael site
Creates path that represent given text written using given font at given position with given size
Essentially your text is converted to a path. Obviously this has performance issues.
Probably best to stick to using Paper.text()
UPDATE
So not content with just dishing out advice I have set up some tests on http://www.jsperf.com. They can be used to compare the differences in performance to animate and transform different types of Raphael objects.
If you run these on your iPad it should show if text elements are really much slower to move. One other thing to note is that, at least in the tests I ran, paper.print() and paper.text() were not that different in terms of performance.
Run the tests on jsperf
I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.
This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)
I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.