Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by belen gordon
belen gordon
8,362 Points

Need help with jQuery window.resize issue

Hi, I'm doing a one page website, applying mobile first techniques. On mobile devices, the content divs stack on top of each other, for tablets and larger devices the content in each div sits side by side and I want it to take the height of the viewport minus the header. At these larger sizes .section-image has a background image. I have created a jQuery function to do this that works. It makes the divs take up the height of the viewport, however when resizing the browser to a smaller size the .section-image remains the size set with jQuery, resulting in a large empty area.

Can anyone help?

<div id="content">  
                <div id="home" class="row">
                    <section class="section-text small-12 medium-6 columns">
                        <h1>This is a header</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis dui porttitor libero accumsan aliquet. Nulla placerat lacinia erat, vitae sagittis ex vulputate ac. Etiam eu porttitor tellus, eu lobortis ante.</p>
                        <p class="bigger">Phasellus non volutpat mauris, nec bibendum justo. </p>
                    </section><!-- end .section-text -->
                    <div class="section-image branding small-12 medium-6 columns">
                        <p class="row overlay"><a href="#branding">Sed convallis</a></p>
                    </div><!-- end .section-image -->
                </div><!-- end #home -->
                <div id="branding" class="row">
                    <section class="section-text small-12 medium-6 columns">
                        <h1>This is a header</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis dui porttitor libero accumsan aliquet. Nulla placerat lacinia erat, vitae sagittis ex vulputate ac. Etiam eu porttitor tellus, eu lobortis ante.</p> 
                        <p class="bigger">Phasellus non volutpat mauris, nec bibendum justo.</p>
                    </section><!-- end .section-text -->
                    <div class="section-image branding small-12 medium-6 columns">
                        <p class="row overlay"><a href="#who-for">Sed convallis</a></p>
                    </div><!-- end section-image -->
                </div><!-- end #branding -->    

$(function(){
  setHeight();
});
$(window).resize(function () {
   setHeight;
});
function setHeight(){
  // Set measurements 
  var $windowHeight = $( window ).height(); // Returns height of browser viewport
  var $headerHeight = $('#header').outerHeight(true);
  var $contentHeight = $windowHeight - $headerHeight;
  var $overlayHeight = $('.overlay').outerHeight(true);

  // Apply function when media query kicks in
  if ($(".section-image").css("background-size") === "cover" ){
   // Set div height to match window size
   $('#content > div').css('min-height',$contentHeight); 
  // set inner div height to be same as parent div
  $('#content > div').children('.section-text').css({"min-height":$contentHeight});
  $('#content > div').children('.section-image').css({"min-height":$contentHeight});
  // position the overlay to sit at bottom of section
  $('.overlay').css({"top":$contentHeight - $overlayHeight});  
  // footer overlay needs different positioning
   $('footer.overlay').css({"bottom": 0 });
  };
}

4 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Belen,

Currently in your JavaScript you have setHeight; but that won't work as you're not calling a function, simply add parentheses to this so it's setHeight(); and like magic it should begin to behave as expected.

I have noticed that this code will be quite expensive to the repainting step of the page as you're asking the browser to execute quite a lot of changes which will decrease performance, on mobiles it's especially important to trigger as little repaints as possible because you can generally use just CSS which is much faster.

If you know all the height values for your header doing this in CSS is quite a simple task but that would be for another thread as we don't want to clutter this one with two separate discussions.

Also one another improvement you can make is by putting all your code within the jQuery ready function as that will ensure that it only executes when the DOM is ready and not before hand.

$(function() {

  function setHeight() {
    // Set measurements 
    var $windowHeight = $( window ).height(); // Returns height of browser viewport
    var $headerHeight = $('#header').outerHeight(true);
    var $contentHeight = $windowHeight - $headerHeight;
    var $overlayHeight = $('.overlay').outerHeight(true);

    // Apply function when media query kicks in
    if ($(".section-image").css("background-size") === "cover" ){
     // Set div height to match window size
     $('#content > div').css('min-height',$contentHeight); 
    // set inner div height to be same as parent div
    $('#content > div').children('.section-text').css({"min-height":$contentHeight});
    $('#content > div').children('.section-image').css({"min-height":$contentHeight});
    // position the overlay to sit at bottom of section
    $('.overlay').css({"top":$contentHeight - $overlayHeight});  
    // footer overlay needs different positioning
     $('footer.overlay').css({"bottom": 0 });
    };
  }

  // Bind a resize event to the window and trigger it straight away
  $(window).resize(function() {
     setHeight();
  }).trigger('resize');

});
belen gordon
belen gordon
8,362 Points
belen gordon
belen gordon
8,362 Points

Hi Chris, Matt,

Thank you both for answering. I have corrected what you both pointed out () and included Chris's comments however I'm still having the empty/white space when resizing the browser below 640px, it needs a manual refresh to look right. If I look at it on a device or with responsive design view in the browser all seems fine. I also have an issue with positioning the last .overlay. I have set up a live demo in the hope that you won't mind having another look. https://tbw.fwd.wf/demo/

Thanks.

Chris Shaw
Chris Shaw
26,676 Points

There is one thing that I forgot about, mobile and tablet devices don't actually trigger a resize event when you switch their orientation from portrait to landscape therefore you also need to bind the orientationchange event as well.

// Bind a resize and orientationchange event to the window and trigger it straight away
$(window).on('resize orientationchange', function(e) {
    setHeight();
}).trigger('resize');
belen gordon
belen gordon
8,362 Points
belen gordon
belen gordon
8,362 Points

Thanks for that Chris.

Chris Shaw
Chris Shaw
26,676 Points

No worries, if you want to pursue my comment above about making it CSS only don't hesitate to create another thread.

belen gordon
belen gordon
8,362 Points
belen gordon
belen gordon
8,362 Points

Thanks, I'll be trying it later today, as you say it would be much better. If I get stuck I'll get in touch. Thanks for your help