Problème lors de l'affichage de div sous IE7 [Résolu]

Signaler
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008
-
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008
-
Bonjour,

Le problème a déjà été évoqué mais malgré la lecture des postes et tutos sur internet, je ne suis pas parvenu a résoudre le problème:

J'ai une fonction qui me permet d'ouvrir et de fermer des divs. Je l'utilise pour hiérarchiser un menu (contenant des liens).
Cela fonctionne très bien sous Firefox mais sous Ie, la div s'ouvre mais le contenu de la div ne s'affiche pas...

L'ouverture est obtenue par un changement de class css

Voici le lien vers le site: http://archersermont.e3b.org

et les codes utilisés:

le CSS
.cachediv {
    position:relative;
    display: none;
    width:0px;
    height:0px;
    left:25px;
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bordDiv{
    position:relative;
    display:block;
    left:20px;
    color:#0000FF;
    text-align: center;
    border-width: 0px;
    z-index : 1;
}

Le JS
function DivStatus( nom )
        {
            if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {
                    Pdiv = document.getElementById( nom );
                    PcH = true;
                 }
            else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {
                    Pdiv = document.all[ nom ];
                    PcH = true;
                }
            else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {
                    Pdiv = document.layers[ nom ];
                    PcH = true;
                }
            else
                {
                    PcH = false;
                }
            if ( PcH )
                {
                    if(Pdiv.className=='cachediv')
                        Pdiv.className = 'bordDiv';
                    else
                        Pdiv.className = 'cachediv';
                }
        }

et un exemple de html:
    [javascript:; Vie de la compagnie]

   

        [./index.php?localisation=travaux évènements]

        concours

   

Je pense que la faute est au javascript mais je ne connais pas assez pour en être certain.
Si quelqu'un a une idée.

Merci d'avance.

15 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et pourant, en ne modifiant que cela
sur ce que tu nous donnes.... ben ça baigne !


<style>
.cachediv {
position:relative;
display: none;
width:0px;
height:0px;
left:25px;
color:#000000;
text-align: center;
border-width: 0px;
}
.bordDiv{
position:relative;
display:block;
left:20px;
color:#0000FF;
text-align: center;
border-width: 0px;
z-index : 1;
}
</style>
<script>
function DivStatus( nom )
{ if ( document.getElementById && document.getElementById( nom ) )
{ Pdiv = document.getElementById( nom );
PcH = true;
}
else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
{ Pdiv = document.all[ nom ];
PcH = true;
}
else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
{ Pdiv = document.layers[ nom ];
PcH = true;
}
else
{ PcH = false; }
if ( PcH )
{ if(Pdiv.className=='cachediv')
Pdiv.className = 'bordDiv';
else
Pdiv.className = 'cachediv';
}
}
</script>
[javascript:void(DivStatus('vie')); Vie de la compagnie]




[./index.php?localisation=travaux évènements]

concours






donc... tu appliques pas tout à fait comme il faut ?
on n'a pas tout ?



@+
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
quelques explications...

  [; Vie de la compagnie]

que se passe-til ( valda ) ?
on exécute la fonction DivStatus; puis on affiche la page dans le href
; déjà ça doit pas lui plaire.
# à la limite, mais ça rechargerait la page, donc remettrait le div comme à l'origine
il faudrait mettre un return false à la fin du onclick

perso je n'aime pas trop ajouter un évênement là où il y
a quelque chose de prévu pour.... pourquoi un onclick
dans une balsise M'écrire], <!--
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et alors ?
si on ajoute un css ( parce que le tien, on ne l'a pas )

le div "administratif" est bien modifié en conséquence...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
         <style>
            .cachediv       {    background-color:red;    }
            .bordDiv        {    background-color:blue;    }
         </style>
        <meta name="robots" content="follow,index" />
        <meta name="Identifier-URL" content="http://archersermont.e3b.org/" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
            function DivStatus( nom )
            {   if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {   Pdiv = document.getElementById( nom );
                    PcH = true;
                }
                else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {   Pdiv = document.all[ nom ];
                    PcH = true;
                }
                else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {   Pdiv = document.layers[ nom ];
                    PcH = true;
                }
                else
                {  PcH = false; }
                if ( PcH )
                {   if(    Pdiv.className=='cachediv')
                        {    Pdiv.className = 'bordDiv';    }
                    else
                        Pdiv.className = 'cachediv';
                }
            }
        </script>
    </head>
   
       

           

                [./index.php?localisation=acceuil accueil]

                [javascript:void(DivStatus('vie')); Vie de la compagnie]

               

                    [./index.php?localisation=travaux évènements]

                    concours

                    photos

                    forum

               

                [javascript:void(DivStatus(' administratif ')); administratif]

               

                    [./index.php?localisation =tarifs horaires et tarifs]

                    [./index.php?localisation=bureau bureau]

                   
class="cachediv">
                        [./administration.php administration]

                        [index.php?localisation=profile modifier son profile]

                        [index.php?localisation=info Recherche d'informations]

                   

               

           

       
  
   
</html>

bien entendu pas le div "gestion" inclucs, puisqu'il a lui aussi sa class.
si tu veux le cacher en même temps, _ fais le explicitement _ enlêve sa class
_enlêve la balise div

Cordialement   Bul  [mon Site] [M'écrire], <!--
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
Salut,

Essai ça :

            if ( PcH )
                {
                    if(Pdiv.className= ='cachediv')
                        Pdiv. style. className = 'bordDiv';
                    else
                        Pdiv.style.className = 'cachediv';
                }

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

Cela ne fonctionne pas. Je ne pense pas que le className soit une propriété du style car cela empêche le fonctionnement du script sous firefox (en fait il ne se passe rien du tout.).

Merci quand même pour la réponse et pour l'idée :D
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
118
bonjour
essayer de cette facon

function DivStatus( nom )
        {
           Pdiv = document.getElementById( nom );
                 
          if(Pdiv.className=='cachediv')
        
}


           Pdiv.className = 'bordDiv';
             else
            Pdiv.className = 'cachediv';
         }
        }


      au niveau de la compatibilite tu balayra au moin  97% des internaute a moins d'avoir une tres vieille version de netscape incompatible avec beaucoup de script au cause de la balise <layer> pour IE ca fait depuis au moins la version 5.5 quil supporte (
document.getElementById)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
bonjour,
sur le lien, comme souvent, j'ai eu du mal à voir quoi que ce soit !
mais j'ai regardé un ch'tiot peu ce qui est posté ici,
et perso, déjà je ferais :

    [javascript:void(DivStatus( 'vie' )); Vie de la compagnie]

( avec FF, ça pose aussi des problèmes sinon )

Cordialement        Bul   [mon Site]  [M'écrire], <!--
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

Je m'excuse pour le délai de réponse mais  je n'ai pas un accès internet permanent.

Merci pour vos réponses, mais le problème reste le même. (Kazma, tu as mis des accolades fermantes en trop)
[auteur/BULTEZ/51635.aspx bultez]: l'application de ce que tu propose n'as pas changé grand chose, d'ou ma question, le problème etait le onclick ou le contenu de ma balise href? (ou bien est-ce simplement plus proche de la norme?)

pour bien voir le problème, il se trouve au niveau du second et troisième bouton a gauche.

Si quelqu'un a une autre idée.
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

bultez:
1) Merci pour l'explication. en effet, il parait logique de ne déclencher qu'un seul évènement... et surtout d'utiliser celui qui est prévu! j'avoue que je n'avais pas réfléchie e cette façon a la question.
2) En effet, lorsque j'essaye le script seul, cela fonctionne correctement. mais lorsque je l'applique au site, (remplacement des deux classes css et application de la "règle" éxpliquée ci dessus) le problème reste le même. donc je dois m'y prendre mal mais je ne vois pas ou ... la div est la seul possédant un z-index donc elle devrais se trouver sur le dessus(il me semble) et lorsque j'essaie de selectionner la zone, le surlignage indique qu'il y a quelquechose mais impossible de les voirs ni de cliquer dessus.

Il ne me semble pas avoir omis quelque chose d'important lors de la rédaction de mon message originel mais pourtant cela doit être le cas ... mais quoi!

je n'ai peut être pas préciser que le code js était dans le fichier index.php qui appèle un fichier border.php (dans lequel se trouve le menu et la partie déroulante) et que le css est dans un fichier .css a part. Mais je ne pense pas que cela joue.

au besoin, si cela peut t'aider et que tu as le temps, je peux t'envoyer les fichiers concernés (tu aurais une vue d'ensemble et verrais peut être une erreur qui ne m'a pas sauter aux yeux...).

Cordialement.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et l'adresse du site ?    peut-être qu'en y regardant....
parce que ce sont les pages générées qu'il faut voir ! pas le php ...
mais le plus simple ( enfin, le miuex pour nous ), fait un extrait de la page générée
       qui ne fonctionne pas. le nécessaire et pas plus.
CordialementBul[mon Site][M'écrire], <!--
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

voici l'extrait de la page générée. j'ai laissé volontairement certaines des balises de l'entête car je ne sais pas exactement a quoi elles correspondent.
je note également que le css dont il est question contient les classes tels que tu les as proposés dans ton message.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <link href="./css/habillage.css" rel="stylesheet" type="text/css" />
        <meta name="robots" content="follow,index" />
        <meta name="Identifier-URL" content="http://archersermont.e3b.org/" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <script type="text/javascript">
            /*
            * Montre / Cache un div
            */
            function DivStatus( nom )
            {
                if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {
                    Pdiv = document.getElementById( nom );
                    PcH = true;
                }
                else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {
                    Pdiv = document.all[ nom ];
                    PcH = true;
                }
                else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {
                    Pdiv = document.layers[ nom ];
                    PcH = true;
                }
                else
                {
                    PcH = false;
                }
                if ( PcH )
                {
                    if(Pdiv.className=='cachediv')
                        Pdiv.className = 'bordDiv';
                    else
                        Pdiv.className = 'cachediv';
                }
            }
        </script>
    </head>
   
       

           

                [./index.php?localisation=acceuil accueil]

                [javascript:void(DivStatus('vie')); Vie de la compagnie]

               

                    [./index.php?localisation=travaux évènements]

                    concours

                    photos

                    forum

               

                [javascript:void(DivStatus('administratif')); administratif]

               

                    [./index.php?localisation=tarifs horaires et tarifs]

                    [./index.php?localisation=bureau bureau]

                   

                        [./administration.php administration]

                        [index.php?localisation=profile modifier son profile]

                        [index.php?localisation=info Recherche d'informations]

                   

               

           

       
   
   
</html>

je ne vois pas de problème mais c'est pour cela que je demande de l'aide ^^

merci.

Cordialement.
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

ainsi, le problème doit provenir du css ...
je donne donc les différentes classes utilisée dans cette partie du code...
(c'est vrais que sans, cela fonctionne très bien ...)

En ce qui concerne la seconde div (la div gestion) elle est sensée être affichée dans le cas ou l'utilisateur est connecté et n'as donc pas d'influence ici.

.border{
    background-color: #0000FF;
    position:absolute;
    left:0px;
    top:0px;
    width:150px;
    height:100%;
}
.bibi{
    background-color: #0000FF;
    position:absolute;
    left:0px;
    top:150px;
    width:150px;
}
.bord{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:15px;
    background-image: url(../images/bouton-lien.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.cachediv {
    position:relative;
    display: none;
    width:0px;
    height:0px;
    left:25px;
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bordDiv{
    position:relative;
    display:block;
    left:20px;
    color:#0000FF;
    text-align: center;
    border-width: 0px;
    z-index : 1;
}
.bord2{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:20px;
    background-image: url(../images/bouton-lien2.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bord3{
    position:relative;
    display: block;
    width:100px;
    height:40px;
    left:15px;
    background-image: url(../images/bouton-lien3.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bord4{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:0px;
    background-image: url(../images/bouton-lien4.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}

le problème viendrais donc de l'une des classes d'affichage des liens?

Cordialement
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
je me cite :
pas le div "gestion" inclus, puisqu'il a lui aussi sa class.
    si tu veux le cacher en même temps,
        _ fais le explicitement
        _ enlêve sa class
        _enlêve la balise div
        ...
Cordialement    Bul  [mon Site] [M'écrire] |
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,

Je ne pense pas que le problème vienne de la puisque lorsque je l'enlève cela ne change rien. (comme je l'ai dit, l'ouverture de ce div précisément est fait de facon explicite plus tard dans le code).
je n'ai pas encore eu le temps de faire de nouveaux essais et donnerais des nouvelles d'ici quelques jours.

Merci.

Cordialement.
Messages postés
10
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
8 septembre 2008

Bonjour,
J'ai résolu mon problème.
Pour cela j'ai simplement laisser une seule classe js et rajouté un attribut style="display:none" modifiée par la fonction js. (modification: style.display = block;)

cordialement