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));
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.net/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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With