1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Javascript to show ad code based on browser window size

Discussion in 'Off Topic' started by Amin Sabet, Nov 25, 2015.

  1. Amin Sabet

    Amin Sabet Well-Known Member

    I have two ads.

    This one is a 728x90 Amazon ad:

    Code:
    <script type="text/javascript" language="javascript" src="//c.amazon-adsystem.com/aax2/getads.js"></script>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    aax_getad_mpb({
      "slot_uuid":"123456789-123456789"
    });
    //]]>
    </script>
    And this one is a 320x50 Adsense ad:

    Code:
    [/FONT]
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- small_leader -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:320px;height:50px"
         data-ad-client="ca-pub-123456789"
         data-ad-slot="123456789"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    

    I want a javascript that will show the Amazon ad when the browser window is more than 728px wide and the Adsense ad when the browser window is less than or equal to 728px wide.

    I know how to accomplish this using CSS with display:none, but that violates the terms of the Amazon ad network, so I'm looking for a javascript solution that won't call the ad unless it is showing.

    Would appreciate any help.

    Thanks,
    Amin
     
  2. motowebmaster

    motowebmaster Active Member

    I put ads into an adserver and group the ad sizes into five zones. Then use a single media query to obtain the page width.

    If the width is over 500px, I restate one zone value to make a couple banners wider. If the page is over 800px, I restate two zone values to make the banners 728x90 and the sidebar the largest ad format.
     
    Amin Sabet likes this.

Share This Page