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
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

Poser une question


en génnéral, ce genre de gag c'est IE qui me les fait
pas ni rien trouvé de plus compliqué comme noms ?
Probablement, un pb de display ?
Le z-index : je n'ai jamais vu ça fonctionner.
Boudiou ! si c'est bien rangé on n'a pas à y toucher et même pas y faire
allusion dans les css.
s'il est relative : top et left n'ont aucun sens pour lui
et pourquoi ce z-index ?
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';
}
}
pourquoi tout d'un coup jouer du setAttribute ?
--
Stephane Moriaux et son [moins] vieux Mac
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.
Moi aussi. Sauf là......
Moi si, pour les calques coulissant. Il faut en avoir un plus haut que
l'autre.
effectivement, cela me semblait OK ! Mais mon Firefox me fait un refus
d'obstacle.....
pour un besoin annexe: le content coulisse dans le container, le tout a
l'interieur du calque qui apparait ou non.
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.....
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
Oui, bon, je m'a encore gourré :-(
J'étais pourtant bien certain.
Merci du rappel.
--
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>
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