I'm using jQueryUI to create a large table of sortable cards, each of which is composed of a large tree of nested div tags with styling using CSS. When I drag a card under certain conditions, I want to create a slightly transparent "clone" of the card that hovers just to the right of the "real" card while dragging, but I don't want to actually duplicate all of the HTML in order to accomplish this visual effect.
So, is it possible to use javascript to draw the same DOM element on a webpage in two different places without actually duplicating the HTML?
Thanks to anyone who answers.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can either use cloneNode (take care to attach new event handlers to it, as they are not cloned) or make at JS factory that produces some "template" elements and attach each of them to different parents.
Related
I'm concerned about performance and best practices.
So I'm building graphical UI and learned that I shouldn't call jQuery.append() a gazillion times when creating many small elements. So I got that covered by document.createDocumentFragment(). I'm adding elements to that, then once done, I insert the fragment to the DOM (with appendChild),
Then, in another pass I calculate where each element should be. Everything is absolutely positioned and will receive x and y values via CSS transform. Unfortunately, for these calculations I need the elements in the DOM since some of them contan random length text, and I need to measure widht/height. Otherwise I would perform step 3 on the document fragment directly, before it's even inserted into the DOM.
In the final pass I apply the calculated styles over everything with jQuery.css() (will likely replace with setAttribute instead of jQuery) as part of a loop (many calls to that, unfortunately - every element has different x/y). Should I detach the container that holds all my elements while I apply the styles, then reattach it to the DOM?
Due to lack of interest I decided to test it myself. Pulling an element of 700+ articles (15000 nodes), applying various CSS on the majority of them, then putting the element back into the page was actually slower by 50%. Let the browser do its job by only showing the results of changed attributes when Layout is needed.
I read the advice somewhere to remove the element from the DOM while working on it. While this could be true when appending elements to it, this does not hold true for style manipulations.
I need to create sortable drag and drop lists in my application. So, for this I have used angular-drag-and-drop-lists which works fine for an small amount of items.
However, my application migh have thousands of items. So, to improve speed, I need to use md-virtual-repeat offered by Angular Material. It keeps the model in the background with the right number of elements. But, the DOM only renders those that are visible within a virtual container.
Because the library uses the rendered $index to keep track of the elements, using the virtual repeater creates all sort of problems since the $index now is virtual.
Some of these problems for instance are:
Dragged element gets duplicated in the model
Element that was in drop location gets deleted from the model
During dragging some elements might get lost from the original model
Etc...
What do you suggest to attack this problem?
Are there any other easier solutions rather than using this library?
Thank you
So I have table and menus, which I want to place near selected element.
For example, table slides down from one line and there is transition, so I can't instantly take relative offset and set it to menu. I should do it after transition is complete.
So, talking in abstract way, I should emit event about selection of element when table is fully displayed. Or I should display all table and then select element, so menu will know where to go.
The problem is: I dunno how to subscribe on transition end.
Yea, I can recalculate position of menu in $watch, but I don't feel like I need a new watcher here.
How it could be implemented on ReactJS, for example? I use angularjs, but the point is - I don't need to use two-way-binding here.
Any thoughts?
Btw: I can't rely on angular-animate since it requires classes to be used, but I have to play with css dynamic attributes instead. And no, it is not possible to rewrite it to use classes, yes I tried. It will not work by the possibilities of css.
in short
Elements created by createElement and/or createElementNS aren't attached the the main document object at the time of creation, so I can't use document.getElementById to find them until they are attached to the main DOM tree.
Is there an efficient way to 'get' nodes that are off the main DOM tree?
to elaborate:
I'm writing code to generate SVG diagrams dynamically and I can't embed them into the main document until a later point in time. The diagrams are reasonably complicated and I have various functions that each design a portion of the diagram. Each of these functions needs to be able to find the right element of the main SVG object in order to put the elements in the right order. It would be perfect if I could call getElementById from the main SVG node, but I can't since it's not a document.
So I'm stuck with parsing the arrays returned by getElementsByTagName and looking for a target id. Alternatively, I can create an invisible div in the main document and attach it to that, but I want my code to be reusable and not bound to a particular HTML page.
Can I have more than one document object? Say a temporary one that's not displayed where I can build my own DOM (like a video buffer)
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?