ocultar combos a mostrar capa

infolan · #1 (**permalink**) 20/12/2005, 03:36

Hola a continuación os paso el codigo de pos paginas, la principal contiene un iframe lleno de combos, que inicialmente una capa se encuentra oculta, que cuando pulsas sobre una imagen muestra la capa por encima del iframe de los combos.

Pero los combos se ven y lo que me interesen que quede por detrás de la capa.

Alguien me puede ayudar:

prueba.html
código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript1.2">
function mostrar(c) {
document.getElementById(c).style.display='';
}

function ocultar(c) {
document.getElementById(c).style.display='none';
}
</script>
<head>
<title>Untitled</title>
</head>

<body>
<table>
<tr>
<td><img src="logo.gif" width="78" height="18" alt="" border="0" onclick="mostrar('form');"></td>
</tr>
</table>

<div id="form" style="position:absolute; left:210px; top:25px; width:350px; height:300px; z-index:1; background-color:yellow;display:none" onmouseover="ocultar('form');">
</div>

<iframe frameborder="1" width="800" height="200" align="middle" vspace="100" name="formulario" src="formulario.html">
</iframe>
</body>
</html>

formulario.html
código: es una tabla llena de combos.

infolan · #2 (**permalink**) 20/12/2005, 04:51

nadie me puede ayudar?

Boku · #3 (**permalink**) 20/12/2005, 06:59

Yo tuve un problema parecido, me dijeron que probase a deshabilitar los combos, pero no me funcionó, lo unico que pude hacer fue ocultar los combos para que no salieran sobre la capa.

Si alguien tiene alguna idea sobre esto a mi también me interesaría saber como evitar esto sin ocultar los combos.

Probé con z-index, pero no me funcionó.

infolan · #4 (**permalink**) 20/12/2005, 07:04

Me puedes indicar de que manera ocultaste los combos?

Boku · #5 (**permalink**) 20/12/2005, 09:46

es sencillo:

Para ocultar el campo select y mostrar la capa:
document.getElementById('campo_select').style.visi bility = 'hidden';
document.getElementById('nombre_capa').style.visib ility = 'visible';

Para devolverlo a su estado normal es al revés.

Espero que te sirva.

infolan · #6 (**permalink**) 20/12/2005, 10:01

hola boku,

pero los campos select están dentro de un ifram, como tú me lo has escrito, funciona igual cuando están en un iframe?

Saludos
Jaime

Boku · #7 (**permalink**) 20/12/2005, 10:07

No lo se, en mi caso los select no están en un iframe, sino en un formulario normal dentro de la pagina principal. Prúebalo y nos cuentas si te ha funcionado.

infolan · #8 (**permalink**) 20/12/2005, 10:11

Este es mi codigo y me da un error de javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript1.2">
function mostrar(c,sb) {
document.getElementById(c).style.display='';
document.getElementById(sb).style.visibility = 'hidden';
}

function ocultar(c) {
document.getElementById(c).style.display='none';
}
</script>
<head>
<title>Untitled</title>
</head>

<body>
<table>
<tr>
<td><img src="logo.gif" width="78" height="18" alt="" border="0" onclick="mostrar('form','Tiendas');"></td>
</tr>
</table>

<div id="form" style="position:absolute; left:210px; top:25px; width:350px; height:300px; z-index:1; background-color:yellow;display:none" onmouseover="ocultar('form');">
</div>

<iframe frameborder="1" width="800" height="200" align="middle" vspace="100" name="formulario" src="formulario.html">
</iframe>
</body>
</html>

infolan · #9 (**permalink**) 20/12/2005, 10:21

Error ya lo he visto, el problema esta que cuando haces esto:
document.getElementById(sb).style.visibility = 'hidden';

sobre unos combos que esta en un iframe, no lo encuentra, si los combos lo pones sobre la pagina si que funciona.

Haría falta saber la manera de indicarle con una sentencia como esta : document.getElementById(sb).style.visibility = 'hidden'; que actue sobre los campos que se encuentra en el iframe

infolan · #10 (**permalink**) 20/12/2005, 10:26

dice que en la linea : document.getElementById(sb).style.visibility = 'hidden'; hay un error que requiere un objeto

Boku · #11 (**permalink**) 20/12/2005, 10:29

efectivamente, parece que no encuentra el select. No te puedo ayudar porque no se apenas nada de iframes, lo siento. De todas formas seguro que hay alguna forma de referirte a él. Prueba accediendo por el atributo name en lugar del id:

formulario.nombre_campo.style.visibility = true / false.

infolan · #12 (**permalink**) 21/12/2005, 01:29

Siguiendo el ejemplo anterior, tu sabrías hacer ocultar aquellos combos ya sean ocultados entero o parcialmente por la capa.

el_javi · #13 (**permalink**) 21/12/2005, 02:12

Hola compañer@s.

Veo que os estais planteando soluciones para el problema, las cuales ya probamos otros en su momento.

Yo, solventé ese problema hace tiempo (podeis verlo en las FAQ. Os dejo el enlace: http://www.forosdelweb.com/showthrea...=105325&page=8 (abajo del todo, en mi post) )

La forma mas sencilla, sin tener que deshabilitar los combos ni ocultarlos, es la siguiente:

Hace falta un elemento más en vuestro desarrollo.

Teneis:

- El documento, con su formulario y sus SELECT's

- La capa que quereis poner por encima de los SELECT.

Pues teneis que incluir un nuevo elemento: Un iframe, el cual va a estar SIEMPRE por debajo de la capa.

La lógica del Iframe por debajo de la capa, es que:

Un select, es un componente de Windows (en internet Explorer) el cual tiene, por asi decirlo un Z-index, o una superposición mayor que cualquier tipo de elemento de Formulario.

Para contrareestar dicho superposicionamiento, usamos otro elemento que sea, por asi decirlo, componente Windows (osea, el iframe)

Entonces, todo quedaría de la siguiente manera:

Abajo del todo, vuestro select (sin deshabilitar, sin ocultar ni nada).

Al hacer que aparezca la capa, hacemos que aparezca el IFRAME.

Al aparecer el Iframe, hacemos que aparezca la CAPA, y todo queda superpuesto.

El códifo del Post que puse, está bastante bien comentado, pero si queda alguna duda, no dudeis en comtármelo.

Ésta solución, no es la mas "profesional" por asi decirlo, pero es lo más funcional que he hecho hasta ahora referido a este problema, dado que no tienes que estar controlando por encima de que elementos está la capa.
Es algo totalmente independiente del formulario.

Por asi decirlo, está abstraido en una capa de abstracción diferente a la del formulario.

Espero todo tipo de comentarios y aportaciones para mejorar el código.

Un saludo a tod@s, y FELICES FIESTAS!!!!!

infolan · #14 (**permalink**) 21/12/2005, 02:19

Eso ya la probé, y funciona perfectamente pero no es del agrado de la empresa.

el_javi · #15 (**permalink**) 21/12/2005, 02:38

Hola de nuevo infolan.

Sinceramente, me parece que tu empresa no sabe cuales son las limitaciones del HTML 4.0 y las necesidades de Estandarización Web.

Me dedico de forma profesional al desarrollo Web (con ello quiero decirte que mis desarrollos, como el comentado anteriormente, están en Webs de grandes empresas, tipo Endesa, Tabaco Coronas, Premios Eficacia... todas ellas con grandes protocolos de Estandarización Web).

Los problemas de Capas (Div's) sobre Formularios, se llevan trayendo desde hace años.

Además, te incluyo el comentario de que el desarrollo (o solución) propuesto antes, es multiplataforma, probado en Internet Explorer, Firefox, Netscape y Opera.

Creo que la solución de hacer desaparecer los select, y que aparezcan de nuevo... es bastante afuncional, dandole al usuario una impresión de desorden a la Web.

Hay que mirar también al solucionar problemas de este tipo, que ha de ser lo mas estandar posible, facil para el programador, pero también hay que mirar que al usuario no le suele gustar, perder los elementos de su formulario.

Un saludo.

infolan · #16 (**permalink**) 21/12/2005, 02:46

No te lo disguto si cuando probé el ejemplo ví que era lo ideal, ya que no desaparece el combo, es como tu dices, en otras palabras no queda cutre el efecto.

infolan · #17 (**permalink**) 21/12/2005, 04:23

Al final me ha salido de esta manera :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript1.2">
function obtenirPosicioAbsoluta(element)
{
var r = { x: element.offsetLeft, y: element.offsetTop };
if (element.offsetParent) {
var tmp = obtenirPosicioAbsoluta(element.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}

function mostrar(c) {
var i;
document.getElementById(c).style.display='';
ventana = window.frames["iframe"];
sel = ventana.document.getElementsByTagName("SELECT")
var p = obtenirPosicioAbsoluta(document.getElementById(c)) ;

var EX1 = p.x;
var EX2 = document.getElementById(c).offsetWidth + EX1;
var EY1 = p.y;
var EY2 = document.getElementById(c).offsetHeight + EY1;

for(i=0;i<sel.length;i++)
{
var poscombox = obtenirPosicioAbsoluta(sel[i]);
var EXPCB1 = poscombox.x;
var EXPCB2 = sel[i].offsetWidth + EXPCB1;
var EYPCB1 = p.y;
var EYPCB2 = sel[i].offsetHeight + EYPCB1;

if ((EXPCB1 > EX2) || (EXPCB2 < EX1) || (EYPCB1 > EY2) || (EYPCB2 < EY1))
{
sel[i].style.visibility = "visible";
}
else
{
sel[i].style.visibility = "hidden";
}

// sel[i].style.visibility = 'hidden';
}
}

function ocultar(c) {
var i;
document.getElementById(c).style.display='none';
//Para poder acceder a los elementos que se encuenta en el iframe
ventana = window.frames["iframe"];
//Recorremos todos los campos que sean del tipo select
sel = ventana.document.getElementsByTagName("SELECT")
for(i=0;i<sel.length;i++)
{
// se muestra todos los combos
sel[i].style.visibility = 'visible';
}
}
</script>
<head>
<title>Untitled</title>
</head>

<body>
<table>
<tr>
<td><img src="logo.gif" width="78" height="18" alt="" border="0" onclick="mostrar('form');"></td>
</tr>
</table>

<div id="form" style="position:absolute; left:280px; top:25px; width:350px; height:300px; z-index:1; background-color:yellow;display:none" onmouseover="ocultar('form');">
</div>


<iframe frameborder="1" width="800" height="200" align="middle" vspace="100" name="formulario" src="formulario.html" id="iframe">
</iframe>
</body>
</html>

Boku · #18 (**permalink**) 21/12/2005, 05:02

Me parece buena la idea, tendré que aprender algo sobre iframes, que estoy bastante pez en eso. Muchas gracias el_javi