Jump to content

Kabyanil Talukdar

Approved members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Kabyanil Talukdar

  1. Hello, I have been trying to display multiple banners of different heights depending upon the screen size. I'm using HTML banner to achieve this. First, I am uploading 3 banners (one for desktop, one for tab, one for mobile) using the WYSIWYG editor. After upload, I am switching to text based editor and adding JavaScript to append the images into a div according to the screen size. My current implementation looks like this - <div id="ad_placeholder" style="text-align: center;"></div> <script> if (screen.width > 600) { // desktop document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/dc37e4c835c50b5d1a34e9d5c8a0c0a4.png" alt="" width="300" height="728" />'; } else if (screen.width > 600 && screen.width<= 1200) { // tablet document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/066856651ffe92faa1f53b7697323ad0.png" alt="" width="728" height="90" />'; } else { // mobile document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/12ded462d106e8bf0c220c01fb7fd26c.png" alt="" width="300" height="250" />'; } </script> However, the zone I created (specified width *, height *) gets embedded into the website as an <iframe>. Due to which, I am not able to adjust the iframe height based on the content inside it. I tried adjusting the height using JavaScript, but received a cross origin error. How do I show banners of multiple heights inside the same zone based on the screen size?
×
×
  • Create New...