Skip navigation
npolet86
Currently Being Moderated

How to specify alternate content at a specific browser size?

Apr 10, 2013 12:01 PM

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!

 
Replies
  • kglad
    72,212 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 10, 2013 1:33 PM   in reply to npolet86

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

     
    |
    Mark as:
  • kglad
    72,212 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 10, 2013 11:21 PM   in reply to npolet86

    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";

    }

    }

    };

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points