Opcion a cambiar tamaño de letra como los periódicos OnLine

Bier · #1 (**permalink**) 22/05/2012, 23:59

He visto en varios periódicos la posibilidad que el lector pueda cambiar el tamaño de la letra (fuente)

¿Algún tutorial de como se hace ello?

Gracias anticipadas.

djaevi · #2 (**permalink**) 23/05/2012, 07:45

Te dejo un ejemplo muy simple aver si te sirve para adaptarlo a tu proyecto si tienes alguna duda me avisas.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
    #contenedor {
        position:absolute;
        width:770px;
        left:50%;
        margin-left:-385px;
    }
    
    #head {
        background-image:url(head.png);
        height:20px;
        width:100%;
    }
    
    #body {
        background-image:url(body.png);
        width:100%;
    }
    
    #relleno {
        position:relative;
        top:0px;
        width:90%;
        left:5%;
    }
    
    #titulo {
        font-family:"Trebuchet MS";
        color:#006600;
        font-size:18px;
        padding-bottom:10px;
    }
    
    #noticia {
        font-family:"Trebuchet MS";
        color:#006666;
        font-size:14px;
        padding-bottom:10px;
    }
    
    #foot {
        height:20px;
        width:100%;
    }
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

Código Javascript:

Ver originalfunction resize(e) {    
    var titulo = $("#titulo").css("font-size");
    var noticia = $("#noticia").css("font-size");
    var fontSizeTitulo = titulo.substring(titulo.length-2,titulo);
    var fontSizeNoticia = titulo.substring(noticia.length-2,noticia);
        if (e) {
            $("#titulo").css("font-size",Number(fontSizeTitulo) + 2 + "px");
            $("#noticia").css("font-size",Number(fontSizeNoticia) + 2 + "px");
        }else{
            $("#titulo").css("font-size",Number(fontSizeTitulo) - 2 + "px");
            $("#noticia").css("font-size",Number(fontSizeNoticia) - 2 + "px");
        }
    }

Código HTML:

Ver original</script>
 
</head>
 
<body>
    <div id="contenedor">
        <div id="relleno">
            <div id="titulo">
                Boca le gano al Flu
            </div>
            <div id="noticia">
                Con un gol de Pablo Mouche (ST 6m), el equipo de Julio Falcioni se impuso por 1-0 en la Bombonera, en la ida de los cuartos de final. La visita jugó con 10 por la expulsión de Carlinhos (PT 33m). 
            </div>
            <div id="imgHolder">
                <img src="http://www.tycsports.com/adjuntos/104/imagenes/001/409/0001409334.jpg" />
            </div>
        </div><br /><br />
    <a href="#" onclick="resize(false)"> Achicar </a><br />
    <a href="#" onclick="resize(true)"> Agrandar </a>
    </div>
</body>
</html>

Saludos

Bier · #3 (**permalink**) 23/05/2012, 10:07

Funciona perfecto, Gracias Mil