GNT sans publicité, site mobile, fonctionnalitées exclusives...

soucis de Div hidden qui gene les truc dessous sous firefox

Le
slambert
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. 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).

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.

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

Je les definis en CSS:
#divContainerManufacturer {
LEFT: 5px;
TOP: 0px;
HEIGHT: 180px;
WIDTH: 180px;
OVERFLOW: hidden;
CLIP: rect(0px 180px 90px 0px);
POSITION: relative;
z-index:1;
}

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


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

layerDivManufacturer.style.visibility = 'visible';
layerContentManufacturer.style.visibility = 'visible';

Je les cache avec un appel à:
function hideManufacturer()
{
if (!(layerDivManufacturer = findObj('internDivManufacturer'))) return;
if (!(layerContentManufacturer = findObj('divContentManufacturer')))
return;
if (!(layerContainerManufacturer =
findObj('divContainerManufacturer'))) return;

layerDivManufacturer.style.visibility = 'hidden';
layerContentManufacturer.style.visibility = 'hidden';
layerContainerManufacturer.style.visibility = 'hidden';
layerDivManufacturer.setAttribute("display", 'none');
layerContentManufacturer.setAttribute("display", 'none');
layerContainerManufacturer.setAttribute("display", 'none');
}


Merci d'avance !

@ ++

Stef
Lire les 8 réponses

Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
ASM
Le #621870
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

YD
Le #621869
#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 :
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.


slambert
Le #627658
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


ASM
Le #627656


#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



ASM
Le #627655
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 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">
</ul>
<div>
<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


Publicité
Suivre les réponses
Poster une réponse
Anonyme