fontScaler
The fontScaler plugin adds a font-scaling toolbar to your page. The font-scaling toolbar allows for dynamic user-controlled font-sizes throughout the whole page, or specified parts of the page. fontScaler comes in 2 flavours: fixed increments (A|A|A) or variable increments (+|-).
for bugfixes and feature requests see http://plugins.jquery.com/project/fontScaler
download
download jquery.fontScaler.v0.2.zip
demo: fontScaler with fixed increments
{code type=codetype}
$(document).ready(function() {
$(”.fontScalerFixed”).fontScaler({
target: ‘.fontScalerFixed’,
containerclass: ‘fontScaler’,
store:true,
fixed: {size2: ‘200′,size3: ‘300′}
});
});
{/code}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum laoreet gravida. Proin ligula diam, varius id consectetur hendrerit, condimentum vel ipsum.
demo: fontScaler with variable increments
{code type=codetype}
$(document).ready(function() {
$(”.fontScalerVariable”).fontScaler({
target: “.fontScalerVariable”,
increment: ‘variable’,
fx: ’smooth’,
containerclass: ‘fontScaler’
});
});
{/code}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum laoreet gravida. Proin ligula diam, varius id consectetur hendrerit, condimentum vel ipsum.
options
The following settings are available to customize your plugin instance:
| increment | sets the sort of increment between the font-sizing options. choose fixed for the A|A|A version and variable for the +|- version |
|---|---|
| fixed | These are the different sub-options for the fixed increment version:
|
| variable | These are the different sub-options for the variable increment version:
|
| store | store the current font-size value in a cookie? options: true|false |
| storetime | storage duration (lifetime) of cookie in minutes |
| target | The area of your page where the font-sizing is applied to. uses jquery selectors. the default is set to the body tag. |
| containerclass | sets the class attribute value for the container of the font-scaler buttons |
| fx | animate font-size transitions. default value is normal. set to smooth for smooth transitions when changing font-sizes |
| fxspeed | sets the speed for the animated font-size transition |
Hi, i tried you plugin and have to say NICE!
I added the plugin successfully to a page and integrated it (incl. images & css). The only problem that i got is that i can´t get it working. I think the failure is my html/php.
i try to target all paragraph elements who are children of div.post. here´s the code
jQuery(document).ready(function() {
jQuery(”#container”).fontScaler({
target: ‘.container’,
increment: ‘variable’,
fx: ’smooth’,
fxspeed: ‘500′,
containerclass: ‘fontScaler’
})
})
<div id="fontScaler"><a id="fs_decrease" class="fontScaler" href="javascript:void(0)" title="decrease" rel="nofollow"> - </a>
<a id="fs_increase" class="fontScaler" href="javascript:void(0)" title="increase" rel="nofollow"> + </a>
</div>
i´m more into css, html & php, but i´m a noob at js. maybe you can lend me a helping hand :) thanks a lot!
my explanation might have been a bit techie ;-) let me try to clarify:
The fontScaler html is generated by the plugin and inserted inside the element you apply the plugin to.
i.e.
jQuery(document).ready(function() {
jQuery(”#container”).fontScaler()
})
will insert the fontScaler code into the html element with id=”container”. resulting in:
<div id="container"><div class="fontScaler">
<a id="fs_normal" class="fontScaler" href="javascript:void(0)" title="normal">A</a>
<a id="fs_medium" class="fontScaler" href="javascript:void(0)" title="medium">A</a>
<a id="fs_large" class="fontScaler" href="javascript:void(0)" title="large">A</a>
</div>
</div>
the target option defines the area in which you want the font scaling to occur.
with the containerclass option you can overrule the default class named “fontScaler” that is given to the DIV container.
Really useful plugin. Thank you for releasing it! :)
I'm using it on my blog in the fixed version and I have 3 questions.
1. I'd really appreciate if – clicking on the smaller A – the cookie would be erased. Is it possible?
2. Is it possible to change the expiration date of the cookie via options instead of modify the core js file?
3. Why the smooth fx is not shown on my blog?
This is my option file:
<code class="backtick">jQuery(document).ready(function($){
$("#accessibility").fontScaler({
target: '.entry',
fx: 'smooth',
fxspeed: 100,
containerclass: 'fontScaler',
store: true,
fixed: {
size2: '115',
size3: '130',
title1: 'Dimensione normale',
title2: 'Dimensione media',
title3: 'Dimensione grande'
}
});
});</code>
Thank you for your support. :)
Hi Aldo, good to see that you are using my fontScaler plugin!
I've just released a new version of the plugin that offers the possibility to control the cookie lifetime as you suggested.
The fx might not work on your blog because you are using an outdated version of the jQuery library. Updating your jQuery core file should do it.
as for your question about removing the cookie when clicking on the smaller A: I'm not in favor of adding this to my plugin because the smallest A isn't always set to the initial font size. i.e. a user could also choose to set the middle A as the default font size and use the smaller A to decrease the font-size.
Marc,
Love this plugin – just what I needed. Is there a way to set an upward limit for the variable option?
Thanks!
This looks a great solution. Just one question, I have a site that uses i-frames, can I put the buttons on one frame and relate that to changing the scaling on another frame ?
Many thanks in advance
Phil
@Phil: cross-iframe jquery events probably won't work by default, but google around, there must be some solutions, like this one
@Lisa: limiting the maximum range of the variable font sizing is not possible at the moment, but i’ll add it to my feature requests!
Great plugin! You just saved us a day or two of coding. Adding a max size for the variable option would make it all the better. Thanks for putting this out there.
[...] FontScaler [...]
[...] FontScaler [...]
How I can change line-height option in containerclass ?
sorry for my bad english …
I'd like to use variable but have the reset (medium) in-between them. Is this possible to combine them?
[...] fontScaler Demontração fontScaler [...]
Hi,
i am using your very nice plugin.
but in a website i have updated jquery to the last version : 1.4.2
and form that time it is not working !
i think it's not compatible maybe…could you please help me solving my problem or even update your script.
thank you for your efforts !
hi,
thank you for this amazing plugin !!!!
i have updated my jquery to 1.4.2 and since then the lugin is not working (while it worked well on 1.2.6 and 1.3.2).
maybe there is some optimization to be managed ?? or even something you could indicate me to be used.
thank you?
I have it in pace using the google code and it adds the font buttons but when clicked on nothing happens to the font size. Does it matter that the fonts are specified in px in my CSS?
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$(".Content").fontScaler({
target: ".p-15",
increment: 'variable',
fx: 'smooth',
fxspeed: '500',
store: 'true',
storetime: 'true',
containerclass: 'fontScaler'
});
});
</script>
ok got it working but noticed something weird. I can specify the container div but it only resizes the p tags or paragraph and not the headeig tags h1, h2, h3 and so on. The olny way i could get it to do this was to make the target like this and specify each html element.
target: ".p-15, .p-15 h1, .p-15 h2, p-15 td",
Any way to have it resize all elements in a div you specify? also the heares now are resized based on the cookie even if you select the normal font size they are made smaller than what they should be by default.
Is there any way to specify certain elements or classes/id's to not resize?
I want it to resize the body but not some of the divs in the body.
Any ideas?