The following function, containing a "resize" event, works fine when i resize the window by dropping a border with the mouse, but when i maximize the browser or i restore the window the script doesn't work. It works fine in the other browsers.

What could be the reason?

(function ( $ ) {
    jQuery.fn.font_resizer = function () {
        var self = jQuery(this);
        var fontSize = self.css('fontSize').slice(0, -2);
        var lineH = self.css('lineHeight').slice(0, -2);
        jQuery(self).resize_font(self, fontSize, lineH);

        jQuery(window).on('resize', function() {
           jQuery(self).resize_font(self, fontSize, lineH);
        });
    };
    } (jQuery));

The following function, containing a "resize" event, works fine when i resize the window by dropping a border with the mouse, but when i maximize the browser or i restore the window the script doesn't work. It works fine in the other browsers.

What could be the reason?

(function ( $ ) {
    jQuery.fn.font_resizer = function () {
        var self = jQuery(this);
        var fontSize = self.css('fontSize').slice(0, -2);
        var lineH = self.css('lineHeight').slice(0, -2);
        jQuery(self).resize_font(self, fontSize, lineH);

        jQuery(window).on('resize', function() {
           jQuery(self).resize_font(self, fontSize, lineH);
        });
    };
    } (jQuery));

• javascript
• jquery
• google-chrome

• where is the method resize_font declaration? – Prog Mania Commented Mar 4, 2014 at 6:33
• it's located immediately below this declaration. Both methods are declared in the main scope (outside the "$.ready" too). – Anarcociclista Commented Apr 8, 2014 at 18:46

1 Answer 1

This works for me on Chrome Version 42.0.2311.90 m.

jQuery(window).on('resize', function() {...} Works on window maximize as well as on resizing the window borders. It does not work on window minimize/restore, since the size does not change, so this shouldn't affect you.

JSFiddle: https://jsfiddle/seadonk/jafdoex8/

I did not see the declaration of your font_resize event, so I made my own, that just sets the font size and line height according to window width and height.

(function ($) {
    jQuery.fn.font_resizer = function () {
        var self = $(this);
        var fontSize = self.css('fontSize').slice(0, -2);
        var lineH = self.css('lineHeight').slice(0, -2);
        jQuery(self).resize_font(fontSize, lineH);
        jQuery(window).on('resize', function () {
            jQuery(self).resize_font(fontSize, lineH);
        });
    };

    //on window resize set the font and line height
    jQuery.fn.resize_font = function (fontSize, lineH) {        
        var self = $(this);
        self.css('fontSize',$(window).width()/1920*36+'pt');
        self.css('line-Height',$(window).height()/1080*36+'px');
        $('#fontSize').text(self.css('fontSize').slice(0, -2));
        $('#lineHeight').text(self.css('lineHeight').slice(0, -2));
        $('#fontTimeStamp').text(getTime());
    };
}(jQuery));

(function () {
    $("body").font_resizer();
});