Font Zoomer JavaScript
This idea come from the Wordpress Zoom Box Plugin. It’s a widget used to change websites font automatically. This simple widget is easy to made and useful for blog / website. This is how to do it:
Adding the Zoom Box
First of all, add a <Div> to make a zoom-box right after <BODY>
<div id="zoom-box">
<p id="zoom-title"><a href="http://thesky.asia/zoom-box/">ZoomBox</a></p>
<p id="zoom-control">
<a href="#" id="zoom-in">-</a>
<span id="zoom-text">10</span>
<a href="#" id="zoom-out">+</a>
</p>
</div>
Floating and Styling the Zoom Box
Make the zoom-box floating as a layer. so, the it won’t interfere the existing layout. This step can be done by css. Setting the box position to absolute and then use the css to dress up the zoom box whatever you like. For example, this is my css code:
<style type="text/css">
#zoom-box {
position: absolute;
top: 10px;
right: 10px;
background-color:#aaa;
border: 1px solid #000;
}
#zoom-box * {
text-align:center;
font-size: 9pt;
margin: 0;
padding: 0;
text-decoration: none;
height: 20px;
}
#zoom-control * {
float: left;
display: block;
width: 25px;
background-color:#FFFFFF;
}
#zoom-control a {
background-color:#CCC;
}
#zoom-control a:hover {
background-color: #333333;
color: #FFFFFF;
}
</style>
Zoom Box Scripting
With above two steps, we’ve got a simple zoom-box widget. But it won’t work yet. To get our zoom-box works, we can use javascript like this:
<script language="javascript">
window.onload = function () {
var iFontSize = 1;
document.getElementById("zoom-in").onclick = function () {
iFontSize -= 0.1;
document.body.style.fontSize = iFontSize + "em";
document.getElementById("zoom-text").innerHTML = Math.round( iFontSize * 10 );
}
document.getElementById("zoom-out").onclick = function () {
iFontSize += 0.1;
document.body.style.fontSize = iFontSize + "em";
document.getElementById("zoom-text").innerHTML = Math.round( iFontSize * 10 );
}
}
</script>
That must works now. If it won’t work, please recheck your HTML / XHTML. Maybe it’s not valid or the page’s structure is broken. Please fix it and try again.
This works very well for me, just one (minor)quirk, I place the zoom-box top left of a test web-page
(within a container div, so position relative) the first time either of the buttons are clicked the box moves a few pixels up and left, subsequent clicks up or down the box stays put, I have tried putting the box before the container div — same result, this problem seems to be only in IE, firefox has no problem at all.
I haven’t uploaded yet to the site, trying a few more things.
Thanks for a very good script!!
@muldoni:
The box may moves because the container text is sized, and the box may not have enough room.
There are many ways to fix this problem:
1. Simply add height and weight on the CSS so the text have enough room.
2. CSS the zoombox-text and give it font-size with “px”.
This will prevent the zoom-box being resized.
3. Or you can use image instead of “+” and “-”
Thanks…
Thanks for that input, appreciated. the box and all text not required to resize are tagged as px, I’ve been through all the css settings an improvement is noted, the box now only moves left around 2px (either on up or down sizing on initial page opening BUT ONLY ON IE!)rock solid on Firefox.
press on —-
regards psb