A A+ A++ how is this done?

MargeS · 08-03-2012 12:33pm #1

I have the source of a page where the user can set the font size by clicking A A+ A++

This is the HTML:

<ul id="idname">
<li id="font-sizer">
<a href="?font-size=normal" class="font-normal"> A</a> 
<a href="?font-size=large" class="font-large">A+</a> 
<a href="?font-size=xl" class="font-xl">A++</a>
</li>
</ul>

This is the CSS:

body {
background-color:#ffffff;
color:#000000;
font-family:arial;
font-size:69%;
}
body.font-large{font-size:80%;}body.font-xl{font-size:100%;}

but there is no link to a jquery file that adjusts the css. Anyone know how this is done?

Giblet · 08-03-2012 2:05pm

Server side, the class is added based on the request. You can do it by adding the class to the body via JavaScript either.

John_Mc · 09-03-2012 10:36am

Probably better to do this on the server side though as you can remember the selected font size when they navigate to another page. Not really possible with a javascript solution.

Sean^DCT4 · 10-03-2012 3:48am

I'd agree with the other comments regarding doing this server-side. However, if you wanted to do this with JavaScript you could try something like the following code example. The only problem is that the page will default back to it's orginial font size on postback/page load. I suppose you could store the current font size in a cookie if you wanted to persist the font size across the site for the duration of the session.

[HTML]<html>
<head>
<script type="text/javascript">
var min=8;
var max=36;
function increaseFontSize() {

var p = document.getElementsByTagName('body'); 
for(i=0;i<p.length;i++) {

if(p.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {

var s = 12;
}
if(s!=max) {

s += 1;
}
p.style.fontSize = s+"px"

}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('body');
for(i=0;i<p.length;i++) {

if(p.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {

var s = 12;
}
if(s!=min) {

s -= 1;
}
p.style.fontSize = s+"px"

}
}
</script>
</head>
<body>
<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tellus quis ligula interdum pretium. Vivamus eu metus ut diam dapibus accumsan. Phasellus ultrices urna vel libero convallis ornare.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin bibendum est vitae elit scelerisque sed varius massa fringilla. Aenean eget viverra est.
Nunc laoreet egestas condimentum. Aenean dolor nisi, vehicula at congue cursus, consectetur in dolor. Donec tempus congue metus congue dignissim. Aliquam vel euismod urna. Donec in velit velit, quis tincidunt ipsum.
Pellentesque euismod, sapien at auctor pretium, mi metus tempus justo, at tempus lectus dui a arcu.
</p>
<p>
Vivamus sed orci at tortor mollis tincidunt. Curabitur consequat lacus ut augue pretium id facilisis lacus tincidunt. Mauris egestas nibh ac nunc convallis egestas. Cras congue porta commodo.
Fusce porttitor viverra mauris eget dignissim. In dignissim tellus et elit malesuada sit amet euismod odio vulputate. Nullam sed dolor ac nisl congue lacinia. Aliquam blandit tortor sit amet nunc interdum tristique.
Etiam scelerisque nibh ultrices tortor dignissim vel dignissim risus consequat. Aenean eu turpis quam, at gravida diam. Nulla fermentum eros dolor.
</p>
</body>
</html>[/HTML]

Giblet · 10-03-2012 11:51am

Probably better to add a class instead! In newer browsers you even have a classList property!

//Quick Examples, the addClass and removeClass should never be defined if classList isn't a property so you can test them, but here I just do the test inside the function...

function addClass(el, className){
//should check is a host property..   
   if(el && el.classList){
      el.classList.add(className);
   }
}

function removeClass(el,className){
   if(el && el.classList && el.classList.remove){
      el.classList.remove(className);
   }
}

A A+ A++ how is this done?

Comments