0

My DIV #sequence is to be full height of the browser window for window sizes greater than 920px in height. When its greater than 920px in height I want to fire a plugin, for window sizes lower than 920px I want the #sequence div to be the height set in my CSS file as a fallback. This works when the page is loaded, however I cannot get the resize event to fire, its unresponsive and I see no errors in console.

This is my code mostly taken from this post Do something if screen width is less than 960 px:

var eventFired = 0;

if ($(window).height() < 920) {

} else {
    fitSequence();  
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired == 1) {
        if ($(window).height() < 920) {

        } else {
            $(window).resize(function(){ fitSequence(); });
        }
    }
});

Just as an FYI here's the fitSequence plugin I'm referencing:

function fitSequence(){
var height=$(window).height();

$('#sequence').css('height',height-100+"px");
};
Community
  • 1
  • 1
egr103
  • 3,858
  • 15
  • 68
  • 119

1 Answers1

2

If condition is not correct:

if (!eventFired == 1) {

It should be:

if (eventFired != 1) {

And in the function part this is ambiguous part of code:

$('#sequence').css('height',height-100+"px");

It should be:

$('#sequence').css('height',(height-100)+"px");
                           ^^ add brackets
Code Lღver
  • 15,573
  • 16
  • 56
  • 75
  • That fixes most of it thanks for the pointers! I forgot about resetting the height of my div for in-frequent occasions when you resize your window back to a smaller height. I fix this by using media queries at the bottom of my styles.css: @media screen and (max-height : 920px) { #sequence { height: 600px !important; } } – egr103 Sep 15 '14 at 11:23