jQuery plugin for user controlled font size
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 39 commits ahead of wormracer08:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
qunit @ 6ec4cc2
test
.gitmodules
README.md
gpl_3.0.txt
index.html
jquery.fontSizer.js
mit_license
style.css

README.md

Font Sizer - A jQuery Plugin

Version 1.x

Version 2.x

Version

  • 1.0.0 (08/10/2011) by Aaron Tennyson
  • 2.0.0 (03/24/2012) by mon_sat

Requires

  • jQuery v1.3+ (Version 1.x)
  • jQuery v1.7+ (Version 2.x)

Dual licensed under the MIT and GPL licenses:

USAGE ( version2.x )

basic

<div id='control-wrap'><!-- create buttons here --></div>
<div class="main">
  <h1>Header</h1>
  <p>contents</p>
</div>
$(function(){
  $('.main').fontSizer();
});

links to change fontSize

<div>
  <a href='#' id='fontSizerLargest'>Largest</a>
  <a href='#' id='fontSizerLarger'>Larger</a>
  <a href='#' id='fontSizerReset'>Reset Size</a>
  <a href='#' id='fontSizerSmaller'>Smaller</a>
  <a href='#' id='fontSizerSmallest'>Smallest</a>
</div>
<div class="main">
  <h1>Header</h1>
  <p>contents</p>
</div>
$(function(){
  var $target = $('.main');
  $('#fontSizerLargest').click(function(){
    $target.fontSizer(18);    // 18px , or 'max'
  });
  $('#fontSizerLarger').click(function(){
    $target.fontSizer('+2');  // +2px
  });
  $('#fontSizerReset').click(function(){
    $target.fontSizer(14);    // 14px , or 'default'
  });
  $('#fontSizerSmaller').click(function(){
    $target.fontSizer('-2');  // -2px
  });
  $('#fontSizerSmallest').click(function(){
    $target.fontSizer(10);    // 10px , or 'min'
  });
});

activate by html attributes

You can activate fontSizer on your page easily without having to write javascript. Just set data-fontsizer-inc="+3" or data-fontsizer-size="max" on link element with a data-target=".target" (target element).

<a href="#" data-fontsizer-inc="+3" data-target=".main">3px Larger</a>
<a href="#" data-fontsizer-inc="-5" data-target=".main">5px Smaller</a>
<a href="#" data-fontsizer-size="17" data-target=".main">Set to 17px</a>
<a href="#" data-fontsizer-size="min" data-target=".main">Smallest</a>
<a href="#" data-fontsizer-size="max" data-target=".main">Largest</a>
<a href="#" data-fontsizer-size="default" data-target=".main">Set to default fontSize</a>
<div class="main">
  <h1>Header</h1>
  <p>contents</p>
</div>

options

key default value note
maxSize 18 max fontSize.
minSize 12 minimum fontSize.
increment 2 fontSize to increment / decrement
baseSize 14 default fontSize.
controlWrapID 'control-wrap' create fontSizer buttons in the element ID
if [control] option is true.
controls true true if create fontSizer buttons.
textContainerClass 'fs-text' wrapper element to change fontSize.
elements 'h1, h2, h3, h4, p, ul' change this elements fontSize
buttonStyles※ { enable: {opacity: '1.0'}, disable: {opacity: '0.5'} } button styles
callback※ function(size){} callback function
imageDir※ 'images/' image directory name

※ This version only.

$(function(){
  $('.main').fontSizer({
    imageDir: '/img/',
    callback: function(size){
      console.log(size.inc, size.before, size.after);
    }
  });
});