Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: javierr en 23 Noviembre 2010, 19:52 pm



Título: ayuda para aplicarlo a capas enteras no solo al texto
Publicado por: javierr en 23 Noviembre 2010, 19:52 pm
Hola muy buenas a todos. No se si podreis ayudarme pero se lo agradecería muchísimo ya que estoy haciendo una web y me voy a volver loco de no sacar las cosas porque no soy ningun experto. A ver si pudierais resolverme esto.
 
 con este script se puede aumentar / disminuir el tamaño de la letra de la pagina. Ahora bien lo que yo quiero no es aumentar el contenido del contenedor(en este caso la letra que llevaría dentro el div, capa o contenedor, sino aumentar el contenedor entero al pulsar sobre un boton por ejemplo el + y lo contrario con el - al darle click).

Entonces si ponemos

Antes de </head >

<script type=text/javascript> 
var newsfont = 16; 
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 < 60) { 
        newsfont= newsfont +1; 
        changeFont('content'); 
    } 


function smaller() { 
    if (newsfont > 0) { 
    newsfont= newsfont -1; 
    changeFont('content'); 
    } 

</script>

En el <body >

<A onmousedown='larger()' href='javascript:void(0);'><img src='url' ' alt='+' border='0'></A> <A onmousedown='smaller()' href='javascript:void(0);'><img src='url'' alt='-' border='0'></A> <a href=javascript:ventanaSecundaria('imprimir.php')><img src='imagenes/imprimir.png' alt='Imprimir' width='16' height='16' border='0' /></a>

<div id="content">Esto es el texto que vamos a aumentar o a disminuir</div>

AHORA VIENE MI PREGUNTA:

¿Sabríais como hacer para que en vez de aplicar esto al texto que escribas en la pagina, se podría aplicar esto para que aumentase y disminuyera el tamaño de una capa ?

pobré haciendolo así pero no me funciona:

<div id= "content"><div id="Capa1">loquesea</ div>< /div>

No funciona haciendo esto. Así solo aumenta/disminuye el texto pero lo que me interesa es aumentar y disminuir una capa entera no un texto (en realidad aplicarlo en cualquier capa que quiera porque quiero aumentar/disminuir muchas). Que podria modificar de ese script para que funcionara con capas????? En caso de que sí se pueda, como hacerlo?.

Ahora bien he conseguido otro script donde puedo modificar el tamaño de una capa pero con valores fijos, de 25 a 100 y viceversa. Miren el script:

<script type="text/javascript">
function modificarEstilo() {
if (capa.style.height == "100px") {
capa.style.height = "25px";
}else {
capa.style.height = "100px";
}
}
</script>

<div id="capa" style="background:#ccc;
width:300px; height:100px; padding:5px;
border:1px solid #000; overflow:hidden;">
<a href="#" onClick="modificarEstilo()">dando click modificaremos el tamaño de la capa</a>
</div>

LO INTERESANTE ES HACER ESO DE MODIFICAR EL TAMAÑO ENTERO DE LA CAPA CON SU IMAGEN DE FONDO INCLUIDA, PERO NO SOLO A UNA CAPA SINO A CUALQUIER CAPA QUE QUISIERA, Y NO CON VALORES FIJOS, SINO COMO EN EL SCRIPT ANTERIOR EN INCREMENTO CADA VEZ QUE SE LE DE CLICK.

gracias de antemano, espero sepais resolvermelo.


Título: Re: ayuda para aplicarlo a capas enteras no solo al texto
Publicado por: javierr en 24 Noviembre 2010, 18:37 pm
Ya lo he resuelto.

Este es el script por si alguien ya quiere usarlo:

<script type="text/javascript">

var MAXIMO = 800;
var MINIMO = 20;
var altura = 100;
var anchura = 100;

function larger() {

    var capa = document.getElementById("content");
   
    if (altura < MAXIMO) {
        altura += 20;
   capa.style.height = altura + "px";
    }
   
    if (anchura < MAXIMO) {
   anchura += 20;
       capa.style.width= anchura + "px";
    }
}

function smaller() {

    var capa = document.getElementById("content");
   
    if (altura > MINIMO) {
        altura -= 20;
   capa.style.height = altura + "px";
    }
   
    if (anchura > MINIMO) {
   anchura -= 20;
       capa.style.width= anchura + "px";
    }
}
</script>

Xao.. y suerte

Tema cerrado.