begin process at 2010 02 10 17:33:28
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Une boite flotante capricieuse


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Une boite flotante capricieuse

mercredi 5 mars 2008 à 23:32:48 | Une boite flotante capricieuse

Nathbest

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:


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


<body>

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

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


document.write('<h4><a href="aide.php" onClick="popUp(this.href,\'fixed\',\'center\',\'center\',\'650\',\'550\');return false;">Besoin d\'aide !</a></h4>');


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


</body>



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
jeudi 6 mars 2008 à 09:41:40 | Re : Une boite flotante capricieuse

nickadele

Membre Club Administrateur CodeS-SourceS
Bonjour,

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

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
jeudi 6 mars 2008 à 09:57:14 | Re : Une boite flotante capricieuse

bultez

Membre Club


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 le Debogger IE |
|--------|----------------------------------------------------------|
|K-Meleon|regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
|--------|----------------------------------------------------------|
|Opera |regarder la "console d'erreurs" |
| | Outils / Avancé / Console 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/> |
!--------!----------------------------------------------------------!



                Cordialement            Bul         [mon Site]     [M'écrire]
jeudi 6 mars 2008 à 22:54:11 | Re : Une boite flotante capricieuse

Nathbest

Bon nickadele et 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.

vendredi 7 mars 2008 à 12:49:02 | Re : Une boite flotante capricieuse

PetoleTeam

Membre Club
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 <BODY>
...toutes les remarques faites ci avant restant valables...
;O)


Cette discussion est classée dans : internet, boite, document, left, if


Répondre à ce message

Sujets en rapport avec ce message

Pb avec Firefox et DOCTYPE strict [ par nico03 ] Bonjour, J'ai créé une page web sous DOCTYPE strict XHTML 1.0 permettant d'afficher un texte défilant. Ce texte reprend les titres des news de la pa Problème avec FF / DOCTYPE [ par nico03 ] Bonjour, J'ai créé une page web (DOCTYPE XHTML 1.0 strict) avec un bloc qui afficher un texte défilant. Ce texte reprend les titres des news de la pa Vérifier que des bouton radio soit coché ! [ par hAdEsS ] Bonjour à tous,j'essai de vérifier la validité de mes boutons radios.Mon soucis est que mon formulaire est dynamique et le nom de mes boutons radios p très lent [ par metaleurop ] Bonjour à tous!!J'ai un script sympa pour des élèves mais malheureusement il est super long à tourner ,quand il ne bugge pas!Serait-il possible de le Script Automne [ par potaba ] Bonjour !!!!      J'ai trouvé une superbe script en rapport avec l'automne pour mon forum mais il n'est que compatible avec Internet explorer Est-ce q Problème avec le Script: IMAGE QUI CHANGE AU SURVOL DE LA SOURIS image ... [ par xp3d ] Bon soir à tous,Il y a un Scipt en bas de cette page http://www.smkdgg.com/Filme.html "le code des deux boutons qui se mette en rouge disque on les su Probleme message d'erreur activeX [ par pampapic ] Bonjour à tous,Je suis loin d'être un pro de la programmation, en fait je suis infographiste 3d, néanmoins je me plonge dans le html pour confectionne Problème d'opacité... [ par nicomilville ] Salut,J'utilise la propriété de petoleTeam pour avoir une même opacité sur tout les navigateurs...J'ai un div qui grise la page et qui a une opacié de meilleur moyen d'afficher l'heure [ par Bastian60 ] Bonjour,Voici un script que j'ai récupéré :var dayarray=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");var montharray=ne Javascript pour Firefox : Rechercher et Remplacer un Mot dans une Page Web [ par Grobabar ] Bonjour !J'ai un code Javascript permettant à IE de Rechercher un Mot dans une Page Web.Cependant, mon code ne fonctionne pas sous firefox : le bouton


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,328 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales