How to have 3 different FONT SIZES on a web page?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
pavanpuligandla
Forum Contributor
Posts: 130
Joined: Thu Feb 07, 2008 8:25 am
Location: Hyderabad, India

How to have 3 different FONT SIZES on a web page?

Post by pavanpuligandla »

Hii all,
i'm developing a small website, i now need to put Font Size Adjustment feature which users will control them, as per their needs like SMALLER FONT, LARGER FONT, MEDIUM FONT, STANDARD FONT.
when user clicks on anyone of the above the web page should respond accordingly.
example site which i 've gone through was :
http://www.kent.ac.uk/
how should i move on?
3 css files for 3 font sizes (for entire pages, classes)
then writing javascript and calling those functions when links clicked.
is this rite?
can you suggest me how to proceed pls.
many thanks,
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: How to have 3 different FONT SIZES on a web page?

Post by kaszu »

Instead of 3 css files, better use 3 classes, and assign one of them to <body>. It should be easy (small amout of code) because font sizes in CSS you have in em not px.
When link is clicked, with javascript assign appropriate class and save a cookie, next time when page is generated read cookie and assign correct class already on server, then content won't 'jump' (if it would be done with javascript).
Also don't forget about fallback if javascript is disabled.

Eg:

Code: Select all

<div id="fontSizes">
    <a href="?fontsize=1">S</a>
    <a href="?fontsize=2">M</a>
    <a href="?fontsize=3">L</a>
</div>

Code: Select all

$('#fontSizes a').click(function () {
    //Get size number from href attribute
    var size = $(this).attr('href').match(/=([0-9])$/)[1];
 
    //Remove existing classes and add correct one
    $('body').removeClass('size-1').removeClass('size-2').removeClass('size-3').addClass('size-' + size);
 
    //Set cookie
    ... google will help here ...
 
    //Prevent default behavior: opening ?fontsize=... page
    return false;
});
User avatar
pavanpuligandla
Forum Contributor
Posts: 130
Joined: Thu Feb 07, 2008 8:25 am
Location: Hyderabad, India

Re: How to have 3 different FONT SIZES on a web page?

Post by pavanpuligandla »

Hii.
Thanks fro the comeback,
can you give me any live code for this please.. i tried by using this:

Code: Select all

<ul>
  <li><a href="#" onclick="document.body.style.fontSize='80%'; return false">Small Font</a></li>
  <li><a href="#" onclick="document.body.style.fontSize='100%'; return false">Medium Font</a></li>
  <li><a href="#" onclick="document.body.style.fontSize='120%'; return false">Large Font</a></li>
</ul>
but i cannot see any change, can you please paste any live code here..
many thanks again..
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: How to have 3 different FONT SIZES on a web page?

Post by kaszu »

You are using jQuery (1.2 version), so here is a snippet for current website:

Code: Select all

var a = jQuery('#fontSizeLinks a'); //Get all 3 links
    a[0].size = 80;   //Set attribute size with value 80 to first link, jQuery 1.2 didn't had .data() function yet :(
    a[1].size = 100;  //100 to second
    a[2].size = 120;  //120 to third
    
//When any of those links are clicked
a.click(function () {
    //CSS value 80% or 100% or 120%
    var css = this.size + '%';
 
    //Set body size to that value
    $('body').css('font-size', css);
 
    //Prevent default behaviour, whatever 'setActiveStyleSheet' is
    return false;
});
Checked code you posted and it worked for me!
Post Reply