Haciendo aparecer y desaparecer capas con display: capa original no aparece

Vincens · #1 (**permalink**) 15/07/2012, 10:15

Hola de nuevo, estoy haciendo un página en la que según se van eligiendo opciones van desapareciendo una capa y cargando otra. No quiero que en ningún momento se recargue la página web para que todo sea más fluido.

La idea que se me ha ocurrido es usar el display de CSS para ir activandolo y desactivandolo según sea necesario. Aqui tenemos un eemplo con tres capas que se tienen que ir activando sucesivamente.

Código HTML:

<div id="marco_1" name="marco" draggable="true">
				<div style="display:">
					<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
				</div>
				
				<div id="introducirLinkAlt" style="display:none">
					<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
					<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
					<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar">
				</div>
				
				<div id="foto_1" style="display:none">
					<img src="" width="450px" height="250px">
				</div>
			</div>

Todo funciona bien, salvo cuando el usuario pincha el botón cancelar que en ese caso, aunque sí que hace desaparecer la capa activa en ese momento no me hace aparecer la capa original, la que ve el usuario al cargar la página y no entiendo porque. La única teoría es que al haber pinchado en el input button este haya desaparecido pero no tiene ningún sentido. ¿Alguien sabe donde falla lo que estoy haciendo o si hay alguna manera mejor de hacer lo que pretendo?

Este es el script que no funciona:

Código HTML:

 function cancelarenlace(){
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = ""
    }

furoya · #2 (**permalink**) 15/07/2012, 11:51

El código completo, Vincens, para que no tengamos que reescribir adivinando lo que falta.

Y eso no podía funcionar nunca.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function cancelarenlace(T){
    	var divPadre = T.parentNode; 
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = "block"
    }
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="marco_1" name="marco" draggable="true">
				<div style="display:">
					<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
				</div>
				
				<div id="introducirLinkAlt" style="/*display:none*/">
					<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
					<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
					<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar" onclick="cancelarenlace(this)">
				</div>
				
				<div id="foto_1" style="display:none">
					<img src="" width="450px" height="250px">
				</div>
			</div> 
</body>
</html>

Vincens · #3 (**permalink**) 15/07/2012, 12:01

Perdón, con el "block" sigue sin funcionar. La funcion aceptarenlace hace el mismo movimiento que cancelarenlace y ahí si que me lo acepta pero sobre la tercera capa (divAlt[2]), sin embargo, en cancelarenlace que es donde quiero cambiar la primera capa es donde no me deja.

Código HTML:

<script>
marcos = document.getElementsByName('marco')
entradaEnlaces = document.getElementsByName('introducirLink')
botonAceptar = document.getElementsByName('botonAceptar')
botonCancelar = document.getElementsByName('botonCancelar')

window.onload = function (){
	for(var i=0; i<entradaEnlaces.length; i++){
		entradaEnlaces[i].onclick = introducirDireccion;
	}
	for(var i=0; i<botonAceptar.length; i++){
		botonAceptar[i].onclick = aceptarenlace;
	}
	for(var i=0; i<botonCancelar.length; i++){
		botonCancelar[i].onclick = cancelarenlace
	}
}

    function introducirDireccion(){
    	var divPadre = this.parentNode;
    	var divHijo = this;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	cambiarDisplayNodos(divHijo, divAlt[1])
    }
    
    //funcion que hace el nodo1 invisible y el nodo 2 visible
    
    function cambiarDisplayNodos(nodo1,nodo2){						
    	if(nodo2.style.display == "none"){
    		nodo2.style.display = ""
    		nodo1.style.display = "none"
    	} 
    }
    function aceptarenlace(){
    	var direccionFoto = document.getElementById('enlazarfoto').value;
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	var divImg = divAlt[2].getElementsByTagName('img');
    	var comienzoDireccion = direccionFoto.substring(0,7)
    	if(comienzoDireccion.toLowerCase() != "http://"){
    		alert("No has introducido una dirección valida. Asegurate que comience por http://")
    	}
    	else {
    		divImg[0].src = direccionFoto
    		cambiarDisplayNodos(divAlt[1],divAlt[2]);
    	}
    	
    }
    function cancelarenlace(){
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = "block"
    }
    
    function validarURL(url) {
    	var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
    	return re.test(url);
    }
</script>

furoya · #4 (**permalink**) 15/07/2012, 13:13

Con block funciona perfecto ¿en qué navegador no te deja visible el botón?.

Pero yendo a tu código, y más especificamente: mira por ti mismo como se van separando los grupos para mostrar u ocultar cada nivel de DOM.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var marcos, entradaEnlaces, botonAceptar, botonCancelar;

window.onload = function (){
marcos = document.getElementsByName('marco');
entradaEnlaces = document.getElementsByName('introducirLink');
botonAceptar = document.getElementsByName('botonAceptar');
botonCancelar = document.getElementsByName('botonCancelar');

	for(var i=0; i<entradaEnlaces.length; i++){
		entradaEnlaces[i].onclick = introducirDireccion;
	}
	for(var i=0; i<botonAceptar.length; i++){
		botonAceptar[i].onclick = aceptarenlace;
	}
	for(var i=0; i<botonCancelar.length; i++){
		botonCancelar[i].onclick = cancelarenlace
	}
}

    function introducirDireccion(){
    	var divPadre = this.parentNode;
    	var divHijo = this; //??!!
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	cambiarDisplayNodos(divHijo, divAlt[1])
    }
    
    //funcion que hace el nodo1 invisible y el nodo 2 visible
    
    function cambiarDisplayNodos(nodo1,nodo2){	

alert("nodo1.innerHTML»\r\n" +nodo1.innerHTML);
alert("nodo2.innerHTML»\r\n" +nodo2.innerHTML);
					
    	if(nodo2.style.display == "none"){
    		nodo2.style.display = "block"
    		nodo1.style.display = "none"
    	} 
    }
    function aceptarenlace(){
    	var direccionFoto = document.getElementById('enlazarfoto').value;
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	var divImg = divAlt[2].getElementsByTagName('img');
    	var comienzoDireccion = direccionFoto.substring(0,7)
    	if(comienzoDireccion.toLowerCase() != "http://"){
    		alert("No has introducido una dirección valida. Asegurate que comience por http://")
    	}
    	else {
    		divImg[0].src = direccionFoto
    		cambiarDisplayNodos(divAlt[1],divAlt[2]);
    	}
    	
    }
    function cancelarenlace(){
    	var divPadre = this.parentNode; alert("divPadre.innerHTML»\r\n" +divPadre.innerHTML)
    	var divMarco = divPadre.parentNode; alert("divMarco.innerHTML»\r\n" +divMarco.innerHTML)
    	var divAlt = divMarco.getElementsByTagName('div'); 
alert("divAlt[1].innerHTML»\r\n" +divAlt[1].innerHTML)
alert("divAlt[0].innerHTML»\r\n" +divAlt[0].innerHTML)
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = "block"
    }
    
    function validarURL(url) {
    	var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
    	return re.test(url);
    }
</script> 
<style type="text/css">

</style>
</head>
<body>
<div id="marco_1" name="marco" draggable="true">
				<div style="display:">
					<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
				</div>
				
				<div id="introducirLinkAlt" style="/*display:none*/">
					<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
					<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
					<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar" >
				</div>
				
				<div id="foto_1" style="display:none">
					<img src="" width="450px" height="250px">
				</div>
			</div> 
</body>
</html>

No le estás pasando el this.

Y en mi ejemplo te lo mostré.
Vas a tener que referenciarlo de alguna manera.

Descomenta el style="display:none" en introducirLinkAlt después de ver lo que ocurre en cada vuelta del escript (ya no vas a empezar directamente con el botón de cancelar), y mira la diferencia luego de recargar.

No es un mal trabajo. Para nada.

Vincens · #5 (**permalink**) 15/07/2012, 13:42

Muchas gracias, aunque indirectamente gracias a tu ayuda he conseguido solucionarlo. Si que está todo referenciado (aunque creo que voy a hacer una función para simplificar la captura del nodo abuelo porque hay muchas lineas que se repiten). El problema estaba que en la primera función que ocultaba la capa le ponia el display="none" no al div que era el elemento padre sino al <input> que era el hijo, entonces cuando intentaba cambiar el estado del display no me aparecía nunca el botón porque seguía teniendo el "none". No sé si me he explicado, pongo en rojo donde estaba el fallo, en su lugar debería haber puesto DivPadre.

En todo caso muchísimas gracias porque gracias al uso que has dado a innerHTML he podido ver el problema y aprender como usarlo de esa manera, no se me habría ocurrido nunca.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var marcos, entradaEnlaces, botonAceptar, botonCancelar;

window.onload = function (){
marcos = document.getElementsByName('marco');
entradaEnlaces = document.getElementsByName('introducirLink');
botonAceptar = document.getElementsByName('botonAceptar');
botonCancelar = document.getElementsByName('botonCancelar');

	for(var i=0; i<entradaEnlaces.length; i++){
		entradaEnlaces[i].onclick = introducirDireccion;
	}
	for(var i=0; i<botonAceptar.length; i++){
		botonAceptar[i].onclick = aceptarenlace;
	}
	for(var i=0; i<botonCancelar.length; i++){
		botonCancelar[i].onclick = cancelarenlace
	}
}

    function introducirDireccion(){
    	var divPadre = this.parentNode;
    	var divHijo = this; //??!!
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	cambiarDisplayNodos(divHijo, divAlt[1])
    }
    
    //funcion que hace el nodo1 invisible y el nodo 2 visible
    
    function cambiarDisplayNodos(nodo1,nodo2){	

alert("nodo1.innerHTML»\r\n" +nodo1.innerHTML);
alert("nodo2.innerHTML»\r\n" +nodo2.innerHTML);
					
    	if(nodo2.style.display == "none"){
    		nodo2.style.display = "block"
    		nodo1.style.display = "none"
    	} 
    }
    function aceptarenlace(){
    	var direccionFoto = document.getElementById('enlazarfoto').value;
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	var divImg = divAlt[2].getElementsByTagName('img');
    	var comienzoDireccion = direccionFoto.substring(0,7)
    	if(comienzoDireccion.toLowerCase() != "http://"){
    		alert("No has introducido una dirección valida. Asegurate que comience por http://")
    	}
    	else {
    		divImg[0].src = direccionFoto
    		cambiarDisplayNodos(divAlt[1],divAlt[2]);
    	}
    	
    }
    function cancelarenlace(){
    	var divPadre = this.parentNode; alert("divPadre.innerHTML»\r\n" +divPadre.innerHTML)
    	var divMarco = divPadre.parentNode; alert("divMarco.innerHTML»\r\n" +divMarco.innerHTML)
    	var divAlt = divMarco.getElementsByTagName('div'); 
alert("divAlt[1].innerHTML»\r\n" +divAlt[1].innerHTML)
alert("divAlt[0].innerHTML»\r\n" +divAlt[0].innerHTML)
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = "block"
    }
    
    function validarURL(url) {
    	var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
    	return re.test(url);
    }
</script> 
<style type="text/css">

</style>
</head>
<body>
<div id="marco_1" name="marco" draggable="true">
				<div style="display:">
					<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
				</div>
				
				<div id="introducirLinkAlt" style="/*display:none*/">
					<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
					<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
					<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar" >
				</div>
				
				<div id="foto_1" style="display:none">
					<img src="" width="450px" height="250px">
				</div>
			</div> 
</body>
</html>

furoya · #6 (**permalink**) 15/07/2012, 13:57

¿Entonces, ese this funciona?

Voy a tener que ponerme a estudiar un poco.

Qué bueno que te sirviera; si tienes una nueva versión puedes continuar posteando, a los que sigan el tema para desarmar código les va a ser útil.

Vincens · #7 (**permalink**) 15/07/2012, 14:08

Perdona, ¿Qué es desarmar código? Es por curiosidad.

Si el this funciona, lo puse en un principio para guardarlo en cache (no sé si se dice así, quería guardarlo en una variable para gastarlo luego) pero ahora la linea sobra entera.

furoya · #8 (**permalink**) 15/07/2012, 15:17

Tenía la impresión de que toda esa línea ya no andaba.
Sí, los valores se pueden pasar a una variable global (fuera de la función) y después usarla en otra función o en algún escript inline, dentro de las etiquetas html.

Lo de desarmar el código es algo que hacemos muchos cuando estamos aprendiendo. Tomamos un ejemplo completo, que funciona, y lo destripamos parte por parte para entender cómo trabaja, y eventualmente lo aplicamos a otro proyecto y vemos si también funciona.
Todo esto sin impedirnos buscar las referencias de los métodos, eventos, atributos o propiedades que vamos encontrando. A veces lo que uno supone no es exactamente el mecanismo que anima el código, aunque lo veamos funcionar igual. Por eso después (o mientras tanto) conviene cotejar con los manuales.

Acá se recomienda mucho mirar tutoriales, pero la verdad es que yo los miro después de meter mano en los códigos por las mías.

(Así me mando los mocos que me mando, ¿no?).

Vincens · #9 (**permalink**) 15/07/2012, 15:41

Pues muchas gracias, de todas maneras no te preocupes que seguro que me asaltarán mas dudas con este código. La verdad es que este foro da gusto, muchisimas gracias de verdad.

Vincens