Ad

Trigger A Full Height Container When A Minimum Window Width Is Reached

- 1 answer

I am trying to implement a full height slideshow on my website. However, I would like the slideshow to be full height if the browser width is more than 767px.

This is my code so far:

if( $(window).width() > 767) {

  $(window).resize(function() {

   var winHeight = $(window).height(); 
   var headerHeight = $(".navbar").height(); 
   $('.slideshow, .slideshow li').height(winHeight);


  });

  $(window).trigger('resize');

}

It kinda works if I the browser starts on a width greater than 767. However. If if the browser starts on a width less than 767 and I start resizing more than 767, the script does not starts.

Any ideas how I could fix this?

Ad

Answer

The resize event handler is bound when your browser starts up only when width > 767, try removing the if condition and it should work fine

EDIT:

To make it apply only when it's width is > 767, the condition should be inside the resize event

$(window).resize(function() {
  if($(window).width() > 767) {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight);
  } else {
    $('.slideshow, .slideshow li').height(400); //initial height
  }
});
$(window).trigger('resize');
Ad
source: stackoverflow.com
Ad