How to add a marker or addition to an absolutely positioned element after loading it?

Question

So basically I have this layout:

<div id="header"> <div id="elementAbsolute"> <div id="headerElement1"> <div id="headerElement2"> </div> <div id="content"> etc etc 

My problem is that the div id "elementAbsolute" can be accidentally turned on or off on the page. I do not control this. When it should appear on it under the heading, but before the content. Since it is absolutely positioned, it simply appears above the content. It does not create any vertical spaces above or below itself, obviously.

In this particular template, this element should be called where it is in the markup. It cannot be moved. Is there a way, possibly through javascript, to say that if "elementAbsolute" is enabled and exists on the page inside the "header" of the div, move it between the title and the contents of the div and create some spaces?

Also keep in mind that this template is used for multiple sites, so a space can only be added if "elementAbsolute" exists in the "header".

I was thinking about how to use the jQuery after () function to put empty divs before and after it to create this space, but then my problem becomes, I want this function to be executed if "elementAbsolute" is on the pages, otherwise I will have a space, no matter what.

Thanks for any help!

Answer 1

If elementAbsolute has a fixed height, then a simple fix would be to add a space to the header element 1 or 2 instead

 #elementAbsolute + #headerElement1 + #headerElement2 { margin-bottom: 50; /* Size of absolute element /* } 

Answer 2

You can use the + (adjacent sibling) selector in CSS for target siblings. Whenever possible, it is recommended that you use CSS if the browser has JavaScript disabled and helps reduce processor overhead for JavaScript code.

 #special-padding { height : 0; } #header > #elementAbsolute + #special-padding { height : 50px; } 

This requires a little rewrite of your HTML so that the #elementAbsolute and #special-padding elements are next to each other:

 <div id="header"> <div id="headerElement1"> <div id="headerElement2"> <div id="elementAbsolute"> <div id="special-padding"> </div> 

Here is a demo: http://jsfiddle.net/TsPkc/1/

Or you can add a margin element to the element:

 #header > #elementAbsolute ~ #headerElement2 { margin-bottom : 50px; } 

This will add some margin to the last element ( #headerelement2 ), which is a child of the #header element.

Answer 3

if(jQuery("div#elementAbsolute")) { // execute your code }

In addition, you want to have closing tags in your divs.