0

I have a question about showing/hiding content based on the size of the browser.

The website that I am coding is currently local, so I can not show the full page. However, the problem is:

The main site is 1000px wide. There is a small panel on the right hand side, OUTSIDE of the 1000px, for special content. The special content is 200px wide, meaning when the browser is SMALLER than 1400px wide, I am given a vertical scrollbar at the bottom. Instead of this, I'd like for that content to be removed/hidden when the browser reaches <1400px. I am using the following code:

    @media all and (max-width: 1400px) {
      #side-items {
        display:none;
      }
    }

This works in Chrome/Safari/Firefox, but does not work in IE (I must support IE8+). Is there a way to cross-browser hide that panel for users with smaller screens? I'm not overly experienced with JS/JQuery, so I'm not sure if there's a script out there that can do what I'm looking for.

Thank you!

user3550137
  • 9
  • 4

3 Answers3

1

Media queries are not supported in IE8. You'll have to use a polyfill to get the functionality you need.

Here is one I've used in the past.

Collin G.
  • 466
  • 2
  • 9
0

You should try this css3-mediaqueries.js is a javascript library that does what you need.

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the and elements.

Typo
  • 1,875
  • 1
  • 19
  • 32
0

Media queries are supported by IE9+, and as mentioned in other responses it is possible to use a poly-fill to supplant the functionality (you might also want to take a look at modernizr).

However, I would encourage you to reconsider the requirement for responsive behavior on IE8. Below are some reasons for why you might want to reconsider your requirements:

  • Windows will stop supporting IE8 in the near future and some companies like Foundation have already taken the initiative to stop supporting it.
  • Consider your audience. Normal users don't tend to re-size their browser window like developers do and people using IE8 are not likely to be on mobile devices. Making it unlikely that someone using IE8 will have a small screen.
  • By using poly-fills for media queries you will be adding styling in your javascript. Creating two places where breakpoints/media queries will have to be maintained (css and js).
  • One technique for dealing with IE8 is to wrap your page styling in media queries, then have another file that gets imported conditionally if the broswer is IE8. This IE8 file imports the necessary styles without media queries to provide a default 'full-view'. What this means is that all browsers will get the responsive styles, except when the browser is IE8 all the media queries will be ignored and the 'full-view' will be imported.
Elmer
  • 809
  • 9
  • 15
  • These are very good suggestions -- thank you! Unfortunately these are client specs (the majority of their users are using IE8 and BELOW) so I can't ignore the issue, but this is definitely something to bring up when suggesting alternatives. Thanks again! – user3550137 Jul 07 '14 at 20:18
  • ah, I understand. Unfortunately big companies often don't have the resources or motivation to update/upgrade their software. Other companies are even restricted by legacy software that doesn't run on newer systems. Best of luck with your site! – Elmer Jul 08 '14 at 17:03