Ajax Tutorial » JavaScript http://tutorialajax.com Prototype, jQuery and another Ajax tutorials Tue, 11 Nov 2008 14:24:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Font Zoomer JavaScript http://tutorialajax.com/font-zoomer-javascript.html http://tutorialajax.com/font-zoomer-javascript.html#comments Tue, 04 Nov 2008 14:09:52 +0000 Admin http://tutorialajax.com/?p=24
  • The Prototype $() function
    • ]]>     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.

    Related posts:

    1. The Prototype $() function

    ]]>     http://tutorialajax.com/font-zoomer-javascript.html/feed 3