esto es payta gente que le gusta programar en javascript un reto personal

jor_0203 · #1 (**permalink**) 27/10/2011, 19:55

este ejercicio este interesante no es solo un ejercicio de capas, sino juegas con el tiempo, ojala alguien pueda porque yo todavia no he podido

<!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>
<script language="Javascript">
var temporizadorplegar;
var temporizadordesplegar;
function recoger(){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById('contenido ').style.height); //quiten el espacio que da ya que lo da al copiar en contenido ('contenido')
if(altura>0)
{
altura--;
document.getElementById('contenido').style.height= altura+"px";
temporizadorplegar=setTimeout("recoger()",10);
}
else
{
clearTimeout(temporizadorplegar);
} }
function desplegar(){
clearTimeout(temporizadorplegar);

var altura=parseInt(document.getElementById('contenido ').style.height);//quiten el espacio que da ya que lo da al copiar en contenido ('contenido')
if(altura<305){
altura++;
document.getElementById('contenido').style.height= altura+"px";
temporizadordesplegar=setTimeout("desplegar()",10) ;
}
else
{
clearTimeout(temporizadordesplegar);
}
}

</script>
</head>
<body>
<div id="botones" style="width:600px; height:20px;">
<input type="button" id="recoger" value="recoger" onclick="recoger()" />
<input type="button" id="desplegar" value="desplegar" onclick="desplegar()" />
</div>

<div id="contenido" style="width:720px; height:305px; background-color:#006699; position:relative;"></div>
quiero que estos botones tambien puedan reutilizar la primera funcion pero no he podido, para hecer una funcion global
alguien sabe como
<br>
<input type="button" id="recoger" value="recoger" onclick="recoger()" />

<input type="button" id="desplegar" value="desplegar" onclick="desplegar()" />
<div id="contenido2" style="width:720px; height:305px; background-color: #CC0000; position:relative;"></div>

</body>

</html>

Raziel_Ravenheart · #2 (**permalink**) 28/10/2011, 15:29

Hola jor_0203, como estás?

Mira el código que desarrollé para ayudarte con este tema:

Código Javascript:

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>
<script language="Javascript">
var temporizadorplegar;
var temporizadordesplegar;
 
function detectar (evt) {
    //evt, es una variable que se recibe implícitamente cuando se utiliza el modo
    // no invasivo de manejar eventos, pero en este caso se llama la 
    // función detectar desde los botones, pasándole, el evento como tal
    
    var btnId = evt.target.id;
    //Por medio del evento, y haciendo referencia a la fuente que lo generó (botón) 
    //utilizando la palabra reservada target, podemos saber el id
    
    switch (btnId) {
        case "r1":      recoger("contenido");
                    break;
        case "d1":  desplegar("contenido");
                    break;
                    
        case "r2":      recoger("contenido2");
                    break;
        case "d2":  desplegar("contenido2");
                    break;
    }
    //Dependiendo del id, utilizamos un switch para llamar la función  específica
    //pasándole el nombre del div que queremos animar
}
 
function recoger(div){  
    clearTimeout(temporizadordesplegar);
    var altura=parseInt(document.getElementById(div).style.height);
    
    if (altura>0) {
        altura--;
        document.getElementById(div).style.height= altura+"px";
        temporizadorplegar=setTimeout(recoger,10, div);
        //Esta es la sintaxis que reconocen firefox y google chrome, para pasar
        //parámetros a una función llamada con setTimeOut.  No es obligatorio
        //poner el nombre de la función entre paréntesis.  La variable div, es 
        //la que recibe el id del div que vamos a animar.
    } else {
        clearTimeout(temporizadorplegar);
    } 
}
 
function desplegar(div){
    clearTimeout(temporizadorplegar);
    var altura=parseInt(document.getElementById(div).style.height);
    
    if (altura < 305){
        altura++;
        document.getElementById(div).style.height= altura+"px";
        temporizadordesplegar=setTimeout(desplegar,10,div) ;
    } else {
        clearTimeout(temporizadordesplegar);
    }
}
 
</script>
</head>
<body>
<input type="button" id="r1" value="Recoger" onclick="detectar(event)" />
<input type="button" id="d1" value="Desplegar" onclick="detectar(event)" />
<!-- Una regla de html es que los id no se pueden repetir, cada id es único como nuestro número de identificación.  Por eso le puse un id diferente a cada botón. Por otro lado, se llama la función detectar, pasándole como parámetro, el evento, explicado en el código javascript anterior.-->
 
<div id="contenido" style="width:720px; height:305px; background-color:#006699;"></div>
quiero que estos botones tambien puedan reutilizar la primera funcion pero no he podido, para hecer una funcion global
alguien sabe como
<br>
<input type="button" id="r2" value="Recoger" onclick="detectar(event)" />
<input type="button" id="d2" value="Desplegar" onclick="detectar(event)" />
<div id="contenido2" style="width:720px; height:305px; background-color: #CC0000;"></div>
 
</body>
</html>

Debe haber un modo diferente de hacer esto, ya que el atributo style, es decir aplicar estilo inline, ya no es permitido, o por lo menos no es recomendable, por eso es necesario buscar el modo de no hacer esto.

Lo mismo con el evento onclick, es preferible asignar las funciones a los eventos por medio de manejadores semánticos, es decir, se quita el onclick de la etiqueta, si deja asi´:

Código HTML:

Ver original<input type="button" id="r1" value="Recoger" />

y desde javascript se le asignan los eventos así:

Código Javascript:

Ver originalwindow.onload = function () {
    document.getElementById("r1").onclick = detectar;
}

De este modo queda más límpio el código html y se vé más profesional.

Espero entiendas cuales son las ventajas de esto y la de utilizar funciones como attachEvent o addEventListener.

Saludos

IsaBelM · #3 (**permalink**) 28/10/2011, 15:41

Cita:

Iniciado por Raziel_Ravenheart

Debe haber un modo diferente de hacer esto, ya que el atributo style, es decir aplicar estilo inline, ya no es permitido, o por lo menos no es recomendable, por eso es necesario buscar el modo de no hacer esto.

interesante, puedes dejarnos alguna referencia acerca de ello??

Cita:

Iniciado por Raziel_Ravenheart

y desde javascript se le asignan los eventos así:

Código Javascript:

Ver originalwindow.onload = function () {
    document.getElementById("r1").onclick = detectar;
}

te puede interesar esta lectura

jor_0203, los mensajes de visitas no son para que repitas lo que escribes en el foro

Raziel_Ravenheart · #4 (**permalink**) 28/10/2011, 17:44

Hola de nuevo Isabel y Jor?

Pues les cuento que hay un modo de acceder a los estilos aplicados a los elementos html, por medio de DOM Nivel 2, ya que si estos no están declarados directamente en la etiqueta (inline o intrusivo como me gusta decirle), y dependemos de estos valores para realizar alguna acción, no apareceran por medio del objeto style es decir

Código Javascript:

Ver originaldocument.getElementById("algunID").style;

si el objeto no tiene ningún style inline, todos los atributos obtenidos por este medio, apareceran vacios. Para resolver este problema, aprendí que se puede utilizar un objeto DOM perteneciente a document llamado styleSheets, es decir se accede a este por medio de la siguiente sintaxis:

Código Javascript:

Ver originalvar estilos = document.styleSheets;

De esa manera la variable estilos guardará una lista de los objetos stylesheet explícitamente enlazados dentro o incrustados en el documento.

yo generalmente utilizo un for...in para observar todos los atributos y métodos(de cualquier elemento, incluso los elementos navegador, ventana, location, aunque con document, no funcionó :S), así:

Código Javascript:

Ver originalvar estilo = document.getElementById("algunID").style;
var txt = "";
 
for(x in estilo) {
  txt += x+": "+estilo[x]+"<br />";
}
 
//suponiendo que lo siguiente es un div
 
document.getElementById("idDiv").innerHTML = txt;

Y así hago para conocer todos los atributos y métodos de algún objeto o elemento. Inténtenlo, verán muchas cosas que hasta les parecerán raras y otras interesantes, como por ejemplo url's completas, tipos de archivos y otras cosas. En el caso de styleSheets, pueden obtener la dirección completa de donde se encuentran los archivos css. Lo digo por que ya lo hice.

Otra cosa, no importa si utilizan link rel o @import, se pueden averiguar, pero tengan en cuenta, que @import es otra regla css y buscarlas una por una puede llegar a ser mucho trabajo. Pero de todos modos, este es el único modo de acceder a estilos css, declarados en el encabezado del documento o en un archivo externo, y conocer los valores si necesitamos trabajar con esta información:

Referencias:

En MDN
En javascript kit
En Mundo Geek

Que les aproveche

_cronos2 · #5 (**permalink**) 28/10/2011, 18:29

Pido disculpas por no hacer un quote para cada frase que vaya a citar, pero es que si no no acabo

Cito el post completo

Cita:

Iniciado por Raziel_Ravenheart

Hola de nuevo Isabel y Jor?

Pues les cuento que hay un modo de acceder a los estilos aplicados a los elementos html, por medio de DOM Nivel 2, ya que si estos no están declarados directamente en la etiqueta (inline o intrusivo como me gusta decirle), y dependemos de estos valores para realizar alguna acción, no apareceran por medio del objeto style es decir

Código Javascript:

Ver originaldocument.getElementById("algunID").style;

si el objeto no tiene ningún style inline, todos los atributos obtenidos por este medio, apareceran vacios. Para resolver este problema, aprendí que se puede utilizar un objeto DOM perteneciente a document llamado styleSheets, es decir se accede a este por medio de la siguiente sintaxis:

Código Javascript:

Ver originalvar estilos = document.styleSheets;

De esa manera la variable estilos guardará una lista de los objetos stylesheet explícitamente enlazados dentro o incrustados en el documento.

yo generalmente utilizo un for...in para observar todos los atributos y métodos(de cualquier elemento, incluso los elementos navegador, ventana, location, aunque con document, no funcionó :S), así:

Código Javascript:

Ver originalvar estilo = document.getElementById("algunID").style;
var txt = "";
 
for(x in estilo) {
  txt += x+": "+estilo[x]+"<br />";
}
 
//suponiendo que lo siguiente es un div
 
document.getElementById("idDiv").innerHTML = txt;

Y así hago para conocer todos los atributos y métodos de algún objeto o elemento. Inténtenlo, verán muchas cosas que hasta les parecerán raras y otras interesantes, como por ejemplo url's completas, tipos de archivos y otras cosas. En el caso de styleSheets, pueden obtener la dirección completa de donde se encuentran los archivos css. Lo digo por que ya lo hice.

Otra cosa, no importa si utilizan link rel o @import, se pueden averiguar, pero tengan en cuenta, que @import es otra regla css y buscarlas una por una puede llegar a ser mucho trabajo. Pero de todos modos, este es el único modo de acceder a estilos css, declarados en el encabezado del documento o en un archivo externo, y conocer los valores si necesitamos trabajar con esta información:

Referencias:

En MDN
En javascript kit
En Mundo Geek

Que les aproveche

Bueno, vamos por partes, como diría Jack el destripador.
Para empezar, sí, teóricamente es posible hacer eso como dices. Rescatar los valores de los estilos mediante los declarados en el CSS, sin embargo esto tiene 2 principales inconvenientes:
1.- No es ni mucho menos exacto, ni sencillo. Tienes que recorrer todas las hojas de estilo, y quedarte con el último valor para esa propiedad. Sin embargo, también puede aparecer un !important, e incluso más de uno, por lo que había que comprobar que no los hubiera, y si los hubiera ir guardándolos en una variable aparte para no pisarse con la variable "principal". Y para más INRI, debes usar sólo las reglas que afecten a ese elemento, así que tendrías que usar un selector CSS (como Sizzle) o document.querySelectorAll por cada regla, y después recorrer el NodeList que este devuelve en busca del elemento, lo que viene a ser una ineficiencia de libro.
2.- Supongo yo que será lento, porque hay que recorrer el DOM de la hoja de estilos, y pese a quien le pese el DOM no es un prodigio de la velocidad.

Lo del for ... in, es un bucle especial para recorrer objetos. Si lo que quieres es recorrer algún objeto en concreto y ver todas sus propiedades @caricatos nos facilitó la vida con su maravilloso Destripador.

Por último, la mejor solución a este problema es usar el estilo computado. Como siempre, IE y los que no son IE tienen implementaciones distintas, pero fáciles de conjugar con un if-else dentro de una función getStyle o similar. Lo único que hay que acordarse es que para IE, el computedStyle (o currentStyle según él) de la propiedad float es styleFloat.

Saludos (:

Raziel_Ravenheart · #6 (**permalink**) 28/10/2011, 22:12

Muchas gracias _Cronos, la vdd, me ahorró tiempo, total, eventualmente hubiera llegado a esa conclusión tarde o temprano (la vdd es que por ahora tengo css en lo básico), y no lo utilizo para mucho, por que mi contratante solo necesita funcionalidad, obvio lo utilizo para darle algo de orden a la página, pero como dije en otro post, la ventaja es que no tengo que preocuparme en ningún aspecto con css, javascript o cualquier otra cosa ya que llegamos a la conclusión de no darle soporte a IExplorer

Por otro lado, me gustaría saber que tienen que ver los important? Yo se para que son, pero que tienen que ver con document.styleSheets?. Espero que la respuesta no sea obvia

Y por lo del destripador, es que como ahora estoy empezando, me gusta experimentar con todo eso o ver lo que otros ya han visto, por que hasta ahora llevo como 3 meses estudiando frecuentemente javascript, pero como considero a caricatos un conocedor del tema, estaré más pendiente de su página...

Saludos

_cronos2 · #7 (**permalink**) 29/10/2011, 08:04

Fíjate:

Código CSS:

Ver original.blue {
 color:red !important;
}
 
.blue {
 color:blue;
}

Si tú recorres las hojas de estilos en busca de la última declaración de esa propiedad, obtendrás blue. Sin embargo, la primera tiene un !important, y por lo tanto sólo será modificada por otro !important posterior. Lo que quiero decir es que tendrías que buscar "!important" en el string y si se encuentra, a partir de entonces usar sólo el último valor con !important.
No sé si me he explicado bien

Saludos (:

Raziel_Ravenheart · #8 (**permalink**) 29/10/2011, 10:00

Si claro entiendo, por que tiene prioridad la que dice important entonces tiene que modificarse esa, y al hacer la búsqueda secuencial solo queda guardada la última si no se tiene cuidado, en vez de modificarse la que tiene el important.

Entonces supongo que lo que primero fué document.styleSheets y viendo lo que sucedía con esta interfaz desarrollaron casi inmediatamente el computed style (current en virus explorer), leeré al respecto.

Gracias Chronos, por la respuesta.

jor_0203 · #9 (**permalink**) 29/10/2011, 22:47

que interesantes aportes
aunque yo encontré la forma así
nota si saben otras formas me dicen

Código PHP:

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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
    background:#FFCC00;
    border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
 
function restar(obj){
 g=parseInt(document.getElementById(obj).style.height);
  document.getElementById("fg").innerHTML = g;
if(g<=50){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); } 
</script>
</head>
    <body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> &nbsp;<a onclick="restar('cuadros')">cuadros uno pregar</a>&nbsp; <a onclick="mover('cuadro')">cuadro dos</a> 
  &nbsp;<a onclick="restar('cuadro')">cuadro dos pregar</a> 
  <div class="contenedor" >    
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px;" onClick="mover('cuadros')">click</div>
    <br />
    <br />
    <br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px;" >click</div>
 </div> 
 <div id="fg"></div>  
    
    </body>
    </html>

dleal100 · #10 (**permalink**) 30/10/2011, 02:31

este post ya esta repetido :S

http://www.forosdelweb.com/f13/esta-funcion-debe-desplegararse-mas-rapido-depende-del-tiempo-pero-esta-muy-lenta-954240/

IsaBelM · #11 (**permalink**) 30/10/2011, 08:05

entiendes que es harto complicado, por no decir que desanimas a ayudarte, si a cada post cambias de código??

si quieres otra alternativa, usa css3, con sus ventajas e inconvenientes