Mostrar Ocultar TIPOS de Capas!! No es lo que parece...

Karmico · #1 (**permalink**) 30/11/2006, 05:07

Hola a todos,

resulta que necesito la siguiente aplicación en javascript, y estoy hecho un lio. Necesito que, a traves de unos enlaces llamados ESPAÑOL, INGLES, ALEMAN (asi hasta nueve idiomas...) mostrar u ocultar un grupo de capas que pertenecen a ese idioma....

Aqui va el codigo...

<html>
<head>
<script type="text/javascript">
function MostrarIdioma(idioma) {
// COMO DEBE FUNCIONAR: OCULTAR TODAS LAS CAPAS DE IDIOMAS PARA LUEGO MOSTRAR LA DEL IDIOMA SELECCIONADO
var elementos = document.getElementByID('lang');
elementos.style.display = "none";

var elementos2 = document.getElementsByName(idioma);
for (i = 0; i< elementos2.length; i++) {
if(navigator.appName.indexOf("Microsoft") > -1){
var visible = 'block'
} else {
var visible = 'table-row';
}
elementos2[i].style.display = visible;
}
}
</script>
</head>
<body>

<a href="javascript:MostrarIdioma('es')">Español</a> | <A href="javascript:MostrarIdioma('en')">Ingles</a><br>

<div name="es" id="lang">ESTA ES LA CAPA DE ESPAÑOL 1</div>
<div name="es" id="lang">ESTA ES LA CAPA DE ESPAÑOL 2</div>
<div name="en" id="lang" style="display:none;">ESTA ES LA CAPA DE INGLES 1</DIV>
<div name="en" id="lang" style="display:none;">ESTA ES LA CAPA DE INGLES 2</DIV>
<div name="al" id="lang" style="display:none;">ESTA ES LA CAPA DE ALEMAN 1</DIV>
<div name="al" id="lang" style="display:none;">ESTA ES LA CAPA DE ALEMAN 2</DIV>

</body>
</html>
Como es obvio, el codigo no me funciona....

Gracias por vuestra ayuda!!!!

caricatos · #2 (**permalink**) 30/11/2006, 06:36

Hola:

Tienes algunas cosas mal...

Un id debe ser único, así que no vale como lo tienes... si se trata de capas (elementos div), puedes recorrer la colección (array) desde un elemento padre (preferentemente el inmediato superior que en tu ejemplo parece ser el body...)
Y ya que se trata de idiomas, podrías definir el atributo lang para discriminar...

Y sobre mostrar ocultar capas, creo que es preferible usar el estilo display con los valores hidden/block:

function mostrarIdioma(idioma) {
elementos = document.body.getElementsByTagName("div");
for (var i = 0, total = elementos.length; i < total; i ++)
elementos[i].style.display = (elementos[i].lang == idioma) ? "block" : "none";
}

Por cierto, creo que tengo algo como lo que pides en esta página: Página web del "Bar La Cabaña".. pinchando en las banderas del marco izquierdo se actualizan los contenidos del derecho...

Saludos

Karmico · #3 (**permalink**) 30/11/2006, 09:41

Gracias caricatos!!!

Funciona a la perfección, pero necesita una mejora....

La cuestión es que nó solo existen esos elementos DIVS de los idiomas en la página, y eso me crea problemas...

he probado con getElementsByName llamando a cada capa IDIOMA, pero nada....

alguna otra idea??

Gracias!

Aqui el codigo:

<html>
<head>
<script type="text/javascript">
function mostrarIdioma(idioma) {
elementos = document.body.getElementsByTagName("div");
for (var i = 0, total = elementos.length; i < total; i ++)
elementos[i].style.display = (elementos[i].lang == idioma) ? "block" : "none";
}
</script>
</head>
<body>

<a href="javascript:mostrarIdioma('es')">Español</a> | <A href="javascript:mostrarIdioma('en')">Ingles</a><a href="javascript:mostrarIdioma('es')">Español</a><br>
<div lang="es">ESTA ES LA CAPA DE ESPAÑOL 1</div>
<div lang="es">ESTA ES LA CAPA DE ESPAÑOL 2</div>
<div lang="en" style="display:none;">ESTA ES LA CAPA DE INGLES 1</DIV>
<div lang="en" style="display:none;">ESTA ES LA CAPA DE INGLES 2</DIV>
<div lang="al" style="display:none;">ESTA ES LA CAPA DE ALEMAN 1</DIV>
<div lang="al" style="display:none;">ESTA ES LA CAPA DE ALEMAN 2</DIV>
</body>
</html>

Karmico · #4 (**permalink**) 02/12/2006, 05:06

Alguna idea?

JavierB · #5 (**permalink**) 02/12/2006, 08:12

Hola Karmico

Entiendo que, además de divs, tienes párrafos que mostrar/ocultar. Prueba este código:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function mostrarIdioma(idioma) {
elementos = document.body.getElementsByTagName("*");
for (i=0; ele = elementos[i]; i++)
  if (ele.lang !='')
    ele.style.display = (elementos[i].lang == idioma) ? "block" : "none";
}
</script>
</head>
<body>

<a href="javascript:mostrarIdioma('es')">Español</a> | <A href="javascript:mostrarIdioma('en')">Ingles</a><a href="javascript:mostrarIdioma('es')">Español</a><br>
<div lang="es">ESTA ES LA CAPA DE ESPAÑOL 1</div>
<div lang="es">ESTA ES LA CAPA DE ESPAÑOL 2</div>
<p lang="en">Párrafo en inglés</p>
<p lang="es">Párrafo en español</p>
<div lang="en" style="display:none;">ESTA ES LA CAPA DE INGLES 1</DIV>
<div lang="en" style="display:none;">ESTA ES LA CAPA DE INGLES 2</DIV>
<div lang="al" style="display:none;">ESTA ES LA CAPA DE ALEMAN 1</DIV>
<div lang="al" style="display:none;">ESTA ES LA CAPA DE ALEMAN 2</DIV>
</body>
</html>

Saludos,