CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Connor Black
Connor Black

Reputation: 7181

Appending div to page cause entire page to jump

So I'm serving an ad through chitika, and when the ad loads the div gets appended to the page. The problem is, that when I call jquery's .append(), it causes the entire page to "jump" down.

This is how I'm appending the ad:

$('.ad-box').append('<div class="ad" id="chitikaAdBlock-' + placement_id + '"></div>');

I've tried adding every CSS position property to the .ad-box, but nothing seems to preventing the jump.

If someone could help me figure out this bug, I would be very grateful.

Upvotes: 0

Views: 637

Answers (2)

SteamDev
SteamDev

Reputation: 4404

If you already know what the dimensions of the ad will be, give the parent .ad-box the height of the ad with CSS.

.ad-box {
    height:[adHeight]px;
}

This will prevent the ad from offsetting other elements on the page when it arrives.

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

just do 

$('.ad-box').append('<div style="position:absolute;" class="ad" id="chitikaAdBlock-' + placement_id + '"></div>');
                          ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^

Or if you don't want that,

just try giving the .ad-block a min-width and min-height in your css

Upvotes: 2

Related Questions