0

I have a responsive site that responds to 3 different sizes, mobile, tablet and laptop.

I have an Ad which appears only when the viewport is <= 625:

if ( adWidth <= 625 )
        google_ad_size = ["100", "50"]; 

      document.write (
       '<ins class="adsbygoogle" style="display:inline-block;margin-top:45px;width:' 
       + google_ad_size[0] + '%;height:' 
       + google_ad_size[1] + 'px" data-ad-client="' 
       + google_ad_client + '" data-ad-slot="' 
       + google_ad_slot + '"></ins>'
       );

So when the page is loaded the ad wont appear when unless it's <= 625.

The problem is that when you resize the browser the Ad won't disappear unless you refresh the page, this is a problem because it breaks my heading making it unreadable.

I have some jQuery which detects if media queries are a being used:

 function media_query(obj) {
     size = obj();
     if (size != currentSize) {
         if (size == 'tablet') {
             var refesh = document.getElementById('sglHead');
             $('#sglHead').html(refresh);
             currentSize = 'tablet';
         }
     }
 }

 $(window).resize(_.debounce(function () {
     media_query(mqCSS);
 }, 10));

As you can see I've attempted to do it with .html() but no luck:

The container itself looks like this:

So how can I refresh the contents of <header id="sglHead"> when the media query "tablet" is true?

UzumakiDev
  • 1,286
  • 2
  • 17
  • 39

2 Answers2

0

I don't think you're "allowed" to refresh containers for Adsense. I'd figure that would bloat your numbers perhaps.

See this post for more information: Refresh a Div that has a Google ad inside it

As a workaround, why not put a fixed size div around the ad box which will mean your headers stay in position no matter what the viewport size is? Also, I think that by-and-large, resizing a browser window by dragging the corners isn't something you should have to account for when making "responsive design". I could be wrong though.

Community
  • 1
  • 1
aaron-bond
  • 3,101
  • 3
  • 24
  • 41
  • Thanks, well that's annoying. It might not be something you have to account for but I like to have browser windows snapped to each side of my window so it's common for me to resize windows and the website looks broken if I were to do this without refreshing the page. – UzumakiDev Jan 27 '14 at 17:34
0

Try:

setInterval(function() {
    //this code is executed every 4000 ms
}, 4000);

and you can add your ad in a iframe, and refresh it easily

geekslot
  • 213
  • 1
  • 4
  • 11