Page 1 of 1
How to have 3 different FONT SIZES on a web page?
Posted: Tue May 05, 2009 11:09 am
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,
Re: How to have 3 different FONT SIZES on a web page?
Posted: Tue May 05, 2009 12:15 pm
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;
});
Re: How to have 3 different FONT SIZES on a web page?
Posted: Tue May 05, 2009 12:50 pm
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..
Re: How to have 3 different FONT SIZES on a web page?
Posted: Tue May 05, 2009 3:42 pm
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!