Straight Reload/Refresh of DIV Contents on Window Resize Using

Question

I'm adding Amazon Affiliate banners to my website, but because the banner code isn't responsive, the larger size banners break out of my container in the smaller sizes. I've created the following code so that when the page initially loads, it will load an appropriate sized banner in the correct space. However, I would like to set it so that when the browser window is resized, the DIV containing the banner code (bannerdiv) is refreshed and the script is re-executed.

I'm a novice at this, so your patience and idiot-simple instructions will be appreciated. I'm also sure this code is written in a painfully clunky manner. NOTE: I've updated the code per suggestions in the comments, but it's still not working. Any suggestions?

<script type='text/javascript'>
function loadBanners() {
function lrgBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'AC2XN3SJ34RJMGYK';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '48';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '1XTRE8BRWXGWQJTWPJ82';
 amzn_assoc_width = '728';
 amzn_assoc_height = '90';
}
function medBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'OTLU2UB6UY5JMUHP';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '26';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '0CDY3FGJ2PD68NJXFKG2';
 amzn_assoc_width = '468';
 amzn_assoc_height = '60';
}
function smlBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'G7YQZ5D43772NXLC';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '42';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '1VHGPZ2J9GDJGYKD5G82';
 amzn_assoc_width = '234';
 amzn_assoc_height = '60';
}
    var winwidth = window.innerWidth;
    if (winwidth >= 1200) {
        lrgBanner();
    } else if (winwidth < 980 && winwidth >= 920) {
        lrgBanner();
    } else if (winwidth >=980 && winwidth < 1200) {
        medBanner();
    } else if (winwidth >= 600 && winwidth < 920) {
        medBanner();
    } else {
        smlBanner();
    }
}
loadBanners();
</script>

<div id="bannerdiv">
    <script id="bannerscript" src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>

<script type="text/javascript">
function amznScript() {
    var banDiv = document.getElementById('bannerdiv');
    var oldScript = document.getElementById('bannerscript');
    var newScript = document.createElement('script')
    newScript.type = 'text/javascript';
    newScript.src = '//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1';
    newScript.id = 'bannerscript'
    banDiv.replaceChild(newScript,oldScript);
}
</script>

<script type="text/javascript">
function adBanner() {
    loadBanners();
    amznScript();
}
window.addEventListener("resize", adBanner);
</script>

Answer 1

Found something related to Amazon banners here: Amazon Associates Site

Answer 2

I don't have experience with this particular library, but I'll share some thoughts just looking at your code:

• Do the docs say the numeric variable settings need to be strings or numbers? ( amzn_assoc_width , amzn_assoc_height , etc). Usually, number should be without the quotes ( amzn_assoc_width = 234 instead of amzn_assoc_width = '234' )
• Take the lrgBanner , medBanner , and smlBanner functions OUT of the loadBanners function. You have them defined inside of it. loadBanners will work fine with them outside.
• Because you're defining the variables inside of functions, they may not be getting set where the Amazon script can see them (the global space). In your browser, after the page loads, open the browser console and type in the name of any of the variables in the console and it will output whatever the variable is set to. If it outputs undefined , either you're doing something wrong in the console or the variables aren't being set in the global space. Additionally, try typing window.variableName in the console to double check.
• Related to the previous bullet, try prefixing all the variable definitions in your functions with window. to explicitly set them in the global space, which is where the Amazon script is probably expecting to find them.

Answer 3

If you can't use responsive banners for your category, try just dynamically loading the banners using the iframe banners. Here's an example using jQuery

<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(window).on('load resize', function() {
    winWidth = $(window).width();
    if ( winWidth >= 1200) {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=48&l=ur1&category=home&banner=1T8X6QB60F8G26A33RG2&f=ifr&linkID=WHAOQICV37C7EWOX','width':'728','height':'90'})
    } else if (winWidth >= 600 && winWidth < 1200) {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=26&l=ur1&category=home&banner=017THAMGVS89AQ891982&f=ifr&linkID=5ORSSCSEHTUJ6JZS','width':'468','height':'60'})
    } else {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=42&l=ur1&category=home&banner=1VCFP7EH9H4CBCD6ADR2&f=ifr&linkID=IHZPNRGMTYWEIYAS','width':'234','height':'60'})
    }
});
</script>
</head>

<body>
<iframe id="myBanner" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</body>

Using a blank iframe for the initial load helps to prevent the banner from changing while the page is loading.

Hope that helps!