Jquery Plugin: how use window resize?

Question

Looking for create my very first Jquery Plugin. Basically center vertically a div in a blank page.

    (function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var $heightDiv      = $this.height();
        var $heightWindow   = $(window).height();
        var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
        var applyMargin     = function() {
            $this.css('margin-top',$marginTop+'px');
            console.log($heightWindow);
        }
        $(window).resize(applyMargin);
        applyMargin();
        return $this;
    }; // fn.centerdiv
})(jQuery);

It works but not for the "window resize". Found another answer ( jQuery $(window).resize not firing within jQuery plugin ) but adding "window" after $ does not solve my problem. How i can have this plugin working also with window resize? Thank you to all!

Edited with answer...

Jasper · Accepted Answer · 2013-10-04 19:34:41Z

2

this in the context of your window.resize event handler refers to window. You should store a reference to the outer this so you can use it within the event handler:

...
var $this = $(this);
    $(window).resize(function() {
        $this.css('margin-top',$marginTop+'px');
    });
...

You also need to place your return at the end of the function, everything after it does not execute.

answered Oct 4, 2013 at 19:34

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denys Séguret · Accepted Answer · 2013-10-04 19:33:35Z

2

Two problems here

that you're applying the css to the window.
that part of your code is after the return statement.

Replace

return this.each(function() {
     $(this).css('margin-top',$marginTop+'px');
}); // return
$(window).resize(function() {
     $(this).css('margin-top',$marginTop+'px');
});

with

var $this = $(this), f = function(){
    $this.css('margin-top',$marginTop+'px');
}
$(window).resize(f);
f();
return $this;

and put that before the return statement.

answered Oct 4, 2013 at 19:33

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

1 Comment

sineverba Over a year ago

Edited code with your answer, but it doesn't resize with window. Did i make some other mistake? Thank you very much

sineverba · Accepted Answer · 2013-10-04 20:06:52Z

0

Solved: i did not re-calculate height of window. This is final code. Do you think is it right?

(function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var calculateMargin = function() {
            var $heightDiv      = $this.height();
            var $heightWindow   = $(window).height();
            var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
            return $marginTop;  
        }
        return this.each(function() {
            var $marginTop = calculateMargin();
            $this.css('margin-top',$marginTop+'px');
            $(window).resize(function() {
                var $marginTop = calculateMargin();
                $this.css('margin-top',$marginTop+'px');
            });
        }); 
    }; // fn.centerdiv
})(jQuery);

answered Oct 4, 2013 at 20:06

sineverba

5,1828 gold badges49 silver badges99 bronze badges

2 Comments

Jasper Over a year ago

You are doing more work than necessary. You're caching $(this) as $this, which can contain multiple elements. And then you're binding a window.resize event handler for every event, but inside that event handler you're applying CSS to all elements in the $this object. I'd either create the $this variable within the .each() loop or bind to window.resize only once. Also, generally starting a variable with $ in a project that uses jQuery signifies that the variable is a jQuery object.

sineverba Over a year ago

Thnak you for your feedback. I would learn,so could you write changes to improve this micro plugin? Thank you

Collectives™ on Stack Overflow

Jquery Plugin: how use window resize?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related