ugrás a tartalomhoz

DOM - JS - TBODY - show/hide

zsepi · 2005. Jún. 14. (K), 18.04
Táblázatok tbody elemeit szeretném elrejteni/megmutatni, s Opera (7, 8) meg Firefox (1) alatt jól múködik, IE alatt pedig majdnem

a kód a kovetkező
/*
 * obj mindkét esetben egy node, ami egy tbody-ra mutat
 */
function hide(obj) {
	obj.style.visibility = 'hidden';
}

function show(obj) {
	obj.style.visibility = 'visible';
}
A gondom IE6 alatt annyi, hogy sajna ott marad helyfoglalónak a nem visible elemek is.
A következőkkel próbálkoztam, de egyik se jött be:
  • /* elrejtésnél */
position: absolute
/* megjelenítésnél */
position: relative

  • elrejtésnél
height: 0px
/* megjelenítésnél */
height: auto
  • /* elrejtésnél */
float: left;margin-left: -999999px
/* megjelenítésnél */
float: none; margin-left: 0px


De egyik sem működött. Ötletek, hogy lehetne ezeket a helyfoglaló blokkokat eltünetni?
‹ Furcsa div probléma firefoxban META.description lekérdezése ›
 ■
1

style.display

Jano · 2005. Jún. 14. (K), 18.09
Hmm. En kicsit csodalkozom ha Opera es Firefox alatt teljesen eltunik a dolog mintha ott se lenne mert a visibility elvileg csak a lathatosagot mondja meg.

Ami neked kell az a display. Ezt allitsad none es "" user string segitsegevel.
3

display

zsepi · 2005. Jún. 14. (K), 18.43
kösz, janó, ismerem a displayt, csak azt anno egyszer elmagyarázták nekem, hogy az a screenreader-eknek nem jó mert van amelyik értelmezi ezt, s azt nem fogja felolvasni, amit none-ra állítottam

a visibility-t azért használtam, hogy juzerfrendlibb legyek, s gondoltam melléteszem a position:absolute megoldást, és akkor kikerül az oldal normális folyásából, így az alatta levők feljebb csúsznak

ha nem találok más megoldást, akkor persze marad a display, de nem ezt szerettem volna használni (írhattam volna)
5

display

kgyt · 2005. Jún. 15. (Sze), 09.25
Épp most kisérleteztem vele.
A megoldás:

#ize {
  display: none;
}
@media aural {
  #ize {
    display: inline; /* vagy amit gondolsz */
  }
}
Külső fáljban is megoldható, de arra vigyázni kell, hogy ne add meg az aural médiát a link elemben, mivel a jaws nem kapja meg az internet explorertől az aural css-t!

<link rel="stylesheet" type="text/css" media="all" href="normal.css" />
<link rel="stylesheet" type="text/css" media="all" href="aural.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
stb...
normal.css

#ize {
  display: none;
}
aural.css

@media aural {
  #ize {
    display: inline; /* vagy amit gondolsz */
  }
}
--
Szeretettel: Károly György Tamás
kgyt&kgyt.hu - http://kgyt.hu
6

Kézenfekvő

Jano · 2005. Jún. 15. (Sze), 09.39
Tényleg ez a kézenfekvő megoldás. Kérdés: Ha a screen média típust adod meg a CSS linkelésnél akkor azt értelmezik a felolvasók?
7

Javítva a hozzászólás...

kgyt · 2005. Jún. 15. (Sze), 10.17
A screent értelmezik, mert képernyőolvasó is a cucc...

A link esetén azért nem kapja meg a media=aural attribútumú css-t, mert az Internet Explorer nem tölti azt le. Ezért a JAWS-nak sem adhatja át a fájlt.
A media=all esetén letölti a fájlt, de mivel a fájl egésze egy @media aural rule belsejében helyezkedik el, nem értelmezi azt. A JAWS megkapja a css fájlt, és feldolgozza.
(A média rule által közrefogott import sem töltödik le!)


--
Szeretettel: Károly György Tamás
kgyt&kgyt.hu - http://kgyt.hu
2

Valóban érdekes.

ada · 2005. Jún. 14. (K), 18.24
Valóban érdekes, mert ahol eddig én használtam, visibility hidden-re állítása esetén ott maradt a hely, az elem azonban eltűnt (FX és IE alatt is). Tudomásom szerint ennek így kell működnie.
4

kimaradt

zsepi · 2005. Jún. 14. (K), 18.47
ff és opera alatt azért tűntek el, mert az init script kimaradt

tb = document.getElementsByTagName('table');
if(tb.length != 1) return false;
t = tb.getElementsByTagName('tbody');
if(1 == t.length) return false;
var i = 0;
for(i = 0; i < t.length; i++) {
	t[i].style.position = 'absolute';
	t[i].style.top = t[0].offsetTop;
	hide(t[i]);
}
show(t[0]);
bocs, már nagyon fáradt