3 Replies Latest reply on Apr 10, 2013 11:21 PM by kglad

    How to specify alternate content at a specific browser size?

    npolet86

      Hi there,

       

      Please let me preface this question by saying that I'm a total newbie when it comes to web development.  I know HTML and a tend to fumble my way through anything else with trial & error (I know, it's not good).  I apologize in advance if this question is too vague- please let me know if you need more details to answer.

       

      I am building a site using Shopify and have customized our landing page to include a simple flash introduction.  My problem is, I'm trying to make the site responsive and so far everything looks great except that when I size my screen past a certain point, my flash file starts getting too small in relation to everything else (it's a long horizontal shape, so there ends up being lots of extra space above and below it).  So my question is: can I specify alternate content for anything below a specific threshold browser size?   If so, how would I code this?

       

      Thank you in advance for any help you can provide!

        • 1. Re: How to specify alternate content at a specific browser size?
          kglad Adobe Community Professional & MVP

          you can use javascript to detect browser resizing.  in the resize listener you can change the innerHTML of any div using javascript.

          • 2. Re: How to specify alternate content at a specific browser size?
            npolet86 Level 1

            Thank you for your help.  I'm afraid that, unless you can elaborate on how to do this, this solution is a bit over my head.  The only experience I have with javascript is copying code and modifying it- do you happen to know of/have an example I might be able to look at and try to figure out?  Thanks again!

            • 3. Re: How to specify alternate content at a specific browser size?
              kglad Adobe Community Professional & MVP

              var currentHTML;

               

              window.onresize = function() {

              if (document.body && document.body.offsetWidth) {

              winW = document.body.offsetWidth;

              winH = document.body.offsetHeight;

              }

              if (document.compatMode=='CSS1Compat' && document.documentElement &&document.documentElement.offsetWidth ) {

              winW = document.documentElement.offsetWidth;

              winH = document.documentElement.offsetHeight;

              }

              if (window.innerWidth && window.innerHeight) {

              winW = window.innerWidth;

              winH = window.innerHeight;

              }

              if(winW<100 && winH<200){  // adjust to suit your needs

              if(currentHTML=="flashHTML"){

              yourflashdiv.innerHTML=your alternative content html code

              currentHTML="alternativeHTML";

              }

              } else {

              if(currentHTML=="alternativeHTML"){

              yourflashdiv.innerHTML=your flash embedding code

              currentHTML="flashHTML";

              }

              }

              };