Une boite flotante capricieuse

Signaler
Messages postés
9
Date d'inscription
vendredi 4 octobre 2002
Statut
Membre
Dernière intervention
18 juillet 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour à tous, alors voici mon problème:

J'ai un système de boite flotante qui s'affiche à moitié caché sur la gauche, puis losque l'on passe la souris la boite glisse vers la droite pour s'afficher en entier, puis lorsque l'on clique à l'intérieur de la boite flotante, la boite se recache à moitié en repartant sur la gauche.

Donc premièrement, ce CODE, affiché plus bas, fonctionne parfaitement sur FireFox et Internet Explorer 7,
mais le problème est que une fois que j'y ajoute toute la déco de mon site (div, bloc, texte, etc...) bin ce système de boite ne fonctionne plus que sur Internet Explorer...
Firefox affiche bien la boite caché mais le système de glissade pour l'ouverture ne fonctionne pas, puis lorsque je clique sur la boite, la boite ne se referme pas!

Donc voilà mon CODE, je ne sais pas si c'est ma programmation qui est mauvaise mais bon, je compte sur vous...

Mon CODE:


<hr />
<head>

<style type="text/css" media="screen">

/* BLOC gauche menu déroulant */
#menuderoulant {
  background: url('image/boite.png') no-repeat top left;
  position:fixed;
  top:145px;
  width:160px;
  height:110px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 20px;
  padding-right: 30px;
  visibility: visible;
}

</style>

<script>
<!-- fonction Menu déroulant gauche -->

var netscape4=document.layers?1:0
var internet_explorer4=document.all?1:0
var netscape6=document.getElementById&&!document.all?1:0

var p=-135;

if (internet_explorer4||netscape6){
 document.getElementById("menuderoulant").style.left=p;
 }
  else {
 document.layers.menuderoulant.style.left=p;
 }

function h_open(){
    if (internet_explorer4||netscape6){
 document.getElementById("menuderoulant").style.left=p;
 }
 else {
 document.layers.menuderoulant.style.left=p;
 }
 if(p < 0) { p=p+5; setTimeout("h_open()",1); }
 }
 
function h_close(){
    if (internet_explorer4||netscape6){
 document.getElementById("menuderoulant").style.left=p;
 }
 else {
 document.layers.menuderoulant.style.left=p;
 }
 if(p > -135) { p=p-5; setTimeout("h_close()",1); }
 }

</script>

</head>

<!--  // Affichage Boite flotante sur la gauche    -->

<script>
if (internet_explorer4){
document.write('
');}
if (netscape6){
document.write('
');}
else {
document.write('<layer id="menuderoulant" style="left:'+p+'px;" onClick="h_close()" onMouseover="h_open()">');}

document.write('[aide.php Besoin d\'aide !]
');

if (internet_explorer4||netscape6){
document.write('
');}
else {
document.write('</layer>');}
</script>

<hr />
Et si vous avez d'autres systèmes de boite glissante ou autre que vous voulez que j'essaye, il n'y a pas de soucies.

Allez merci encore, saloute

4 réponses

Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,

je pense que ceci est plus correct :
....style.left=p +"px";

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    tel que tu nous donnes les choses....
   
..
var p= -135;
if (internet_explorer4||netscape6){
 document.getElementById("menuderoulant").style.left=p;

    est fait avant que menuderoulant ne soit créé !
    ça plante ( ie et ff )

 }
  else    ...

ensuite :
>>Donc premièrement, ce CODE, affiché plus bas, fonctionne parfaitement sur FireFox et Internet Explorer 7,
     à la restriction ci-dessus près non ?
>>mais
le problème est que une fois que j'y ajoute toute la déco de mon site
(div, bloc, texte, etc...)
>>bin ce système de boite ne fonctionne plus
que sur Internet Explorer...
    certes... mais nous on ne la pas ce que tu ajoutes !
    il y a donc probablement quelque chose qui perturbe FF !

    en l'état actuel, je ne peux que te dire :


¡————————¡——————————————————————————————————————————————————————————¡
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | |
| | et mieux, télécharger FireBug |
¦————————¦——————————————————————————————————————————————————————————¦
|Internet|activer le deboggage : Outils/options Internet/Avancés |
|Explorer| dans la liste, sous "Navigation" : décocher |
| | ° Afficher une notification de chaque erreur de script |
| | ° Désactiver le débogage de Scripts (Internet Explorer) |
| | |
| | et mieux, télécharger =2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en le Debogger IE |
¦————————¦——————————————————————————————————————————————————————————¦
|K—Meleon|regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Opera |regarder la "console d'erreurs" |
| | utils / Asole d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Safari |regarder Debug / Show JavaScript Console |
| | |
| |modif Fichier "Support:\Documents and Settings\utilisateur|
| |\Application Data\Apple Computer\Safari\Preferences.plist"|
| | y ajouter <key>IncludeDebugMenu</key> |
| | <true/> |
!————————!——————————————————————————————————————————————————————————!

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
9
Date d'inscription
vendredi 4 octobre 2002
Statut
Membre
Dernière intervention
18 juillet 2008

Bon [auteur/NICKADELE/13477.aspx nickadele] et [auteur/BULTEZ/51635.aspx bultez], merci, je viens d'effectuer les modifications:

-Alors j'ai d'abord supprimer cette partie si:

if (internet_explorer4||netscape6){
 document.getElementById("menuderoulant").style.left=p;
 }
  else {
 document.layers.menuderoulant.style.left=p;
 }

J'ai certainement du effectuer un copier/coller qui a mal pris, mais bon malgrès cette modification ça ne fonctionnait toujours pas.
Donc:

-J'ai effectué les modifications suivantes:

J'ai remplacé .style.left=p;  par  .style.left=p +"px";

Et puis là tout fonctionne à merveille.
Merci encore, ciao.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,

1/ Attention la position
fixed n'est pas prise en compte par IE < 7, encore très présent, peut être
lui préférer la position absolute...

2/ Beaucoup de référence à
NetScape 4, notion de layers, il te faut les supprimer pour
clarifier ton code...

3/ Il est également nécessaire de détruire le
Timeout en cours pour éviter des effets d' aller/retour hésitants sur des move
de la souris...

Ton script se résumerait à ceci
<script type= "text/javascript">
<!-- fonction Menu déroulant gauche -->
var p =-135;
var iTimer = null;
function h_open(){
clearTimeout( iTimer);
document.getElementById("menuderoulant").style.left = p +"px";
if(p < 0){
p=p+5;
iTimer = setTimeout("h_open()",1);
}
}
function h_close(){
clearTimeout( iTimer);
document.getElementById("menuderoulant").style.left = p +"px";
if(p > -135){
p=p-5;
iTimer = setTimeout("h_close()",1);
}
}
</script>

et
idem dans la partie
...toutes les remarques faites ci avant restant valables...
;O)