¿como detecto si estan todos los divs con display:none; ?

quico5 · #1 (**permalink**) 29/04/2012, 05:12

me gustaría hacerlo con CSS3 pero no se si se podrá, así que he pensado en JS

necesito que se muestre siempre uno

gracias

Código:

div{display:none;}
#menu:target, #tdah:target, #anhida:target, #enlaces:target{display:block;}

quico5 · #2 (**permalink**) 29/04/2012, 06:01

mas concretamente me llegaría forzar el primer div en display:block; cuando la url no contenga #name > ejemplo:

www.ejemplo.es/#elección

o

www.ejemplo.es/ que active la #eleccion-primera

<div id="menu"></div>

gracias

quico5 · #3 (**permalink**) 29/04/2012, 09:40

he consegido algo

<script>
function menu(){
document.getElementById('menu').style.display = 'block';
}
</script>

<body onload="menu()">

estoy intentando comprobar BODY>DIV

si todos los DIV hijos de BODY estan DISPLAY:NONE; entonces poner el primero a DISPLAY:BLOCK;

¿alguna sujerencia?

gracias

furoya · #4 (**permalink**) 29/04/2012, 19:07

Mira, lo hice en HTML4 porque al 5 no lo manejo, pero tiene que andar igual. El modo de probarlo en local es un poco engorroso : una vez que abres la página, le escribes al final de la ruta (en la barra de direcciones) "#alfa", o "#bravo", o "#charly" (sin las comillas, claro), y le das un [Enter]. Si el navegador sigue sin mostrar nada, es porque sigue usando la ruta original, así que la recargas con [F5] y entonces sí ve la nueva completa. Quizá IE te ponga alguna objeción más en rutas locales

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>
<script type="text/javascript">
function muestra() {
var dir = window.location;
//alert(dir)
var postNumeral = dir.hash.replace("#","");
//alert(postNumeral)
document.getElementById(postNumeral).style.display = "block";
}

onload = muestra;
</script>
<style type="text/css">
div{display:none; background: yellow; font-size: 500%;}
</style>
</head>
<body>
<div id=alfa>ALFA</div>
<div id=bravo>BRAVO</div>
<div id=charly>CHARLY</div>

</body>
</html>

Por supuesto que en la página real los id's ya van a estar puestos en la dirección, y no hay que hacer nada más que abrirla.

Es solamente para mostrar el elemento con ese identificador al cargarse. Los cambios los haces después con los botones y su propio javascript.

emprear · #5 (**permalink**) 30/04/2012, 02:36

@quico5
Ateniéndonos a tu pregunta original
¿como detecto si estan todos los divs con display:none; ? y a

Cita:

si todos los DIV hijos de BODY estan DISPLAY:NONE; entonces poner el primero a DISPLAY:BLOCK;

Código HTML:

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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#uno{
display: none;
}
#dos{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var divs = new Array();
var n = 0;
function obtenerEstilos(propiedad){
var divs=document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
//alert(divs[i].id);
var el=divs[i].id
var x = document.getElementById(el);
if(x != null){
if (x.estiloActual){var y = x.estiloActual[propiedad];if(y == 'block'){n++;}
}else if (window.getComputedStyle){
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(propiedad);
if(y == 'block'){n++;}
}
 
}
 
} // fin for
 
if(n>0){
alert('no todos los divs están ocultos');
}else{
alert('todos los divs están ocultos');
// ponemos el primero en block
document.getElementById('uno').style.display= 'block';
}
}
//]]>
</script>
</head>
<body>
<button onclick="obtenerEstilos('display');">Verificar divs</button>
<div id="uno">
ssss
</div>
<div id="dos">
ssss
</div>
<div id="tres" style="display: none;">
ssss
</div>
</body>
</html>

LA condición necesaria es que todos tus divs tengan un id, la propiedad display puede estar definida inline, o en el css. Agregá Divs y cambiales el display para verificar.
De todas maneras no me queda muy claro porque querés hacer eso? quién o que va a cambiar la propiedad de los estilos?,

Saludos

quico5 · #6 (**permalink**) 30/04/2012, 03:09

gracias a los dos por responder

@furoya se ve interesante tu propuesta pero por alguna razón que aun desconozco me bloquea la navegación

@emprear ¿por que usas /*<![CDATA[*/ ? despues te digo como me va con tu propuesta

aquí tengo el código actualizado -> http://movil.anhida.org o http://movil.anhida.org#menu -> #pagina_cualquiera

es la versión para móviles modernos que estoy realizando, es la primera vez que lo hago, así que estoy experimentando, calculo que se debería verse igual en android como en el iphone

supongo que es criticable que que metiera todo en un único archivo HTML, lo hice así para no ralentizar la carga con múltiples peticiones al servidor, compruebo que así la web carga mucho mas rápido y de una única vez

emprear · #7 (**permalink**) 30/04/2012, 03:29

En xhtml (que es xml) ciertos caracteres pueden provocar errores (< > &), si están presentes en javascript ó css (ejemplo en js < podría significar menor que y no una apertura de una etiqueta), por lo tanto es recoe¡mendable encerrar dichos bloques con etiquetas CDATA, que hacen que el parser XML no analice dicho contenido.
la sintáxis es

Código HTML:

Ver original<style type="text/css">
/*<![CDATA[*/
/* estilos */ 
/*]]>*/
</style>
 
 
<script type="text/javascript">
//<![CDATA[
/* script */
//]]>
</script>

Para css y javascript respectivamente
Saludos

furoya · #8 (**permalink**) 30/04/2012, 08:37

Cita:

Iniciado por emprear

Ateniéndonos a tu pregunta original

Me la paso diciendo que hay que explicar exactamente lo que se busca para que no tengamos que adivinar, y yo sigo adivinando.

Para ganar tiempo, terminé salteando la descripción que estaba en el título, dando por hecho que lo que buscaba quico5 era una forma de abrir la misma página mostrando un contenido distinto según el enlace que la llamara. Y no puse uno como default.
Por supuesto, para hacer esto ni hace falta saber cuál está abierto : se cierran todos y se abre el que aparezca en la url.

Cita:

Iniciado por quico5

es la versión para móviles modernos que estoy realizando, es la primera vez que lo hago, así que estoy experimentando, calculo que se debería verse igual en android como en el iphone

No sabía que era para móviles. No tengo cómo probar eso. Lo que te dejo es otra versión, que reemplaza el numeral ("#") por el interrogatorio ("?"), porque aquel trae muchos problemas de interpretación. Se confunde con el anclaje de HTML, y aquí estamos usando JS.

Código:

<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/

div{display:none; background: yellow; font-size: 500%;}

/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
	//alert("carga")

function muestra() {
var dir = window.location.toString();
	//alert(dir)
dir = dir.split("?");
	//alert(dir)
var bloque = (dir[1]==undefined) ? "default" : dir[1];
	//alert(bloque)
document.getElementById(bloque).style.display = "block";
}

function va(P) {
var ruta = window.location.toString();
ruta=ruta.split("?")[0];
	//alert(ruta)
	//alert(ruta + "?" + P);
window.location = ruta + "?" + P;
}

onload = muestra;

//]]>
</script>
</head>
<body>
<a href=javascript:va("alfa") target="self">ALFA </a> 
<a href=javascript:va("bravo") target="self">BRAVO </a> 
<a href=javascript:va("charly") target="self">CHARLY </a> con JS.<br>

<a href="file:///X:/Documents/furoya/My Spawn/eligeDiv.htm?alfa" target="self">ALFA </a> 
<a href="file:///X:/Documents/furoya/My Spawn/eligeDiv.htm?bravo" target="self">BRAVO </a> 
<a href="file:///X:/Documents/furoya/My Spawn/eligeDiv.htm?charly" target="self">CHARLY </a> con HTML.

<div id=default>DEFAULT</div>
<div id=alfa>ALFA</div>
<div id=bravo>BRAVO</div>
<div id=charly>CHARLY</div>

</body>
</html>

Las rutas de los enlaces las vas a tener que reescribir. Al documento de prueba le puse

eligeDiv.htm

pero puedes usar cualquiera, obvio.

quico5 · #9 (**permalink**) 01/05/2012, 08:54

gracias @furoya con tu ultimo ejemplo has dado en el clavo, tomo nota de tu comentario para evitar cometer el error de una descripción parcial

parece que mi móvil con Android reconoce bastante fielmente las paginas web, a excepción de algún carácter especial de CSS3

uso este codigo para que no me muestre esta web en diminuto desde el móvil

Cita:

no creo que sea de la conexión a Internet de mi móvil, pero he notado que cuantos mas archivos asociados tengo a index.html (por nombrar una pagina) mas demora en las peticiones al servidor desde el móvil, al meter imágenes en la hoja de estilos y esta dentro de la etiqueta <head> realizo una sola petición al servidor, y la pagina carga muchísimo mas rapido desde el movil

furoya · #10 (**permalink**) 01/05/2012, 14:23

Esa es una buena observación. Habría que confirmarla tecnicamente.
De lo que voy a empezar a ocuparme es de averiguar si existe un emulador de navegadores de celular para Windows. Y no hablo del invento de Opera, que te "afina" la ventana para que parezca una palmtop, quiero probar documentos como si los viera Android, p.e.

El último código que dejé ya estaba previendo que usaras dentro de la página botones JS para cambiar el contenido (entre div's), aunque no puse ese escript. El de va() sólo reescribe la url y la manda al navegador para que cargue esa página. No te sirve para cambiar de contenido, porque recarga.
Igual ya vi en otro tema que lo resolviste con CSS.

Los enlaces sí los puedes usar. Son para meterlos en otros documentos y que vayan directamente al contenido que quieras mostrar de la página.

Y el ejemplo de emprear está interesante. No te habrá servido, pero había que ponerlo. Para mantener la coherencia con el título.

emprear · #11 (**permalink**) 01/05/2012, 14:53

Cita:

Iniciado por furoya

Esa es una buena observación. Habría que confirmarla tecnicamente.
De lo que voy a empezar a ocuparme es de averiguar si existe un emulador de navegadores de celular para Windows. Y no hablo del invento de Opera, que te "afina" la ventana para que parezca una palmtop, quiero probar documentos como si los viera Android, p.e.

El último código que dejé ya estaba previendo que usaras dentro de la página botones JS para cambiar el contenido (entre div's), aunque no puse ese escript. El de va() sólo reescribe la url y la manda al navegador para que cargue esa página. No te sirve para cambiar de contenido, porque recarga.
Igual ya vi en otro tema que lo resolviste con CSS.

Los enlaces sí los puedes usar. Son para meterlos en otros documentos y que vayan directamente al contenido que quieras mostrar de la página.

Y el ejemplo de emprear está interesante. No te habrá servido, pero había que ponerlo. Para mantener la coherencia con el título.

Bueno, la mayoría de los emuladores son bastante lamentables, sobre todo respecto del soporte para javascript. En cuanto a Opera tiene algo bastánte mejor que eso
http://developer.android.com/guide/d.../emulator.html
para Opera mini
y
http://www.opera.com/developer/tools/mobile/
que en combinación con la Extensión OperaDragonFly (que viene incluida en Opera) te permite investigar bastante.

Para Android tenes
http://developer.android.com/guide/d.../emulator.html
que viene incluido en el SDK, aunque no probé su funcionamiento ya que de Android 0 !!!
Sin embargo, en general el concepto está equivocado, porque ya no estámos hablando solo del SO del movil en cuestión, sino del navegador y versión del mismo que en el estemos usando.
yo por el momento, sigo con mi xhtml basic, y javascript y css minimos orientado a velocidades tanto 3G, Wifi como GPRS.

Saludos

quico5 · #12 (**permalink**) 01/05/2012, 15:38

Tenia en mente responder el emulador de android, jejej

al menos a mi móvil de android le veo un fallo, cuando hay muchos archivos demora bastante con las peticiones al servidor, he encontrado un ejemplo TABS-CSS, para englobar todo en un único archivo HTML, a este le metí el CSS, y dentro del CSS las imágenes, ahora carga al instante, antes tenia que esperar como 5 a10 segundos a que cargaran los archivos de cada pagina, el archivo me pesa 11KBs, de todas formas @furoya tu ejemplo también me funciona bien en el móvil, pero me iría bastante mas rápido con los enlaces locales, la web principal seguirá siendo esta www.anhida.es que la estoy acabando, algo que me gusta tu ejemplo es que me permitiría compartir secciones vía email a otros móviles

estoy pensando una cosa, ¿Google penaliza DISPLAY:BLOCK;?

www.movil.anhida.es
www.movil.anhida.es/eligeDiv.htm

he encontrado estos dos ejemplos para enviar emails sin salir del archivo de formulario
http://www.miguelmanchego.com/2009/a...cargar-jquery/
http://www.miguelmanchego.com/2009/e...r-jquery-ajax/

los he agregado aca y los estoy poniendo a prueba
www.anhida.es/email

gracias por vuestra ayuda