Introduction
Today, we will be learning something about accessiblity. Well, some people may think that it's not important browsers has the zoom in and zoom out functionality anyway, oh well, that's quite true but design wise, when you use the zoom feature on browsers, it's more likely to ruin your design as well. So, we have this javascript font resizer that allow you to resize some section of your text instead of everything.
This tutorial focuses more on the javascript, so the HTML and CSS are really basic.
1. HTML
Alright, we just have to make sure the class name is correct, and then you can style it up with images and hover effect.
<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontReset">Reset</a> | <a href="#" class="fontSizeMinus">A-</a>
2. CSS
Shortest CSS ever! I set the default font size to 14px. It doesn't matter if you specified the font size in percentage.
body {
font-size:14px;
font-family:arial;
}
a {
color:#c00;
text-decoration:none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
3. Javascript
Lastly, the magical jQuery! Don't freak out because of the length, 50% of the code is comments and it's very simple.
$(document).ready(function () {
//min font size
var min=9;
//max font size
var max=16;
//grab the default font size
var reset = $('p').css('fontSize');
//font resize these elements
var elm = $('p.intro, p.ending');
//set the default font size and remove px from the value
var size = str_replace(reset, 'px', '');
//Increase font size
$('a.fontSizePlus').click(function() {
//if the font size is lower or equal than the max value
if (size=min) {
//decrease the size
size--;
//set the font size
elm.css({'fontSize' : size});
}
//cancel a click event
return false;
});
//Reset the font size
$('a.fontReset').click(function () {
//set the default font size
elm.css({'fontSize' : reset});
});
});
//A string replace function
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
Conclusion
Easy isn't it? You can style up the "increase font size" and "decrease font size" with icons to make it more presentable. jQuery has definitely change the way we code javascript, back to the old day, this piece of code wouldn't able to achieve such a easy and short code.
BestHostingSearch.com, a top web hosting review site, has added this feature to all of their articles by following this tutorial, which allows readers to adjust the font size handy and makes the reading easily.
Like this tutorials? Share it with you friends! Visit us more often for more tutorials. Thanks.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.Also, this doesn't allow the use of the mouse wheel for faster zoom; it sets a maximum size which would still be too small for comfort on one of my own displays; it isn't persisted to other pages on the same site; it obviously won't work without Javascript; it requires the designer to add clutter to the page UI; and it contributes to the misguided culture of training users to expect in-page resizers instead of using browser features (would you rewrite a "back" button as a Javascripted element in your page?).
I just don't get why you'd spend time implementing a half-baked solution like this instead of the far, far better one that comes for free.
Cheers
best wishes
size = reset;
(Add it behind "elm.css({'fontSize' : reset});".)
Cheers,
Paul
size = str_replace(reset, 'px', '');
Cheers,
Paul
http://simpleritsolutions.com/font-resizer
//min font size
var min=9;
//max font size
var max=25;
//font resize these elements
var elements = ['p', 'h1', 'h2', 'div'];
//Increase font size
$('a.fontSizePlus').click(function() {
//if the font size is lower or equal than the max value
$(elements).each(function(key, val) {
var size = str_replace($(val).css('fontSize'), 'px', '');
if (size<=max) {
//increase the size
size++;
//set the font size
$(val).css({'fontSize' : size});
}
});
//cancel a click event
return false;
});
$('a.fontSizeMinus').click(function() {
$(elements).each(function(key, val) {
var size = str_replace($(val).css('fontSize'), 'px', '');
if (size>=min) {
//decrease the size
size--;
//set the font size
$(val).css({'fontSize' : size});
}
});
//cancel a click event
return false;
});