02/04/2003, 12:44
| ||||
| ||||
| Zoom en texos - Javascript + CSS Podrá alguien explicar en detalle el script que se utiliza para hacer zoom in y zoom out en los textos del website Kiiroi ? Es necesario que el texto se encuentre en un layer o se puede aplicar la misma técnica a un texto dentro de una tabla? Creo que el script es por demás interesante y útil. Muchas gracias.
__________________ _____________________ Duchamp Última edición por duchamp; 02/04/2003 a las 17:33 |
|
02/04/2003, 17:45
| ||||
| ||||
| Por si ayuda, adjunto aquí el código del archivo windows.js
Código:
function changeFont(id) {
// change lineheight
if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
// fix layer scrolling problems now
updateHeight();
setCookie();
}
function larger() {
if (newsfont < 25) {
newsfont= newsfont +2;
changeFont('content');
}
}
function smaller() {
if (newsfont > 5) {
newsfont= newsfont-2;
changeFont('content');
}
}
Y aquí el código del archivo cookie.js
Código:
// functions to store font size in a cookie
cookie_name = "fontsize";
function setCookie() {
if(document.cookie != document.cookie) {
index = document.cookie.indexOf(cookie_name);
}
else {
index = -1;
}
if (index == -1) {
document.cookie=cookie_name+"="+newsfont+"; expires=Monday, 04-Apr-2008 05:00:00 GMT";
}
}
function getCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
namestart = (document.cookie.indexOf("=", index) + 1);
nameend = document.cookie.indexOf(";", index);
if (nameend == -1) nameend = document.cookie.length;
val = document.cookie.substring(namestart, nameend);
return parseInt(val);
}
}
}
Y esto es lo que utilizan en los botones para ejecutar la acción:
Código:
Las imagenes:<A onmousedown="larger();return false;"
onmouseover="window.status='_Magnify Text'; return true"
onmouseout="window.status='';return true" href="javascript:void(0);"><IMG
height=16 src="magnify.gif" width=22 border=0></A>
<A onmousedown="smaller();return false;"
onmouseover="window.status='_Demagnify Text';return true;"
onmouseout="window.status='';return true" href="javascript:void(0);"><IMG
height=16 src="demagnify.gif" width=22 border=0></A>
  Faltaría la hoja de estilos, claro. Pero ya es demasiado -creo-
__________________ _____________________ Duchamp |
|
03/04/2003, 00:09
| ||||
| ||||
 Hola duchamp: En primer lugar, las cookies no tienen nada que ver con el efecto zoom.  La forma es muy sencilla, dentro de los estilos, existe font-size, o tamaño de la fuente, la cuestión es darle valores numéricos... éstos pueden ser puntos/pixeles o porcentaje... La línea que referencia a los layers, es para navegadores netscape antiguos, y en los modernos se suele poner getElementById... Entonces para cambiar un estilo de cualquier elemento de una página, debes darle un atributo id, y con un script darle un nuevo valor... voy a poner un ejemplo que cambie el tamaño de las letras de una celda de una tabla al pasar el ratón por encima, y luego reponer al tamaño: <table><tr> <td style="font-size:12px" onmouseover="this.style.fontSize = '16px'" onmouseout="this.style.fontSize = '12px'" > Aquí el contenido </td></tr></table> Cuando se quiere cambiar un estilo mediante un script debe estar en minúsculas, y si se trata de un estilo compuesto (por ejemplo font-size), o sea que lleve un guión en el nombre... Se debe poner en mayúscula la primera letra después del guión, y eliminar éste... (el interprete pdría evaluar una resta entre font y size) Por último voy a improvisar el script modificando el atributo desde un link: <table><tr> <td id=zoom style="font-size:12px"> Aquí el contenido </td></tr></table> <a href="javascript: document.getElementById('zoom').style.fontSize = parseInt(document.getElementById('zoom').style.fon tSize) + 2 + 'px'">aumentar</a> <a href="javascript: document.getElementById('zoom').style.fontSize = parseInt(document.getElementById('zoom').style.fon tSize) - 2 + 'px'">disminuir</a> ... Podría fallar porque no lo he probado, pero creo que lo importante es saber hacerlo. Saludos  |
|
04/04/2003, 12:33
| ||||
| ||||
| Gracias caricatos, ahora intentaré probar eso. Las cookies si son importantes en este caso, ya que en ellas el usuario conserva el tamaño de fuente que ha elegido. Bueno, ya comentaré luego los resultados de la prueba.
__________________ _____________________ Duchamp |
|
04/04/2003, 14:05
| ||||
| ||||
| Caricatos, no funciona eso ... A ver si podemos hacer algo con esto (que dá error):
Código:
<html>
<head>
<title>Zoom in/out en textos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
cookie_name = "fontsize";
function setCookie() {
if(document.cookie != document.cookie) {
index = document.cookie.indexOf(cookie_name);
}
else {
index = -1;
}
if (index == -1) {
document.cookie=cookie_name+"="+newsfont+"; expires=Monday, 01-Apr-2008 05:00:00 GMT";
}
}
function getCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
namestart = (document.cookie.indexOf("=", index) + 1);
nameend = document.cookie.indexOf(";", index);
if (nameend == -1) nameend = document.cookie.length;
val = document.cookie.substring(namestart, nameend);
return parseInt(val);
}
}
}
</SCRIPT>
<SCRIPT type=text/javascript>
function changeFont(id) {
if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
// esto arregla scroll al utilizar layers
updateHeight();
setCookie();
}
// aqui se produce el error
function larger() {
if (newsfont < 25) {
newsfont= newsfont +2;
changeFont('content');
}
}
function smaller() {
if (newsfont > 5) {
newsfont= newsfont -2;
changeFont('content');
}
}
</SCRIPT>
<style type="text/css">
<!--
.news {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
.date {
COLOR: #990066;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #CC9900;
text-decoration: none;
}
a:active {
color: #CC9900;
text-decoration: none;
}
-->
</style>
</head>
<body bgcolor="#999999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="400" border="0" cellpadding="8" cellspacing="0">
<tr>
<td width="300" rowspan="2" bgcolor="#FFFFFF" class="news" id="content"><span class="date">Lorem
ipsum dolor sit amet, consectetuer</span> adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel willum
lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.
</td>
<td width="100" align="center" valign="top" bgcolor="#EEEEEE" class="menu">
<A onmousedown="larger();return false;" href="javascript:void(0);">Aumentar</A><br>
<br>
<A onmousedown="smaller();return false;" href="javascript:void(0);">Reducir</A></td>
</tr>
<tr>
<td bgcolor="#EEEEEE"> </td>
</tr>
</table>
</body>
</html>
__________________ _____________________ Duchamp Última edición por duchamp; 04/04/2003 a las 15:29 |
|
04/04/2003, 15:45
| ||||
| ||||
| Hola otra vez: Hay una cosa que no está definida: updateHeight(); Tampoco vi definida la variable newsfont ... Eso no me dió error porque la definí con un valor inicial 10 (al tanteo)... Por último falta darle el parámetro a las funciones (el valor del id: onmousedown="smaller('content')" Con unos pocos retoques te va a funcionar... Saludos |
|
04/04/2003, 18:13
| ||||
| ||||
| Caricatos, antes que nada gracias por tu ayuda. Creo que estaría bueno si le das una mirada directamente al archivo original, el de Kiiroi (ver link arriba). El código que transcribí es tal cual el de ellos, salvo por la utilización de layers en su caso y tablas en el mío, pero tendría que funcionar ... Si revisas el archivo original verás que esas correcciones no tienen mucho sentido ya que el original funciona! Aunque no encuentro el error, creo que la cosa está entre la hoja de estilos y el script, a mi permanentemente me dá el error: "'newsfont' no está definido sin embargo, en el script original tampoco aparece definido, al menos no en el script.
__________________ _____________________ Duchamp |
|
04/04/2003, 18:22
| ||||
| ||||
| Hola otra vez: Esto a mi me funciona: Código PHP: Saludos |
|
05/04/2003, 08:54
| ||||
| ||||
| Grandioso! Ahora sí funciona! Lo he chequeado sin problemas en IE6 y en Netscape 6, en Opera 6 no funciona, pero vamos! con IE y NN ya es suficiente. No comprendo porque el original sí funciona sin ese id , pero ya no importa demasiado porque éste sí lo hace. A quien le interese el tema de la elección de estilos por parte del usuario también puede ver un excelente tutorial (en inglés) en A list apart. Allí se explica como utilizar una mezcla de hojas de estilo y javascript para permitirle al usuario elegir el estilo con el que quiera ver nuestro sitio. Algunos ejemplos de eso: Zeldman.com » el libro del aire » Muchas gracias Caricatos! Saludos
__________________ _____________________ Duchamp Última edición por duchamp; 05/04/2003 a las 08:58 |
|
05/04/2003, 10:45
| ||||
| ||||
| Hola ¡holita! Hay un fichero windows.js con (entre otras cosas, esto: Código PHP: changeFont('content '); ... y content es ese "ID"... Saludos |
Este tema le ha gustado a 1 personas 
