soucis de Div hidden qui gene les truc dessous sous firefox

Bonjour !

Je suis en train de galerer beaucoup sur un script permettant d'afficher ou
de vacher un div avec des liens dedans. Le seul soucis est que quand je le
cache, les elements en dessous qui reaparaissent (ceux qui etaient caché
par le div) sont alors inclickable sous firefox ; je les vois, mais je ne
peux pas clicker dessus. Sous IE, pas de Pb.

en génnéral, ce genre de gag c'est IE qui me les fait

Il s'agit de textes et d'images
qui devraient etre clickable, qui l'etaient avant, ont ensuite été caché par
le div internDivManufacturer (qui contient le divContainerManufacturer dans
lequel coulisse le divContentManufacturer).

pas ni rien trouvé de plus compliqué comme noms ?

Normalement, cacher le DIV initial (celui qui contient tous les autres)
devrait etre suffisant. J'ai meme tenter de jouer à la fois avec le dsiplay
et la visibility, pour le premier ou les trois, etc.... A chaque fois, ok
sous IE, inclickable sous firefox. A s'arracher les cheveux.

Probablement, un pb de display ?
Le z-index : je n'ai jamais vu ça fonctionner.

Quelqu'un a été confronté à ce genre de soucis ? Il faut en passer par gerer
les z-index de tous les elements ?

Boudiou ! si c'est bien rangé on n'a pas à y toucher et même pas y faire
allusion dans les css.

#divContainerManufacturer {
LEFT: 5px;
TOP: 0px;
HEIGHT: 180px;
WIDTH: 180px;
OVERFLOW: hidden;
CLIP: rect(0px 180px 90px 0px);
POSITION: relative;

s'il est relative : top et left n'ont aucun sens pour lui

z-index:1;
}

#divContentManufacturer {
LEFT: 0px;
POSITION: absolute;
TOP: 0px;
z-index:2;

et pourquoi ce z-index ?

}


Je les affiche avec un appel à :
if (!(layerDivManufacturer = findObj('internDivManufacturer'))) return;
if (!(layerContentManufacturer = findObj('divContentManufacturer')))
return;

kesssek'c'est qu'c'bazard ,

on peut pas s'en occuper directement?

function $(x) { return document.getElementById(x)}

function hiddeManufacture() {
if($(DivManufacturer)) {
$(DivManufacturer).style.visibility = 'hidden';
$(ContentManufacturer).style.visibility = 'hidden';
$(ContainerManufacturer.style.visibility = 'hidden';
$(DivManufacturer).style.display = 'none';
$(ContentManufacturer).style.display = 'none';
$(ContainerManufacturer.style.display = 'none';
}
}

layerDivManufacturer.setAttribute("display", 'none');
layerContentManufacturer.setAttribute("display", 'none');
layerContainerManufacturer.setAttribute("display", 'none');

pourquoi tout d'un coup jouer du setAttribute ?


--
Stephane Moriaux et son [moins] vieux Mac

#divContainerManufacturer {
LEFT: 5px;
TOP: 0px;
HEIGHT: 180px;
WIDTH: 180px;
OVERFLOW: hidden;
CLIP: rect(0px 180px 90px 0px);
POSITION: relative;

s'il est relative : top et left n'ont aucun sens pour lui

Hum ! Allez, un petit rappel, CSS2 dit :
<blockquote cite="http://www.yoyodesign.org/doc/w3c/css2/cover.html">
Une fois que l'emplacement d'une boîte a été déterminé, selon les modèles de
flux normal ou flottant, cette boîte peut être déplacée relativement à celui-ci.
C'est ce qu'on appelle le positionnement relatif.
[...]
Un élément génère une boîte en position relative quand la valeur de sa propriété
'position' est 'relative'. Le décalage de celle-ci est spécifié par les
propriétés 'top', 'bottom', 'left' et 'right'.
</blockquote>

--
Y.D.

Salut ASM !

Je suis en train de galerer beaucoup sur un script permettant d'afficher
ou de vacher un div avec des liens dedans. Le seul soucis est que quand
je le cache, les elements en dessous qui reaparaissent (ceux qui etaient
caché par le div) sont alors inclickable sous firefox ; je les vois, mais
je ne peux pas clicker dessus. Sous IE, pas de Pb.
en génnéral, ce genre de gag c'est IE qui me les fait

Moi aussi. Sauf là......

Normalement, cacher le DIV initial (celui qui contient tous les autres)
devrait etre suffisant. J'ai meme tenter de jouer à la fois avec le
dsiplay et la visibility, pour le premier ou les trois, etc.... A chaque
fois, ok sous IE, inclickable sous firefox. A s'arracher les cheveux.
Probablement, un pb de display ?

Le z-index : je n'ai jamais vu ça fonctionner.

Moi si, pour les calques coulissant. Il faut en avoir un plus haut que
l'autre.

Quelqu'un a été confronté à ce genre de soucis ? Il faut en passer par
gerer les z-index de tous les elements ?
Boudiou ! si c'est bien rangé on n'a pas à y toucher et même pas y faire

allusion dans les css.

effectivement, cela me semblait OK ! Mais mon Firefox me fait un refus
d'obstacle.....

#divContentManufacturer {
LEFT: 0px;
POSITION: absolute;
TOP: 0px;
z-index:2;
et pourquoi ce z-index ?

pour un besoin annexe: le content coulisse dans le container, le tout a
l'interieur du calque qui apparait ou non.

Je les affiche avec un appel à :
if (!(layerDivManufacturer = findObj('internDivManufacturer'))) return;
if (!(layerContentManufacturer = findObj('divContentManufacturer')))
return;
kesssek'c'est qu'c'bazard ,

on peut pas s'en occuper directement?

si, mais si y a un pb (genre un nom de div pas bon, etc) alors je sors.
C'etait ca ou faire un try/catch.....

layerDivManufacturer.setAttribute("display", 'none');
layerContentManufacturer.setAttribute("display", 'none');
layerContainerManufacturer.setAttribute("display", 'none');

pourquoi tout d'un coup jouer du setAttribute ?

pour essayer un truc en desepoir de cause. Truc qui n'a pas marché, ceci
dit....

Je continue a chercher, ca marche toujours pas. Si qulqu'un a une idée...

Merci a toi de ton message !

Stef

#divContainerManufacturer {
LEFT: 5px;
TOP: 0px;
POSITION: relative;

s'il est relative : top et left n'ont aucun sens pour lui

Hum ! Allez, un petit rappel,

Oui, bon, je m'a encore gourré :-(
J'étais pourtant bien certain.

Merci du rappel.


--
Stephane Moriaux et son [moins] vieux Mac

Salut ASM !

Le z-index : je n'ai jamais vu ça fonctionner.

Moi si, pour les calques coulissant. Il faut en avoir un plus haut que
l'autre.

normalement, s'ils sont déclarés dans le bon ordre ça se fait tout seul.
<div id="layerContainerManufacturer">
<div id="layerContentManufacturer">
<div id="layerDivManufacturer">
</div></div></div>

J'ai l'impression que tu as un menu très très compliqué
avec calques glissants, clipés (et j'espère fadding aussi ? :-) )

à ta place je me simplifierais l'bazard en ne faisant coulisser que le
background. (si compatible avec ce que voulu in fine)
ça devrait au moins faire un calque de moins.

J'ai essayé ça avec FireFox :

<style type="text/css" media="all">
ul, li { display: block; list-style: none; height:180px;
padding:0; margin:0; }
li { background: white; width: 180px;}
li a { display: block; text-decoration:none; color:white; height: 180px;
background: url(asm2.gif) no-repeat -180px top white;
line-height: 180px; font-size: 200%;}
#menu { position: absolute; width:100%; display: none;}
#menu li { float: left; margin: 0 3px; }
</style>
<script type="text/javascript">
function glisse(quoi) {
i=0;
glisser(quoi,i);
}
function glisser (quoi,i) {
if(i<180)
quoi.style.backgroundPosition = (-180+i)+'px top';
i++;
setTimeout(function(){glisser(quoi,i)},50);
}
function toulbazar(id) {
var D = document.getElementById(id);
var M = D.getElementsByTagName('li');
D.style.display = D.style.display==''? 'block' : '';
if(D.style.display=='block')
for(var k=0;k<M.length;k++)
glisse(M[k].getElementsByTagName('a')[0]);
}
//-->
</script></head><body>
<h1 style="position:relative;top:100px;border:1px solid blue;">test
<a href="#" onclick="toulbazar('menu');return false;">menu</a></h1>
<p><a href="#" onclick="toulbazar('menu');return false;">menu</a>
<ul id="menu">
<li><a href="truc.htm">truc</a></li>
<li><a href="chose.htm">chose</a></li>
<li><a href="machin.htm">machin</a></li>
</ul>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<a href="#" onclick="toulbazar('menu');return false;">menu</a>
Sed purus pede, consequat a, mattis non, luctus id, eros. Donec sapien.
Mauris pretium. Sed nonummy magna. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam urna risus, placerat vulputate,
adipiscing posuere, consequat vel, ante. Fusce elementum laoreet ligula.
Aenean venenatis malesuada orci. Suspendisse purus ipsum, ultricies
sagittis, elementum posuere, convallis ac, nunc. Ut imperdiet ipsum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at urna
in arcu posuere rutrum. Aliquam erat volutpat. Donec nunc. In vitae
quam. Etiam elit. Ut aliquet bibendum sem.
</p>
</div>
</body>


--
Stephane Moriaux et son [moins] vieux Mac

normalement, s'ils sont déclarés dans le bon ordre ça se fait tout seul.
<div id="layerContainerManufacturer">
<div id="layerContentManufacturer">
<div id="layerDivManufacturer">
</div></div></div>

presque:
<div id="layerDivManufacturer">
<div id="layerContainerManufacturer">
<div id="layerContentManufacturer">
asdfgdfhfgh

</div></div></div>

plus des boutons haut bas pour le scroll, toujours dans le
layerDivManufacturer

et j'affiche ou non le layerDivManufacturer [visible ou hidden]

ca devait rouler tout seul, mais non.

J'ai l'impression que tu as un menu très très compliqué
avec calques glissants, clipés (et j'espère fadding aussi ? :-) )

Yep ! a part que je vois pas pour le fadding. Je ferais une recherche ce
soir dessus. [si ca se trouve oui, mais je me souviens plus de mes functions
javascript en detail vue que j'utilise toujours les meme depuis des
annees...]

à ta place je me simplifierais l'bazard en ne faisant coulisser que le
background. (si compatible avec ce que voulu in fine)
ça devrait au moins faire un calque de moins.
J'ai essayé ça avec FireFox :

<style type="text/css" media="all">
ul, li { display: block; list-style: none; height:180px;
padding:0; margin:0; }
li { background: white; width: 180px;}
li a { display: block; text-decoration:none; color:white; height: 180px;
background: url(asm2.gif) no-repeat -180px top white;
line-height: 180px; font-size: 200%;}
#menu { position: absolute; width:100%; display: none;}
#menu li { float: left; margin: 0 3px; }
</style>
<script type="text/javascript">
function glisse(quoi) {
i=0;
glisser(quoi,i);
}
function glisser (quoi,i) {
if(i<180)
quoi.style.backgroundPosition = (-180+i)+'px top';
i++;
setTimeout(function(){glisser(quoi,i)},50);
}
function toulbazar(id) {
var D = document.getElementById(id);
var M = D.getElementsByTagName('li');
D.style.display = D.style.display==''? 'block' : '';
if(D.style.display=='block')
for(var k=0;k<M.length;k++)
glisse(M[k].getElementsByTagName('a')[0]);
}
//-->
</script></head><body>
<h1 style="position:relative;top:100px;border:1px solid blue;">test
<a href="#" onclick="toulbazar('menu');return false;">menu</a></h1>
<p><a href="#" onclick="toulbazar('menu');return false;">menu</a>
<ul id="menu">
<li><a href="truc.htm">truc</a></li>
<li><a href="chose.htm">chose</a></li>
<li><a href="machin.htm">machin</a></li>
</ul>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<a href="#" onclick="toulbazar('menu');return false;">menu</a>
Sed purus pede, consequat a, mattis non, luctus id, eros. Donec sapien.
Mauris pretium. Sed nonummy magna. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam urna risus, placerat vulputate,
adipiscing posuere, consequat vel, ante. Fusce elementum laoreet ligula.
Aenean venenatis malesuada orci. Suspendisse purus ipsum, ultricies
sagittis, elementum posuere, convallis ac, nunc. Ut imperdiet ipsum. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at urna in arcu
posuere rutrum. Aliquam erat volutpat. Donec nunc. In vitae quam. Etiam
elit. Ut aliquet bibendum sem.
</p>
</div>
</body>

ok, je tente ce soir. Merci du tuyau.

N'empeche, je vois pas pourquoi un truc qui va en hidden empeche les boutons
en dessous de se faire clicker apres avoit ete masqué, et ce QUE sous
firefox....

@++

Stef

N'empeche, je vois pas pourquoi un truc qui va en hidden empeche les boutons
en dessous de se faire clicker apres avoit ete masqué, et ce QUE sous
firefox....

faudrait tt de même regarder ce que te dit la console JavaScript de Fx
Autant c'est une bête fôte de css (que IE ne verrait même pô!)

--
Stephane Moriaux et son [moins] vieux Mac

N'empeche, je vois pas pourquoi un truc qui va en hidden empeche les
boutons
en dessous de se faire clicker apres avoit ete masqué, et ce QUE sous
firefox....

faudrait tt de même regarder ce que te dit la console JavaScript de Fx
Autant c'est une bête fôte de css (que IE ne verrait même pô!)

Elle ne dit rien du tout..... Pour elle tout est bon.....