/    Sign up×
Community /Pin to ProfileBookmark

increase (+) and decrease (-) font size – onscreen controls?

Copy linkTweet thisAlerts:
May 22.2008

Hi

I’ve seen websites where you can click on a + or – to increase/decrease the font size on the screen… rather like selecting ‘view’ ‘text size’ (in FF), except without having to use the menus.

Does anyone know how this is done – sorry if this post is in the wrong forum, wasn’t sure if it was a javascript/css or whatever??!

Thanks
LP

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMay 22.2008 — Most use a stylesheet switcher, which provides access to two alternative stylesheets (with font adjustments made to the styles) through an onclick action (usually by clicking on an image/icon).

Here's an example of the javascript: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Instead of the Input tags, you'd use image tags (or just plain text) nested in links.
Copy linkTweet thisAlerts:
@LouPhiauthorMay 22.2008 — Thanks KDLA... I actually found this great script which appears to do exactly what I want.

Unless anyone knows otherwise?!?!?

[CODE]
JAVASCRIPT BIT::

var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}

}[/CODE]
[CODE]
BODY CODE::

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>[/CODE]
Copy linkTweet thisAlerts:
@CentauriMay 23.2008 — I just hold the "Ctrl" key whilst scrolling the mouse wheel to resize text - no need for onscreen controls.
Copy linkTweet thisAlerts:
@LouPhiauthorMay 23.2008 — And so do I....

I appreciate your comment - but the website in question is a 50 year reunion site, and the users are mostly elderly (all over 50, some closer to 80 years old) and some are short sighted, etc. Most of them are new to the internet - and aren't likely to know that holding Ctrl and using the mousewheel (if their mouse in fact HAS a wheel!) will increase/decrease the text size.

Remember, not everyone is a web developer and alot of people don't actually realise some of the functions available in web browsers.

Anyway, like I said, I've found a script that works perfectly....

Cheers!!

LP
Copy linkTweet thisAlerts:
@ggmargaApr 28.2011 — I rwgistred here only because I want it to reply to some of these guys who respond to this post.

Gentlemen, appreciating you are good developers, you must understand you are not good when we talk about UI, about usability and such...The man just asked a simple question, dont be such a smart a... because he know what he want it more than you. Maybe you are not aware but there are some standtards to follow when you develop some special websites (governmentals, for pesons with handicap).

I know all of you can click CTRL and mouse wheel to enlarge your pages...but next time when you make these comments think .. what if you dont have 2 hands.

Is like you go to a bank and you jump over a handicap ramp. Think then that might be persons who actually will use that ramp with his (her) wheelchair. Even you are able to jump over it, not everybody in this world is lucky like you (not to mention smart like you).
Copy linkTweet thisAlerts:
@kubik101Feb 09.2017 — I know this is an old thread, but I found the answer LouPhi provided helped me. I just want to thank you LouPhi.

=)
Copy linkTweet thisAlerts:
@beezeeesFeb 23.2017 — Hello

Thank you for this wonderful story, and we are waiting for more, and I wish you the offer to provide another

Greetings
×

Success!

Help @LouPhi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...