I'm not clear on how to make this work

I'm also trying to make this work. Anybody know how??

Me too: any documentation would be appreciated, even if it's a rough draft... thanks again for the module!

I think I've got it figured out. I first tried to add my class to the "target tag" field in the JQuery Fontsizer Demo Block but I could never seem to get that to change any font sizes. Besides, even if it did change the font size you still have the problem of all that demo text in the block. The only way to get rid of that is to hack into the module and delete it.

Here is what you do to get a working fontsizer.

- enable the JQuery Fontsizer Demo Block and put it anywhere on your page
- then view the page source code to see what the module is generating, what you're looking for here is the stuff between and including the span tags.

This is what the code looks like when using the demo block and viewing the html source;

<span id="fontsizer"><a onclick="$.FontSizer.DecreaseSize('#fnt-demo');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-dec.png" alt="Decrease font size"></a><a onclick="$.FontSizer.IncreaseSize('#fnt-demo');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-inc.png" alt="Increase font size"></a><a onclick="$.FontSizer.Reset('#fnt-demo');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-res.png" alt="Reset font size"></a></span>

- copy that code or I suppose you can just use what's in this post, that's what I would do because I'm lazy like that.
- create a new block and call it whatever, I called mine fontsizer.
- configure the new block and paste the code you copied into the block body textarea.
- figure out the css selectors for the fonts you want to increase/decrease. I use firefox's webdeveloper plugin to determine the selector, mine happens to be #content.
- change "#fnt-demo" to the tag you are targeting. For me, I want to effect the paragraph fonts in the content area so I changed "#fnt-demo" to "#content p".

Note there are three places to change it within the span tags,
- "$.FontSizer.DecreaseSize('#fnt-demo');"
- "$.FontSizer.IncreaseSize('#fnt-demo');"
- "$.FontSizer.Reset('#fnt-demo');"

- save your block and put it wherever you want
- you can now set JQuery Fontsizer Demo Block to not show anywhere as it's no longer needed.

This worked great for one site I'm working on but I'm having a little trouble figuring out the correct selector to use on another site. Anyway, I hope this makes sense and helps you.

Tim

Bingo! Thanks, twooten, that did the trick!

One more important thing. Once you create a new block with this kind of content:

<span id="fontsizer"><a onclick="$.FontSizer.DecreaseSize('.content');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-dec.png" alt="Decrease font size"></a><a onclick="$.FontSizer.IncreaseSize('.content');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-inc.png" alt="Increase font size"></a><a onclick="$.FontSizer.Reset('.content');"><img src="/sites/all/modules/jquery_fontsizer/images/fontsizer-res.png" alt="Reset font size"></a></span>

you also have to change the obj parameter in the module settings (http://example.com/admin/settings/jquery_fontsizer):

$(document).ready(function() { 
var optns = { obj:  '.content', min:  -3, max:  3, step: 1, unit: 'em', def:  0 }; 
$.FontSizer.Init(optns); 
});

Interesting... I didn't change anything in mine and it still seems to be working ok.

Yeah, if I leave it as 'body', then the font size resets to the default of my browser, which is 16px. I could change the default font size in the browsers, but it wouldn't solve the problem for those coming to the website. I just want to have more control over this.

I tested it in both Firefox 3 and IE7...

you can edit jquery_fontsizer.module file, search for "body" text and you'll find similar code that u have seen in fontsizer.js, change it to your css class or Id, the font size of the rest site is deifned by your css, not by style="fontsize: 1em"