Font Resizer Function

by seadonk

HTML

<link rel="stylesheet" href="http://www.igniteui.com/igniteui/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://www.igniteui.com/igniteui/css/structure/infragistics.css">
<script src="http://www.igniteui.com/igniteui/js/infragistics.core.js"></script>
<script src="http://www.igniteui.com/igniteui/js/infragistics.lob.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div class="panel panel-primary">
                <div class="panel-heading">Resize_Font Event</div>
                <div class="panel-body">
                    <table class="table table-striped table-hover table-bordered" style="text-align:center;">
                        <tr>
                            <th>Font Size:</th>
                            <td id="fontSize"></td>
                        </tr>
                        <tr>
                            <th>Line Height Size:</th>
                            <td id="lineHeight"></td>
                        </tr>
                        <tr>
                            <th>Font-Resized At:</th>
                            <td id="fontTimeStamp"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Window Size</div>
                <div class="panel-body">
                    <table class="table table-striped table-hover table-bordered" style="text-align:center;">
                        <tr>
                            <th>Current Window...

CSS

th {
    text-align:right;
    width:150px;
}
td {
    text-align:left;
    width:150px;
}
#first {
    text-align:center;
}
body {
    font-size: 10pt;
    line-height: 2;
}

JavaScript

(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();

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

function sizeChanged() {
    $('#previousSize').text($('#currentSize').text());
    $('#currentSize').text($(window).width() + ' x ' + $(window).height());
    $('#timeStamp').text(getTime());
}

function getTime() {
    var dt = new Date($.now());
    return dt.toLocaleTimeString();
}