ross
Staff
/ Moderator
Aug 16, 2005, 4:32 PM
Post #1 of 1
(3447 views)
Shortcut
|
Tutorial : Dynamic Font Size Changing
|
|
|
Hi everyone.
I was able to get a neat piece of JavaScript to work with Article Manager that will change the font size of specific sections on your site. The effect is going to be pretty much the same as on http://www.wired.com with the text size buttons.
Basically what will happen is you setup alternate style sheets and use some JavaScript to switch which style sheet is currently being used. Each style sheet would be exactly the same except for the font size used for a few of the classes.
To help everyone understand, I thought it would be best to post up an example of this in action. The best part about this is that everything is “copy and paste-able” so if you wanted to try it out just view the source of my example pages or download the attached files.
There are three key sections that you’ll want to look for:
- the three style sheet links and block of JavaScript in the <head> section
- the addition of an onload attribute to the <body> tag
- the three links that tell the JavaScript to swap your current style sheet.
Here’s a link to the scripts in action. In the source of each page you’ll find comments that show you where these three sections are:
http://www.interactivetools.com/staff/ross/dynamic_font_change/index.shtml
In addition to this post I am attaching a .zip file with all the necessary templates and style sheets if you want to use them as a reference point.
Give it a shot and feel free to post up any questions that you come across. I would also be happy to go into more detail on what’s actually happening if you would like to know.
Thanks everyone! I look forward to hearing back from you 
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
(This post was edited by Cliff on Aug 17, 2005, 10:45 AM)
|
font_change_files.zip