jQuery Font Sizer
HTML
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="font-sizer">
<span>Font Size:</span>
<button class="test increase" title="Increase Font Size">+</button>
<button class="test reset" title="Reset Font Size">=</button>
<button class="test decrease" title="Decrease Font Size">−</button>
</div>
<p>hello world</p>
CSS
.font-sizer button {
font: inherit;
border: 1px solid black;
padding: 2px 5px;
background-color: transparent;
}
.test button{
border-color: transparent;
}
.font-sizer .increase {
}
.font-sizer .reset {
}
.font-sizer .decrease {
}
JavaScript
(function($){
$.fontSizer = function(options) {
// Load Options
var opt = $.extend({
selector: "body",
sizeMaximum: 50,
sizeDefault: 14,
sizeMinimum: 10,
sizeInterval: 2,
buttonIncrease: ".font-sizer .increase",
buttonDecrease: ".font-sizer .decrease",
buttonReset: ".font-sizer .reset",
}, options);
// Initialize
$(opt.buttonIncrease).click(increase);
$(opt.buttonDecrease).click(decrease);
$(opt.buttonReset).click(reset);
render( $.cookie('font-size') || opt.sizeDefault );
// Increase Handler
function increase() {
size = parseFloat($(opt.selector).css("font-size"));
size = Math.min(size + opt.sizeInterval, opt.sizeMaximum);
render(size);
}
// Decrease Handler
function decrease() {
size = parseFloat($(opt.selector).css("font-size"));
size = Math.max(size - opt.sizeInterval, opt.sizeMinimum);
render(size);
}
// Reset Handler
function reset() {
render(opt.sizeDefault);
}
// Render
function render(size) {
$(opt.selector).css("font-size", size +"px");
$(opt.buttonIncrease).prop( "disabled", (size >= opt.sizeMaximum) );
$(opt.buttonDecrease).prop( "disabled", size <= opt.sizeMinimum );
$(opt.buttonReset).prop( "disabled", (size == opt.sizeDefault) );
$.cookie('font-size', size);
}
};
})(jQuery);
jQuery.fontSizer({selector:"body"});