Using jQuery to Resive Fonts

Resize fonts on demand with jQuery

by pairdocs

HTML

<span>
  <a class="increase">+</a> |
  <a class="decrease">-</a> |
  <a class="reset">reset</a>
</span>

<h1>Resizing Font</h1>

<p>Notice that the header does not change. This is because it is not listed in the jQuery array.</p>

<p>This font will change because the &lt;p&gt; element is listed in the array.</p>

<div class="resizable">This font will change sizes because its class is listed in the array.</div>

CSS

html {
  font-family: helvetica, sans-serif;
  max-width: 500px;
  margin: auto;
  color: #000;
}

p {
  clear: right;
  font-size: 15px;
}

.resizable {
  font-size: 15px;
}

span {
  font-size: 25px;
  float: right;
  display: block;
  font-weight: bold;
}

a {
  color: #417993;
}

a:hover {
  color: #1a3d6e;
}

JavaScript

$(document).ready(function() {
  var resize = new Array('p', '.resizable');
  resize = resize.join(',');

  //resets the font size when "reset" is clicked
  var resetFont = $(resize).css('font-size');
  $(".reset").click(function() {
    $(resize).css('font-size', resetFont);
  });

  //increases font size when "+" is clicked
  $(".increase").click(function() {
    var originalFontSize = $(resize).css('font-size');
    var originalFontNumber = parseFloat(originalFontSize, 10);
    var newFontSize = originalFontNumber * 1.2;
    $(resize).css('font-size', newFontSize);
    return false;
  });

  //decrease font size when "-" is clicked

  $(".decrease").click(function() {
    var originalFontSize = $(resize).css('font-size');
    var originalFontNumber = parseFloat(originalFontSize, 10);
    var newFontSize = originalFontNumber * 0.8;
    $(resize).css('font-size', newFontSize);
    return false;
  });

});