Han visto que hay páginas con la opción de cambiar el tamaño de la fuente?... pues aquí hay una forma sencilla de hacer ésto pero con JQuery y de forma más "dinámica", es decir, sin recargar la web =D.
Hace rato hice una minipaginita:
Como pueden notar, en la esquina superior derecha están 3 botones de "resize" (8pt, 10pt y 12pt):
Por Default el texto aparece en la opción de en medio (10pt).
Ahora chequen la página funcionando AQUÍ.
Bueno, pues si se meten al código fuente, verán que por cuestiones de velocidad xD... puse todo en el html (css y javascript[jquery]). Además de que la carga del JQuery la estoy haciendo desde GOOGLE, para así ahorrarnos tener que subir 2 o 3 archivos.
Empecemos:
<html>
<head>
<title></title>
Abrimos el archivo HTML, declaramos su HEAD y en TITLE... =O no le puse título xD xD xD, en fín.. ahí va el título xD.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Bueno, en la meta tag declaramos su CHARSET de tipo UTF-8 (algún día escribiré de eso u_u ya que ustedes no escriben nada xD).
CSS
Ahoras abrimos la parte de CSS "interno":
<style type="text/css">
Y ya empieza todo el CSS, que está comentado dentro del HTML, porque si lo pongo aquí... sería un post larguíiiiisimo u_u...
Ya terminado, lo cerramos:
</style>
Javascript - JQUERY
Y entonces iniciamos con Jquery...
Primero hay que jalarlo desde GOOGLE (en vez de bajarlo de la web):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
Luego abrimos el "script" donde vamos a escribir las funciones de RESIZE:
<script type="text/javascript">
$(document).ready(function(){
Eso que dice $(document).ready(function(){ es para que éstos códigos funcionen desde que se inicializa la web, o sea, desde que se carga.
Y entonces comenzamos con las funciones.
En el HTML declaramos los ID "disminuir", "normal" y "crecer", que corresponden a los botones mencionados anteriormente.
Lo que vamos a hacer primero es declarar que cuando "disminuir" sea clickeado, va a buscar el ID "contenedor" (contiene todo lo que queremos rezisear) y va a alterar su CSS, declarando que "fontSize" será igual a "8pt".
$("#disminuir").click(function(){
$("#contenedor").css({"fontSize":"8pt"});
});
Y repetiremos lo mismo con "normal" y "crecer", cambiando su tamaño a "10pt" y "12pt".
$("#normal").click(function(){
$("#contenedor").css({"fontSize":"10pt"});
});
$("#crecer").click(function(){
$("#contenedor").css({"fontSize":"12pt"});
});
Y ya cerramos el DOCUMENT READY y el SCRIPT:
});
</script>
Entonces eso afecta a tooodo lo que se encuentra dentro de "contenedor" =D.
Ja... Aquí todo está muy confuso, pero repasen el HTML y si tienen dudas, preguntenmen =D o si no me hablan u_u busquen en Google xD.
Descarguen los archivo de aquí:
Y el DEMO funcionando AQUÍ
0 comentarios:
Publicar un comentario