CODEWITHSUNDEEP
javascriptjquery
qadenza
qadenza

Reputation: 9293

removing some dom elements after hard reloading the page

I have this code to remove some DOM elements if they're below a #point position.

Sometimes works, sometimes - doesn't.

After hard reloading the page (Ctrl F5) - it never works. Elements are not removed.

After just F5 - mainly works.

Any help? 

$(document).ready(function(){
    var aoff = $('#point').position();
    var apoint = aoff.top;
    $('.bpart').each(function(){
        let boff = $(this).position();
        let bpoint = boff.top + $(this).height();
        if(bpoint > apoint){$(this).remove();}
    });
});

Upvotes: 1

Views: 356

Answers (1)

yts
yts

Reputation: 1890

The info you gave about F5 vs hard refreshes really helped narrow down the problem!

The problem is that your code is running before the image are loaded. Because of that, the image elements have a height of 0px, which causes your JS to not function properly.

To fix this, instead of waiting for $(document).ready before running your code, wait for $(window).load. This will fire after the images on the page are already loaded.

Upvotes: 2

Related Questions