Perfect overlap of HTML element?

Question

Is it possible to write a JavaScript function that given any HTML element (visible on the screen) it creates another HTML Element to stack above it (so as to cover it)? And then if I resize the page it moves exactly as the component it covers.

(So for instance if I were using getBoundingClientRect it would not work if the original component has the width expressed in percentage)

The function should handle any case whether the element (in input) has margins, paddings, borders, whether its display is block or inline, and so on.

I tried by adding a position: relative to the parent-component and then create a position: absolute on the "cover" component. This did not work, because it does not handle cases like padding or margins.

Note: NO jQuery. Pure 'cross-browser' JavaScript, if possible

Answer 1

I would suggest that you apend an element to the element you wish to 'cover', give parent element position: relative, and give the attached element position: absolute; top:0; left:0; bottom: 0; right: 0;

example...

markup:

...
<div id="content">
    <div class="cover"></div>
    <div></div>
</div>
...

css:

.cover { position: relative; }
.cover .mask { position: absolute; top:0; left:0; bottom: 0; right: 0; }

jQuery

$(function(){
    $('.cover').append('<div class="mask" />');
});

this method will allow you to ignore what happens on any resizing...

=========================

Improvement based on feedback...

The padding shoudl be sorted by position absolute, for the border and margin you will need to use some js and set negative margins on the masking element. The demo link I've included only deals with elements with padding/margin that are uniform - if you have elements with different paddings/margins on each side then you'll have to do a little more parsing.

The additional javascript would look something like:

var $hideme = $('.cover');
$('.mask',$hideme).css("margin", "-="+$hideme.css('border-width'));
$('.mask',$hideme).css("margin", "-="+$hideme.css('margin'));

Demo

Answer 2

written below cover function using jQuery please try out if this work out for you

Hi I have updated code which satisfy your need...

function coverDiv(sourceId, targetId){  
    var source = document.getElementById(sourceId);
    var sourceComputed = window.getComputedStyle(source);
    var target = document.getElementById(targetId); 
    var positioningProps = ["float","width","height","left","top","marginLeft","marginTop","paddingLeft","paddingTop"];
    var cssText = "";
    for(var i in positioningProps){        
            cProp = positioningProps[i];              
            if(source.style[cProp] == "" || source.style[cProp] == null)
                target.style[cProp] =  sourceComputed[cProp];
            else
                target.style[cProp] = source.style[cProp];
    }
    source.style['position'] = "absolute";
    source.style['zIndex'] = "1";
    target.style['position'] = "absolute";
    target.style['zIndex'] = "999";
}

Try demo here:: http://jsfiddle.net/tushhtrivedi/RDFRm/10/

Answer 3

Adding position:relative to the parent component and position:absolute on the cover sounds workable, actually, as long as you take the padding, margins, and border into account. Set the top equal to -1*(padding-top+margin-top+border-width-top), and so on for the other sides. Do this without setting the width or height, and it'll resize itself to stick its edges where you put them. This will, however, fail to work on components that can't contain divs.

To elaborate:

The problem you're having with this approach is that if you try to cover an element with width:100px; padding:10px; border:1px solid black, the cover is only 100 pixels wide and doesn't cover the 10 pixels of padding or the 1 pixel border. You can compensate for this by setting left and right to -11px instead of 0. You'll have to to this in the javascript function that adds the cover, unless everything you're interested in covering has the same padding, borders, and margin.