Question

192

window resize event for backbone view

rated 0 times [ 198] [ 6] / answers: 1 / hits: 15521 / 11 Years ago, fri, july 26, 2013, 12:00:00

I am using Backbone view in javascript.

I have created a backbone view as follows :

var MaskView = Backbone.View.extend({

      className: dropdown-mask,

      initialize: function(){



      },

      onClick: function(e){



      },

      hide: function(){



      },

      makeCSS: function(){

        return {

          width  : Math.max(document.documentElement.scrollWidth,  $(window).width()),

          height : Math.max(document.documentElement.scrollHeight, $(window).height())

        }

      }

    });

i want to capture event of window resizing inside the view.

The problem is that, when the window is completely loaded, and mask view is created from the above backbone view. Now when i resize the window, the mask only covers a partial window area.
I want each time the window is reloaded, the mask also changes its area according to the current window size dynamically.

How do i achieve that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davisbrandtm

Add To Favorites

Follow

Total Points: 387

Total Questions: 99

Total Answers: 106

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 11 Years ago jaelynncherokeeg · Accepted Answer

Backbone relies on jQuery (or zepto) for DOM manipulation. jQuery's .resize() is the event you're looking for, so you'd write something like this:

var MaskView = Backbone.View.extend({

    initialize: function() {

        $(window).on(resize, this.updateCSS);

    },



    updateCSS: function() {

        this.$el.css(this.makeCSS());

    },



    remove: function() {

        $(window).off(resize, this.updateCSS);

        Backbone.View.prototype.remove.apply(this, arguments);

    }

});

That said, I'd wager you don't need to use JavaScript for this at all. Any reason why a plain old CSS style wouldn't do the trick? Something like this:

.dropdown-mask {

    width: 100%;

    height: 100%;

    position: fixed;

}