Hi there mailtome,
you may find this of interest
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>increase font-size</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
font-family:arial;
font-size:8px;
background:#009;
}
#enlarge {
width:50%;
padding:30px;
text-align:justify;
border:inset 6px #009;
background:#ddddff;
margin:auto;
}
#control {
width:108px;
border:solid 1px #009;
background:#b2b2e0;
padding:2px;
}
#control input {
width:30px;
margin:1px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=8;
function increase() {
i++;
if(i>30) {
i=30;
return;
}
document.getElementById("enlarge").style.fontSize=i+"px";
document.forms[0][1].value=i+"px";
}
function decrease() {
i--;
if(i<8) {
i=8;
return;
}
document.getElementById("enlarge").style.fontSize=i+"px";
document.forms[0][1].value=i+"px";
}
//]]>
</script>
</head>
<body>
<form action="">
<div id="control">
<input type="button" value="↑" onclick="increase()"/>
<input id="pix" type="text"value="8px"/>
<input type="button" value="↓" onclick="decrease()"/>
</div>
</form>
<p id="enlarge">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit
venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt
nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non magna.
Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem.
Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis.
Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis
a, accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a
pulvinar adipiscing, est orci adipiscing felis, sed laoreet urna magna quis neque.
Proin facilisis aliquet urna.
</p>
</body>
</html>
coothed
Bookmarks