CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
dsp_099
dsp_099

Reputation: 6121

Overlay an element without replacing it

Say I have something like this:

<a href="/ad.php?go=123">
    <div class="ad"></div>
</a>

Lets say the <div> has height of 50, width of 250, and a background of some generic banner.

What I want to do is not to replace it (which implies erasing the original) but rather create an (what I envision to be) absolutely positioned copy except with a background of white and a higher z-index, rendering the ad invisible.

Think of this as something adblock does, except without toggling off the actual ad, but rather overlaying it with white.

What's the best way to go about something like this?

Thanks.

Upvotes: 2

Views: 559

Answers (3)

Omri
Omri

Reputation: 278

I'd go with a more generic option, inserting the overlay into the element you want to hide

var overlayElement = function (element) {
    var originalDiv = element,
        overlayDiv = document.createElement('div'),
        overlayStyle = overlayDiv.style;
    originalDiv.style.position = 'relative';
    // either:
    overlayStyle.position = 'absoluete';
    overlayStyle.top = 0;
    overlayStyle.left = 0;
    overlayStyle.width = '100%';
    overlayStyle.height = '100%';
    overlayStyle.background = 'white';
    // or pre set it with a css class and:
    overlayDiv.className = 'overlay-div';
    // finally:
    originalDiv.appendChild(overlayDiv);
    return overlayDiv; // just so you can go on working with it
}
var myOverlayElement = overlayElement(document.getElementById('divId'));

Upvotes: 0

moribvndvs
moribvndvs

Reputation: 42497

Just select the anchor and set visibility:hidden. The element will remain, the layout will stay the same, but the ad won't be visible.

$('a').css('visibility', 'hidden'); // replace 'a' with the appropriate selector for your ads, of course

Doing it the hard way

Get the dimensions of the selected element using .width() and .height(). Create a new element and set the height, width, and zindex using .css(). The part that sucks is positioning it. Usually, you can get away with just using .offset() to get the top and left. Sometimes it's trickier. I'd recommend the jQuery UI positioning plugin. Furthermore, the positioning will be off when the browser window is resized. You'll need to handle $(window).resize() and reposition all your overlays. It'll flicker, it'll look like crap... which is why you should just use visibility:hidden. But, suit yourself.

But at a minimum:

var $a = $('.ad');


$a.each(function() {
    var $this = $(this);
    $this.before($('<div></div>')
         .addClass('ad-overlay')
         .css({
            height: $this.height(),
            width: $this.width(),
            'z-index': 1000,
            'background-color': 'white',
            position: 'absolute',
            top: $this.offset().top,
            left: $this.offset().left
        }));
});

Here's a fiddle. http://jsfiddle.net/HackedByChinese/SF4tw/4/

Upvotes: 2

Scott Stevens
Scott Stevens

Reputation: 2651

Firstly, you need a div at the bottom of your site to enlarge and place over the top.

Then enlarge it and position it over the top.

<script type="text/javascript">
document.getElementsByTagName('body')[0].innerHTML += "<div id=\"adblocker\" style=\"background-color:#FFF; position:absolute; z-index:999; display:block;\"></div>"
var blocker = document.getElementById('adblocker');
var ad = document.getElementById('ad');
blocker.style.top = ad.offsetTop+"px";
blocker.style.left = ad.offsetLeft+"px";
blocker.style.width = ad.offsetWidth+"px";
blocker.style.height = ad.offsetHeight+"px";
</script>

I have tested this in Firefox & Chrome, please tell me if it doesn't work.

Upvotes: 2

Related Questions