Problema con div

jonnyalexbh · #1 (**permalink**) 26/04/2011, 08:22

Buenos dias a todos tengo un pequeño problema necesito que al cargar la pagina se oculten los diferentes div quer tengo dentro del ciclo...

Código HTML:

<!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">

function muestra_oculta(id)
{
    if (document.getElementById)
    { //se obtiene el id
    var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
	alert(el);
    el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
    }
}

window.onload = function()
{
	/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
    muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<?php
for($i=1; $i<=2; $i++)
{
?>
<!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
<p><a style='cursor: pointer;' onclick="muestra_oculta('<?php echo "contenido_a_mostrar".$i?>')" title="">Mostrar / Ocultar</a></p>

<div id="<?php echo "contenido_a_mostrar".$i?>">
<p>Este contenido tiene que mostrarse con el link</p>
</div>
<?php	
}
?>
</body>
</html>

maycolalvarez · #2 (**permalink**) 26/04/2011, 08:43

¿te sale algún error en particular?

con la opción que tienes el visitante verán fugazmente los divs antes de ocultarse, pero si en cambio del evento onload, capturas la carga del DOM completa no se verán al cargarse, usa una función para ello como $document.ready() de jQuery (entre otros), pero es más eficiente asignarles una clase CSS con el display: none;

jonnyalexbh · #3 (**permalink**) 26/04/2011, 08:47

Un ejemplo mas claro seria esto como pongo a funcionar este codigo javascript en el ciclo php segun cada linea del ciclo

Código HTML:

<!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>
// definiciones basicas
OCULTO="none";
VISIBLE="block";
 
function mostrar(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off').style.display=VISIBLE;
  document.getElementById('ver_on').style.display=OCULTO;
}
 
function ocultar(blo) 
{
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off').style.display=OCULTO;
  document.getElementById('ver_on').style.display=VISIBLE;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<?php
for($i=0; $i<=10; $i++)
{
?>
<div id="ver_on"><a href="#" onclick="mostrar('bloque'); return false;">Ver más</a></div>
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('bloque'); return false;">Ver menos</a></div>
<div id="bloque" style="display: none">Texto a mostrar u ocultar</div>
<?php
}
?>
</body>
</html>

maycolalvarez · #4 (**permalink**) 26/04/2011, 09:27

te recuerdo que php se ejecuta en el servidor, por lo tanto mientras éste se ejecute no existe DOM ni javascript, cuando php termina envía el html a cliente y es allí cuando javascript se ejecuta, no antes.