Ocultar capa hasta que se recargue la página.

susaninhax · #1 (**permalink**) 29/09/2009, 02:58

Buenas compañeros, antes he utilizado un post antiguo para preguntar esto mismo, pero como lo van a cerrar ( " Ocultar capa en un determinado momento") por antiguedad abro uno nuevo.

Necesito ocultar una capa hasta que se termine de cargar la página. He probado lo siguiente pero me pierdo:

Código HTML:

<!--Tengo una hoja de estilos con estos css:-->
<style>
#form_usr_content{
	height:50px; 
	width:95%; 
	display:none;
}

</style>

<!--Javascript:-->

<script type="text/javascript">
	
	function negative(id) {
		document.getElementById(id).style.display="block";
	}
	
</script>

<body onLoad="negative('form_usr_content');>

<!--capa que quiero ocultar hasta que se recargue la pagina. -->
<div id="form_usr_content" class="form_usr_content">hola </div>

Pero no me hace nada, ni siquiera me la oculta. que pued hacer???
Gracias por vuestra ayuda de veras

zerokilled · #2 (**permalink**) 29/09/2009, 03:03

no he comprobado el codigo pero a simple vista...

Código:

<body onLoad="negative('form_usr_content');>

tienes que cerrar adecuadamente el valor del atributo. o sea, te falto la comilla doble al final.

susaninhax · #3 (**permalink**) 29/09/2009, 03:05

ups, fue un fallo al pasarlo aquí, XD tiene la doble comilla pero no me funciona

zerokilled · #4 (**permalink**) 29/09/2009, 03:11

acabo de comprobarlo y me funciona en Fx3, chrome, e iexplorer. quizas sea que todo sucede muy a prisa y no puedes apreciar el efecto. generalmente esto sucede cuando haces la prueba en localhost. de todos modos, hazlo con un temporizador para que puedas apreciarlo.

Código:

// poner en onload de body;
setTimeout(function(){negative('form_usr_content')}, 3000);

susaninhax · #5 (**permalink**) 29/09/2009, 03:22

Ostris, pues es verdad, muchsísimas gracias zerokilled, me has ayudado un monton!! puedo jugar con el tiempo para que se aprecie

zerokilled · #6 (**permalink**) 29/09/2009, 03:28

aclaro que no es necesario que lo uses en tu documento oficial. el unico proposito era para demostrarte que tu codigo estaba funcionando. si lo necesitas como parte de tu codigo pues no hay problema... suerte!

susaninhax · #7 (**permalink**) 29/09/2009, 04:19

mmm tengo un problema, si lo hago en una única capa no tengo problema. Pero imaginemos un listado. Donde se repite una capa muchas veces. Si quiero ocultar esa capa que se repite muchas veces hasta que se recargue la página, entonces, YA NO FUNCIONA, es decir, no me aparece nunca la capa.

Total, si lo aplico a una única capa no hay problema, pero si esa capa se repite ya no me funciona... puede ser porque haya muchos registros??¿?¿?¿?¿ y se haga un lio?¿?¿?¿

Siento ser tan pesada con el tema... pero me lio yo sola, gracias de antemano!!!

zerokilled · #8 (**permalink**) 29/09/2009, 04:37

asumo que copiastes la capa varias veces sin cambiarle nada. si es el caso, seguro el problema es el ID. sucede que los ID's tienen que ser unicos, es decir, no puede haber mas de un elemento con el mismo ID. hay varias soluciones:

asigna un ID distinto a cada capa. claro, el inconveniente es que tienes que llamar la funcion tantas veces segun la cantidad de capas.
poner todas las capas dentro de un elemento que las contenga a todas. en este caso, el elemento contenedor es quien se oculta/aparece en lugar de las multiples capas. por supuesto, tienes que asignarle un ID al contenedor para hacer referencia. el probable inconveniente es que no tengas tanta flexibilidad para distribuir las capas por el documento. a no ser que seas un master en css y logres hacerlo funcionar en todos los navegadores por igual.
la otra alternativa es parecida a la que estas aplicando. se distingue que en lugar de usar ID, le asignas una clase a todas las capas y obtienes la referencia de todas ellas con getElementsByClassName. en mi opinion, tiene mas ventaja que desventaja, por ejemplo puedes distribuir las capas en tu contenido.

susaninhax · #9 (**permalink**) 29/09/2009, 05:00

uf, la primera me lo reentilizaría demasiado ya que tengo muchos datos,

la segunda opcion molaría pero está montado de tal manera que me es inviable cambiarle el esqueleto del listado.. me matarían los programadores XDDDDDDD

y la tercerca opción parece la más logica, pero el problema es que no controlo gran cosa javascript. Cuando te refieres a asiganar una clase, te refieres a ponerle a la capa " class="clase" " no? y luego con "document getelementsbyclassname" tengo que recoger esa clasee y decirle display none?¿?¿?¿

algo tal que así?¿ :

"document.getElementsByClassName('ocultar').style. display="block";"

disculpar, pero es que no tengo ni idea, he estado mirando por google, pero todos los ejemplos que he encontrado lo plantean de una manera tan distinta que no acabo de ver la manera de ponerlo

gracias una vez mas

zerokilled · #10 (**permalink**) 29/09/2009, 05:09

si, asignandole la misma class, class="clase". estas casi ahi, eventualmente es con document.getElementsByClassName. solo que la funcion devuelve una coleccion de elementos, un dato parecido a los arrays. por lo cual, tienes que recorrer por cada elemento con un bucle e ir asignandole el estilo.

Código:

var capas = document.getElementsByClassName("ocultar");
for(var i = 0; capas[i]; i++)capas[i].style.display = "block";

ahora bien, para iexplorer no funciona porque getElementsByClassName no existe. pero es facil resolverlo con una funcion similar. primero carga el siguiente codigo.

Código:

if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var regex = new RegExp(className);
var array = [];
var element = arguments[1] || document.documentElement;
	for(var elem = element.firstChild; elem != null; elem = elem.nextSibling){
	if(elem.nodeType != 1)continue;
	if(regex.test(elem.className)) array.push(elem);
	if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
	}
return array;
}}

susaninhax · #11 (**permalink**) 29/09/2009, 05:31

puf, muchas gracias de antemano zerokilled por tu ayuda y por tu tiempo, porque te estoy mareando un monton y me sabe mal.
He probado lo que me has dicho y lo he puesto asi:

<script>
function negative(class) {

var capas = document.getElementsByClassName("ocultar");
for(var i = 0; capas[i]; i++){
capas[i].style.display = "block";
}
</script>
<body onLoad="negative('ocultar');">

<div id="ocultar" class="ocultar">
prueba
</div>

Lo he puesto así, pero sigue ocultandome todas las capas despues de cargarse la página.

zerokilled · #12 (**permalink**) 29/09/2009, 05:40

mmmm, creo que no viene mal un buen consejo. cuando abras algo, cierralo en ese mismo instante, asi no te olvidas de ese detalle. o sea, si vas a escribir una funcion, primero escribe

Código:

function(){}

y luego vas entrando el codigo necesario en el cuerpo. asi sucecivamente con el resto de las cosas: parentesis, bloques, comillas, etc. el problema de tu caso es que no has cerrado la funcion.

susaninhax · #13 (**permalink**) 29/09/2009, 05:48

cierto, otro fallo nuevamente mio de copiar el codigo, XD, es que como tengo más codigo entre medias copio solo lo justo y se me escapa.. XD

por otro lado, lo he revisado por si me faltaba alguna cosa o está mal escrito y tal, y nada, sigo sin verlo... no me lo explico

dentor de la funcion, está bien puesto el negative(class) o debería poner otra cosa... no se me ocurre.

zerokilled · #14 (**permalink**) 29/09/2009, 05:55

se me paso por alto otro detalle, la palabra class esta reservada aunque, creo, actualmente no tiene un uso. o sea, esta reservada para versiones futuras de javascript. cambia el nombre del argumento por otra cosa como classname. si es el caso que estas usando iexplorer, recuerda tambien cargar la funcion que corrige iexplorer, o sea el segundo codigo en mi post anterior. por lo demas, a mi me funciona bien.

susaninhax · #15 (**permalink**) 29/09/2009, 06:02

voy a verlo otra vez en una hoja nueva, a lo mejor tengo algun otro javascript que me puede estar haciendo conflicto con ese... aunque creo que no, pero voy a ver y a probarlo en una hoja nueva. En serio, de todos modos me has ayudado mucho, cosas nuevas que aprendo

voy a probar.

EDITO: SI QUE FUNCIONAAA iupiiii!!!!!!!!!!!!!!1 ahora voy adaptarl para explorer

jooooo muchas graciass!!!!!!!!!!!!!!!! hice un control f5 XDD que iluuu

graciasss!!!!!!!!

:aplau so:

susaninhax · #16 (**permalink**) 29/09/2009, 08:12

debo de parecer muy tonta... pero no consigo hacerlo funcionar para explorer, estoy con el Ie7. El código lo he puesto así pero me temo que no debo de ponerlo de esta manera.

Código HTML:

function negative(classname) {
/*PARA FIREFOX*/
	//document.getElementById(id).style.display="block";
	var capas = document.getElementsByClassName("ocultar");
	for(var i = 0; capas[i]; i++)
	{
		capas[i].style.display = "block";
	}

/*PARA IE*/
//function negative(classname) 
	if(!document.getElementsByClassName)
	{
		document.getElementsByClassName = function(className){
		var regex = new RegExp(className);
		var array = [];
		var element = arguments[1] || document.documentElement;
			for(var elem = element.firstChild; elem != null; elem = elem.nextSibling){
			if(elem.nodeType != 1)continue;
			if(regex.test(elem.className)) array.push(elem);
			if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
		}
	return array;
	}
	}
	
}

He probado a ponerlo a parte, fuera del function negative, pero me falla. Podrías decirme o darme una pista de como tendría que poner ese script para explorer?¿?¿

muchisimas gracias de todos modos

zerokilled · #17 (**permalink**) 29/09/2009, 08:18

el bloque if muevelo fuera de la funcion negative. o sea, te debe quedar asi

Código:

if(...){
...
}

function negative(...){
...
}

el punto es que cuando el navegador cargue, el bloque if lo interprete. fijate que primero va el if y luego la funcion negative. debes hacerlo asi porque sino te genera error en iexplorer.

susaninhax · #18 (**permalink**) 29/09/2009, 08:23

lo he puesto así todo junto, primero el if que vale para firefox y luego el otro y no me lo hace:

Código HTML:

/*PARA FIREFOX*/
function negative(classname) {
	//document.getElementById(id).style.display="block";
	var capas = document.getElementsByClassName("ocultar");
	for(var i = 0; capas[i]; i++)
	{
		capas[i].style.display = "block";
	}
}

/*PARA IE*/
if(!document.getElementsByClassName)
{
	document.getElementsByClassName = function(className){
	var regex = new RegExp(className);
	var array = [];
	var element = arguments[1] || document.documentElement;
		for(var elem = element.firstChild; elem != null; elem = elem.nextSibling){
		if(elem.nodeType != 1)continue;
		if(regex.test(elem.className)) array.push(elem);
		if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
	}
	return array;
	}
}

el className es necesario que tenga el mismo nombre que el primer if?

zerokilled · #19 (**permalink**) 29/09/2009, 08:33

no comprendi tu duda

quizas me esta fallando el cerebro porque estoy trasnochado. asi como esta el codigo supone que te funcione. punto aparte y solo para aclarar. viendo el comentario en tu codigo que dice "PARA IE y PARA FIREFOX". cabe notar que la funcion negative es para cualquier navegador. sin embargo, el bloque if es para navegadores que no implementan la funcion document.getElementsByClassName.

susaninhax · #20 (**permalink**) 29/09/2009, 08:40

ufff, lo siento, jijiji si te debo de estar mareando pobre, XD, es que lo mio no es el javascript, soy diseñadora y me han empaquetado un marron que me está volviendo loca jijijijii. Las anotaciones se que no corresponden con el codigo se las he puesto para enterarme yo, entiendo que el segundo if complementa la función negative

.

Me enrredo, el caso es que tal como te lo he puesto arriba, primero el if de:

function negative(classname) {...}

y luego el if { ...(con los bucles para el Ie)...}

y el caso es que no me funciona

no se que es lo que debo corregir. o si tengo que cambiarle el nombre al className o algo asi...

zerokilled · #21 (**permalink**) 29/09/2009, 09:01

tremendo marron que te ha caido! debes estar asi.

al tema, hice un ejemplo especificamente para ti porque segun como lo tienes se supone que te funcione. lo comprobe en firefox e iexplorer7. como quien dice no hice ninguna modificacion salvo el texto en rojo. recuerda limpiar la cache del navegador, u obligar al navegador cargar el documento desde la fuente orignal, no sea que eso es lo que te esta fallando igual que antes.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CDATA</title>
<style type="text/css">
.una_clase{
display:none;
}
</style>
<script type="text/javascript">
function negative(classname) {
	//document.getElementById(id).style.display="block";
	var capas = document.getElementsByClassName(classname);
	for(var i = 0; capas[i]; i++)
	{
		capas[i].style.display = "block";
	}
}

if(!document.getElementsByClassName)
{
	document.getElementsByClassName = function(className){
	var regex = new RegExp(className);
	var array = [];
	var element = arguments[1] || document.documentElement;
		for(var elem = element.firstChild; elem != null; elem = elem.nextSibling){
		if(elem.nodeType != 1)continue;
		if(regex.test(elem.className)) array.push(elem);
		if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
	}
	return array;
	}
}</script>
</head><body onload="negative('una_clase');">
<div class="una_clase">soy un bloque</div>
<div class="una_clase">y yo el segundo</div>
</body></html>

susaninhax · #22 (**permalink**) 29/09/2009, 09:30

puff, un monton de gracias, valla lata que te he dado ehh, XD, he borrado la caché, todo, lo he eleminado todo, hasta las contraseñas, y NADA, jajajajaja, me tiene manía el explorer. tengo café en vena ya XD puff, creo que voy a salir a dar un paseo, y luego vuelvo a intentarlo y a las malas, pues le digo a mis jefes que no soy capaz y que sea lo que dios quiera...

he probado a copiar tu codigo y hacerlo en una pagina nueva y pegarlo tal cual, Y TAMPOCO LO VEO EN el explorer,...

De todos modos un monton de gracias por tu tiempo en serio, al menos funciona en firefox y a las malas ya buscaré otro modo para hacerlo en explorer, algo similar.
gracias de veras

zerokilled · #23 (**permalink**) 29/09/2009, 09:56

¡me has dado para pensar! simple curiosidad, ¿como estas haciendo las pruebas? en tu maquina local, o subes los documentos al internet y desde ahi lo pruebas. si es el caso de maquina local, lo ultimo que se me ocurre es la seguridad de iexplorer. pues al ejecutar javascript desde la maquina local, iexplorer bloquea el codigo y emite un aviso que se intento usar ActiveX. tienes que aceptar el aviso para ejecutar el codigo o bien configurar el navegador para que no muestre mas el aviso. un ejemplo del aviso