Friday, March 10, 2023
HomeColdFusionMaking Components After The HEAD Tag In JavaScript

Making Components After The HEAD Tag In JavaScript


Recently, when I was discovering the progression bar in Hotwire, I discovered that the << div>> carrying out the progression bar was infused right into the DOM (File Things Design) after the << head>> tag and also prior to the << body>> tag. I really did not understand that it was feasible to provide components beyond the Body tag. And also, as a matter of fact, statically provided components beyond the Body will certainly be “relocated” right into the Body (by the web browser) as the HTML is analyzed. Nevertheless, it ends up that you can provide components in between the Head and also Body tags at runtime utilizing JavaScript.

Run this demonstration in my JavaScript Demos job on GitHub

Sight this code in my JavaScript Demos job on GitHub

I think that the Hotwire structure is making this option due to the fact that it swaps out the whole << body>> tag when a brand-new web page is packed. Thus, any type of components had within the << body>> tag will certainly be unconditionally eliminated. Which ways, if the progression bar is outside the Body tag, the progression bar can be continued also as the Body tag is being changed.

That’s an amazing use-case; however, when I saw this, my prompt ideas mosted likely to piling context Piling context is the secret to understanding z-index layering If you have actually ever before seen a programmer utilizing a CSS residential property like:

z-index: 999999999;

… it’s due to the fact that they do not recognize just how z-index functions; and also, they’re simply tossing numbers at the wall surface to see what sticks. It’s an useless effort to damage without a “piling context” that is locking-down layering within a branch of the DOM.

The major provided branch of the DOM is the << body>> aspect. Which ways, if we can develop a “piling context” on the Body tag itself, anything beyond the Body, will certainly remain in a various piling context and also can easily pile over or listed below the Body layer.

To show this, I have actually produced a web page with 2 << div>> components utilizing z-index: 2 They are both specified in between the Head and also Body tags; nonetheless, among them is dynamically infusing itself after the << head>> utilizing JavaScript:

<.
<< html lang=" en">
<> < head>>.
<< meta charset=" utf-8"/>>.
<< meta name=" viewport" web content=" size= device-width, initial-scale= 1"/>>.
<< web link rel=" stylesheet" kind=" text/css" href=" https://www.bennadel.com/blog/./demo.css"/>>.
<< design kind=" text/css">

>/ **.
* Producing a PILING CONTEXT around the body.
*/.
body {
placement: loved one;
z-index: 0;
}

/ **.
* Producing a CONTROL item for layering. Utilizing a z-index of "999999", which is.
* more than the various other 2 components (listed below). Nevertheless, the piling context on the.
* BODY aspect modifications just how points are aesthetically piled.
*/
. box {
placement: repaired;
z-index: 999999;/ * << --------- HIGH z-index worth. */. } . fixed { boundary: 2px strong blue; placement: repaired; z-index: 2;/ * << --------- LOWER (than BOX) z-index worth. */. } . vibrant { boundary: 2px strong hotpink;. placement: repaired;. z-index: 2;/ * << --------- LOWER (than BOX) z-index worth. */. } <. <. <

RELATED ARTICLES

Most Popular

Recent Comments