This is a simple javascript function that magnifies a text's size on fly, without reload the page.
The script use javascript to modify the CSS attribute, font-size that in javascript is rewritten with fontSize.
The script magnify the text until a max dimension set to 40px.
Download this scriptThe page code
Copy and past this code into the tag <body>;
<style type="text/css">
body{font-size:13px;}
</style>
<script language="javascript">
// Set the actual size to 13px equal to the value of font-size attribute
// on body CSS tag redefinition;
actualSize=13;
function magnifyText(idText){
// Increment of 10%
incrementSize=actualSize*(1.1);
// set a maximum size to expand text: for example 40 px;
if(incrementSize<40){
document.getElementById(idText).style.fontSize =incrementSize+'px';
actualSize=incrementSize;
}
}
</script>
<div id="myText">This is an example to magnify text size on fly.</div><br />
<a href="#" onclick="javascript:magnifyText('myText')">magnify</a>
body{font-size:13px;}
</style>
<script language="javascript">
// Set the actual size to 13px equal to the value of font-size attribute
// on body CSS tag redefinition;
actualSize=13;
function magnifyText(idText){
// Increment of 10%
incrementSize=actualSize*(1.1);
// set a maximum size to expand text: for example 40 px;
if(incrementSize<40){
document.getElementById(idText).style.fontSize =incrementSize+'px';
actualSize=incrementSize;
}
}
</script>
<div id="myText">This is an example to magnify text size on fly.</div><br />
<a href="#" onclick="javascript:magnifyText('myText')">magnify</a>
No comments:
Post a Comment