I have an addClass and removeClass function running on window resize, using an if else statement. The markup is as follows:

$(window).load(function() {
  resize();
});

//Every resize of window
$(window).resize(function() {
  resize();
});

//Dynamically assign height
function resize() {
  // Handler for .ready() called.
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        windowHeight = windowWidth / 1.7777;

        var loadwindowHeight = $(window).height(),
            loadspriteHeight = $('.spritespin-canvas').height();

            if(loadspriteHeight < loadwindowHeight) {
                $('.spritespin-canvas').addClass('height');
            } else {
                $('.spritespin-canvas').removeClass('height');
            }

}

The only problem is, when you resize the window, it keeps repeatedly adding and removing the class, it it possible to run the addClass and removeClass functions once? Any suggestions would be greatly appreciated!

I have an addClass and removeClass function running on window resize, using an if else statement. The markup is as follows:

$(window).load(function() {
  resize();
});

//Every resize of window
$(window).resize(function() {
  resize();
});

//Dynamically assign height
function resize() {
  // Handler for .ready() called.
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        windowHeight = windowWidth / 1.7777;

        var loadwindowHeight = $(window).height(),
            loadspriteHeight = $('.spritespin-canvas').height();

            if(loadspriteHeight < loadwindowHeight) {
                $('.spritespin-canvas').addClass('height');
            } else {
                $('.spritespin-canvas').removeClass('height');
            }

}

The only problem is, when you resize the window, it keeps repeatedly adding and removing the class, it it possible to run the addClass and removeClass functions once? Any suggestions would be greatly appreciated!

• javascript
• jquery
• html
• css

• 1 use hasClass('height') to check api.jquery./hasclass – Sean Wessell Commented Dec 10, 2015 at 16:35
• use $(window).one('resize',func.. instead of $(window).resize(func.. – Vixed Commented Dec 10, 2015 at 16:42

1 Answer 1

You can use .hasClass.

var hasHeightClass = $('.spritespin-canvas').hasClass('height');
if (loadspriteHeight < loadwindowHeight && !hasHeightClass) {
    $('.spritespin-canvas').addClass('height');
} else if (hasClass) {
    $('.spritespin-canvas').removeClass('height');
}