1

Short Version: Do you see any errors in this if/else statement? 

<script type="text/javascript" charset="utf-8">
     function more() {
        document.getElementById("more").style.display = "flex";
        if (window.matchMedia('screen and (min-width: 1161px)')){
           document.getElementById("sidebar2").style.height = "8500px";
        } else {
           document.getElementById("sidebar2").style.height = "12800px";
        }

        document.getElementById('moreBtn').style.display = "none";
     }
  </script>

What I need it to do is check the width of the document and adjust the height of the page accordingly. If document > 1161px wide, height = 8500px. Otherwise, height = 12800px.

Full Version: I am working on a site that has a repeating image in the left sidebar and a photo gallery in the main content. When the user clicks "See More" at the bottom, more images appear. When this happens I need the image in the left sidebar to extend the full height of the page. It seems to work fine on my PC, but not on an iPad. Specifically, the page loads with the correct height but when I click on "See More", the if/then statement isn't working, so it's pulling the height from the "if" rather than the "else".

The staging site can be viewed here.

Shane Skinner
  • 51
  • 8
  • 2
    Why are you not just using media queries in CSS? – epascarello Aug 18 '15 at 16:40
  • Do you have a responsive meta tag in your `head` to make sure you're window width isn't "fitting to size" ? https://css-tricks.com/snippets/html/responsive-meta-tag/ – azium Aug 18 '15 at 17:04
  • @epascarello I am using media queries for the initial page load, but when the page size changes (when the user clicks "See more" and more photos load), I'm trying to use JS to make the adjustment. – Shane Skinner Aug 19 '15 at 00:11
  • @azium I'm using ``. I removed the initial scale and used what was suggested on that article, but it still didn't work. I'm digging into that more now, thanks for sharing the link. – Shane Skinner Aug 19 '15 at 00:22

0 Answers0