Question

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.

Answer 1

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/