Text's Size Script

[23.12.2012]

I'm new to JavaScript, I'm currently working on a template, and I'd like to know how can I Increase/Decrease the text's site (ex.: http://joomla.org). I know the XHTML integration, but I don't know what the JS code should be. Thanks in advance!

[aspnetguy]

you can increase the text's size with the style attribute.HTML

<div id="myText"></div>

JS

var container = document.getElementById('myText');container.appendChild(document.createTextNode('A little bit of text to resize.'));container.style.fontSize = '24px';

[jeffman]

The snippet below is untried but probably in the ballpark. Note that it would be called for one page element only. To increase the size of a whole bunch of elements with custom increments, you'd call it repeatedly. You'd only need the unit argument if you use different units all around your page; if you consistently use ems or pixels or whatnot, then that unit can be embedded in the function.

function increase_font_size (the_element, the_increment, the_unit) {   var el = document.getElementById(the_element);   var my_size = parseFloat (el.style.fontSize);   my_size += the_increment;   el.style.fontSize = my_size + the_unit;}// a sample implementationincrease_font_size ('footer', 0.2, 'em');

If your whole document only has one font size, then just mess with document.body.style.fontSize

[23.12.2012]

I don't want to set its exact size. Just the whole page's text size to grow 1px bigger when the visitor clicks the link.

[jeffman]

I don't want to set its exact size. Just the whole page's text size to grow 1px bigger when the visitor clicks the link.

Almost no one here offers a perfect drop-in solution. Think of what we gave you as a set of tools you can use to create your own solution. (And without too much adjusting, really.)

[justsomeguy]

Your site needs to be set up a certain way. You need to have a single pixel text size defined on an element like body, and every other element needs to define the text as a percentage.

body{  text-size: 12px;}div {  text-size: 100%;}h1{  text-size: 150%;}.fine_print{  text-size: 80%;}

Then when you change the text size for the body element, everything else that uses a percentage will scale accordingly.