Search code examples
javascriptjqueryhtmlcssadblock

jquery selector display and hide


So I have two div's and in each one of them there's a img, first div image will be an ad, provided by a ad manager, when chromes adblocker blocks this ad div I want the second div to display in that same area. below is that code I've written but this doesn't seems to work I guess, pls help me fix this?

html markup

<div class="iw-300x250-right ">
    <img class="iw-300x250-img" alt="" border="0" src="http://addmanagerlink/banners/63-1-1444562919.png" width="300" height="250">
    <div class="iw-boxy-placeholder">
        <img src="imagelink" width="300" height="250">
    </div>
</div>

css

.iw-boxy-placeholder img {
    display: none;
}

js

$(document).ready(function() {
    if ($('img.iw-300x250-img').css('display') == 'none') 
        {
        $('.iw-boxy-placeholder img').css('display') == 'block !important')
    });
    })

Solution

  • There are syntactical issues in your code, apart from that I think you might need a better handler as the blocker can remove the element or it can run after the dom ready so

    $(document).ready(function () {
        var fn = function () {
            if (!$('img.iw-300x250-img').length || $('img.iw-300x250-img').is(':hidden')) {
                $('.iw-boxy-placeholder img').show();
                clearInterval(timer);
            }
        }
        var timer = setInterval(fn, 1000);
        fn();
    })