Afficher/cacher un div (Résultat : Div vide) [Résolu]

Signaler
Messages postés
2
Date d'inscription
mardi 24 juin 2003
Statut
Membre
Dernière intervention
24 novembre 2006
-
tetejaune
Messages postés
2
Date d'inscription
mardi 24 juin 2003
Statut
Membre
Dernière intervention
24 novembre 2006
-
Bonjour,

Nouveau sur ce forum je viens à vous pour vous demander votre aide.

J'ai un code "simple" pour afficher/cacher un div en cliquant sur un lien.

Ce code marche très bien sous Firefox et partiellement sur IE.

Sous IE, le div s'affiche bien mais la table qui est à l'interieur (et donc le texte) ne s'affiche pas.

Sous Firefox, il n'y a aucun soucis.

Voila le code :

<html>
<title>Toto</title>
<style type="text/css" media="all">
<!--
.cachediv{
    visibility: hidden;
    overflow: hidden;
    height: 1px;
    margin-top: -1px;
    position: absolute;
}
-->
</style>
<script type="text/javascript">
function DivStatus(divID){
    // Pour les navigateurs récents
    if ( document.getElementById && document.getElementById( divID ) ){
        Pdiv = document.getElementById( divID );
        PcH = true;
    }
    // Pour les veilles versions
    else if ( document.all && document.all[ divID ] ){
        Pdiv = document.all[ divID ];
        PcH = true;
    }
    // Pour les très veilles versions
    else if ( document.layers && document.layers[ divID ] ){
        Pdiv = document.layers[ divID ];
        PcH = true;
    }
    else{
        PcH = false;
    }
    if ( PcH ){
        if(Pdiv.className == 'cachediv'){
            Pdiv.className = '';
        }else{
            Pdiv.className = 'cachediv';
        }
    }
}
</script>

            ----

                            x
                &nbsp;&nbsp;Afficher/Cacher le Div
           ,
       
   

   

                    ----
Texte
Texte
Texte,
            ----
Lien
Lien
Lien,
       

   

</html>


Voila, j'espere que ca ira.

Je pense pas qu'il y ait grand chose mais ca ne marche pas... 

Par avance, merci de votre aide.
tete jaune

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
12
 
 
 Bonjour...

pour une compatibilité tous navigateurs essaies cela...

<html>
<title>Toto</title>
<script type="text/javascript">
//-----------------------
function DivStatus( div_){
  var Obj = document.getElementById( div_);
  if( Obj.style.visibility=="hidden"){
    Obj.style.visibility ="visible";
  }
  else{
    Obj.style.visibility="hidden";
  }
}

</script>

      ----

              x
        &nbsp;&nbsp;Afficher/Cacher le Div
     ,
   
 

 
visibility:hidden;">
          ----
Texte
Texte
Texte,
      ----
Lien
Lien
Lien,
   

 

</html>

On joue avec la propriété style.visibility qui passe de hidden à visible

;0)
Messages postés
2
Date d'inscription
mardi 24 juin 2003
Statut
Membre
Dernière intervention
24 novembre 2006

Merci pour ces solutions.
Sur un autre forum j'ai eu également une réponse qui est :
(je la livre si ca intéresse des personnes)

Ajouter une classe CSS :
.voitdivIE {
zoom:1;/* ou une valeur conferant le layout */
}

Et modifier une partie de la fonction JS :

if ( PcH ){
if(Pdiv.className == 'cachediv'){
Pdiv.className = 'voitdivIE'; /* ICI ! */
}else{
Pdiv.className = 'cachediv';
}
}

Le résultat est satisfaisant également.
Merci à tous pour m'avoir aidé.
tete jaune
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
30
Bonjour,

dans le 
      .cachediv{ visibility: hidden; overflow: hidden; 
                        height: 1px; margin-top: -1px; position: absolute;  }
ne plait pas. si on supprime c'est ok .
pourquoi ne pas utiliser directement .style.visibility= "hidden" ou "visible"  ?

<hr />
                              Cordialement             Bul       [
mon Site
]    [
=Bul
M'écrire

]
<hr />