Modificar propiedad Display
9 seguidores
Estoy haciendo unas pruebas con la propiedad display de un elemento. La propiedad está en los standares ya desde el CSS1 y funciona a las mil maravillas. El problema viene cuando quiero modificar esa propiedad desde javascript porque no todos los navegadores reconocen esa modificación.
Podéis ver un ejemplo de a qué me refiero aquí:
ABRIR EJEMPLO
¿Alguien sabe alguna forma de hacer esto compatible con todos los browsers?
Salu2
orange
Varias cosas, no he hecho la prueba, pero para referirte a elementos en el documento yo que tú utilizaría document.getElementbyId("idelemento").propiedad, en lugar del simple idelemento.propiedad ... prueba a ver y me cuentas.
Más cosas, hay varios tipos distintos de display, aqui utilizas bien el "none", pero yo en lugar de "inline" utilizaría "block", ¿por qué?, porque tú no quieres mostrar el elemento en la misma línea que el anterior ... sino en un cuadro distinto.
Otra más, en la clase para poner el cursor utilizas cursor: hand; eso funciona con Explorer, pero no con el resto, mejor pon cursor:pointer, que únicamente no rula con IE5 (si para ti es muy importante igual puedes meter esa parte en el JS y discriminar navegadores)
Esto es asi a bote pronto, si no te rula dilo y me lo miro más detenidamente
spiral
http://squidfingers.com/code/dhtml/?id=simplemenu
checate el codigo que usa, sirve perfecto en todos los browsers 4+
txuma Plus
orange
Más cosas, hay varios tipos distintos de display, aqui utilizas bien el "none", pero yo en lugar de "inline" utilizaría "block", ¿por qué?, porque tú no quieres mostrar el elemento en la misma línea que el anterior ... sino en un cuadro distinto.
Esto es asi a bote pronto, si no te rula dilo y me lo miro más detenidamente
Cierto, cierto, de hecho tenía puesto block y lo modifiqué para hacer una prueba, pero se me había olvidado retornar al estado inicial.
Spiral, el ejemplo que me mandas no es lo que yo quiero conseguir. Ahí está usando capas con posicionamiento absoluto y trabaja con la propieda visibility
Gracias por las ideas, voy a probarlo a ver que pasa y os cuento
sgiraldo
txuma, si lo que quieres es q desaparezca... creo q era con el display=none.
Josh
orange muy buenas tus recomendaciones.
Un truquillo para que salga el cursor de la "manita" en todos los navegadores es poner en la clase css los dos tipos y en este orden:
cursor: pointer;
cursor: hand;
asi cada navegador ignora el que no entiende y se queda con el que si entiende. Un efecto secundario es que el validador del W3C dirá que hand es ilegal :)
hartum
spiral, muy buena pagina con muy buenos ejemplos, tomo nota, y navegando navegando llegue a un sitio que ya conocia pero tenia olvidado y es la caña de la montaña,
http://www.youngpup.net/
orange
Josh
<ul>cursor: pointer;
cursor: hand;</ul>
Coño claro! ... muy buena esa Josh .... apuntada queda para el futuro
:DDD
txuma Plus
HARTUM
spiral, muy buena pagina con muy buenos ejemplos, tomo nota, y navegando navegando llegue a un sitio que ya conocia pero tenia olvidado y es la caña de la montaña,
http://www.youngpup.net/
Muy buen sitio, si señor....
hartum
Curiosidades "tesnicas", si vas a l sitio de younpup con diferentes navegadores la interface cambia completamente, por lo mneos antes era asi, una autentica caña from the mountain, osea que los de explorer ven una pagina distinta que los de mozilla, y que los de opera, etc....
meddle
deberia ser:
<code>cursor: pointer, hand;</code>
orange
Asi puesto meddle no me funciona en IE6
¿?
meddle
prueba
<code>#capa a {cursor: hand, pointer;}</code>
o
<code>#capa a {cursor: pointer, hand;}</code>
txuma Plus
orange
Asi puesto meddle no me funciona en IE6
¿?
A mi me rula si lo pongo en lineas separadas solamente...
De todos modos, lo que sigue sin rular es el cambio de la propiedad display en otra cosa que no sea Exploter.... :(
meddle
lo del display deberia ser algo asi, lo escribo de memoria, puede fallar:
<code>function toggleDisplay(lyr){
if(document.getElementById(lyr).style.display=="none") document.getElementById(lyr).style.display="block";
else document.getElementById(lyr).style.display="none";
}
</code>
Luego lo llamarias con algo como:
<code><a href="#" onclick="toggleDisplay('idcapa')">cambia display<a></code>
txuma Plus
La solución
<code>
1. El script:
function colapsa (identificador) {
if (document.getElementById(identificador).style.display=="none")
document.getElementById(identificador).style.display="block";
else
document.getElementById(identificador).style.display="none";
}
</script>
2. El HTML:
<a href="#" onClick="colapsa('partidoA')">Mostrar datos<a>
</code>
La clave me la dio orange (<em>"yo que tú utilizaría document.getElementbyId("idelemento").propiedad</em>"). Y la puntilla me la ha puesto meddle con su ejemplo.... ¡¡¡¡Me faltaban las comillas de 'partidoA' !!!! ....... soy un puto necio.... creo que debo dedicarme a tricotar :oops:
hartum
y si pones un enlace para ver como te ha quedado, y asi nos hacemos una idea aproximada??????
txuma Plus
Claro que si:
ABRIR EJEMPLO
Testado con IE6, N7, FB 0.6.1 y Opera 7
Si alguien encuentra alguna incompatibilidad que me avise, plis.
KikeBesada
en mac tira tambien :)
hartum
jajajajajaja picasteeeeeeeeeeeeee, ahora me hago un copy paste y me lo aplico al kddomatic, huuuuuuuuuuuuuuuuuuuu que perita va a quedar.
txuma Plus
jejejeje, coño, haberlo pedido..... si sabes que yo te doy todo lo que me pidas, cariño... :P
orange
Me alegro de que te haya funcionado, estas cositas molan, porque son detalles que te pueden alegrar una web, y además no son muy complicados ni te crean demasiados problemas crossbrowser.
Ya sabes hartum, pal KDD'O'Matik
hartum
un mini huevo de pascua, cuando entreis al kddomatic y esteis viendo la lista de kdd'as añadir a la url -> ?f=4
y me decis que os parece
kedaria asi:
kddomatic.informaticplus.com/web/plantilla.php?f=4
KikeBesada
mola :), yo lo dejaria asi, mas practico la verdad, o poner opcion de que elija cada uno la plantilla que quiera. es posible? o mu complicao, lo dice uno que controla casi na de eso !
txuma Plus
Me gusta, si señor, queda muy bien....
orange
Ivan, te he corregido la url que ponias porque daba un un 404, se te había olvidado poner el .php a la página.
A mi me mola mucho más desplegable, así las ves todas de golpe
XD