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,
How to have 3 different FONT SIZES on a web page?
Moderator: General Moderators
- 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?
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:
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;
});- 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?
Hii.
Thanks fro the comeback,
can you give me any live code for this please.. i tried by using this:
but i cannot see any change, can you please paste any live code here..
many thanks again..
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>many thanks again..
Re: How to have 3 different FONT SIZES on a web page?
You are using jQuery (1.2 version), so here is a snippet for current website:
Checked code you posted and it worked for me!
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;
});