Cacher/Montrer [Résolu]

Signaler
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010
-
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
-
Bonjour, je viens vous voir car j'aimerai ajouter a mon site la possibilité de cacher ou de montrer une partie de l'écran.
Je voudrais avoir le même résultat que sur ce site lorsque l'on click sur la croix pour montrer et un click sur un trait pour cacher.
Quelqu'un pourrait me donner une piste ?

Merci bien

13 réponses

Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

j'ai trouver ce que je cherchais :

     <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function Suite(lien,affiche){

    var objet = document.getElementById(affiche); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
   
    if(objet.style.display == "none" || !objet.style.display){
       
        objet.style.display = "block";
        objet.style.overflow = "hidden";
        lien.innerHTML = "";
      
        var hFinal      =     200;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     0;         //Hauteur initiale (la hauteur dès le début !)
      
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
               
                objet.style.height     =     hActuel      +     'px';
               
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();

       
        timer = setInterval(fct,40);    //Toute les 40 ms
       
    }else if(objet.style.display == "block"){
       
        var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     200;         //Hauteur initiale (la hauteur dès le début !)
      
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
               
                objet.style.height     =     hActuel      +     'px';
               
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                        objet.style.display     =   "none";
                }
        };
        fct();

       
        timer = setInterval(fct,40);    //Toute les 40 ms
       

        lien.innerHTML = "";
       
    }
}
</script>

et dans le body :

        ----

                            <script>var popup1="popup1";</script>
                   
           ,
                            Recherche Développement :
           ,
            </td>
       
        ----

                           

               

           ,
       
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Il faut t'inspirer du principe
exemple
<html>
<head>
<style type= "text/css">
body {
  font-size : 13px;
  font-family : Verdana;
}
#D_MAIN {
  background-color : #bbccef;
  border : 1px solid blue;
  width :210px;
}
#D_1 {
  background-color : #ffffff;
  border : 1px solid blue;
  width : 200px;
  margin : 2px;

}
</style>
<script type="text/javascript">
//-----------------
function Swap( id_){
  var Obj = document.getElementById( id_);
  if( Obj){
    if( Obj.style.display == "none")
    Obj.style.display = ""
  else
    Obj.style.display = "none";
  }
}
</script>
</head>

Cache

Ligne 1

Ligne 2

Ligne 3

</html>
...
;O)
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

correction de mon script :

J'ai réussi a corriger l'erreur sous IE7 :

il faut modifier :


dans la deuxième fonctio ftc :

if( hActuel > hFinal) par

if( hActuel == 20) puis enlever le code :

objet.style.overflow = 'inherit';


voila. marche sur IE toute version confondu, Mozilla, Opera .... ...
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

merci, j'avai vu cette solution. :-)
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

Mais j'aurais aimer trouver exactement la même chose que sur ce site.sa aurait été vraiment super !!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Croisement mais si ça baigne tant mieux...
;O)
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

merci pour ton script. Mais le problème c'est qu'il ne marche pas sous IE 7 ... sniff sniff. dommage.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Je n'ai pas IE7,
je viens de me rendre compte qu'il manque un
pour fermer
avant la balise , peut être est cela ?
;O)
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

le tien est bon avec le div sous IE 7 mais l'autre que j'ai trouver qui provient de toi aussi, (je crois) ne marche pas sous IE 7. dommage car il était pas mal !!!
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

 ,
FireFox : Toutes versions,

----

 ,
Mozilla : 1 et +,

----

 ,
Netscape Navigator : 6 et +,

----

 ,
Internet Explorer : 5 et +
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008

Stp si tu veux mettre par exemple trois boites (caché et montrés), tu fais comment? 

Info
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008

Désolé j'ai pas précisé je parle du script de keket:


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function Suite(lien,affiche){

    var objet = document.getElementById(affiche); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
   
    if(objet.style.display == "none" || !objet.style.display){
       
        objet.style.display = "block";
        objet.style.overflow = "hidden";
        lien.innerHTML = "";
      
        var hFinal      =     200;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     0;         //Hauteur initiale (la hauteur dès le début !)
      
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
               
                objet.style.height     =     hActuel      +     'px';
               
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();

       
        timer = setInterval(fct,40);    //Toute les 40 ms
       
    }else if(objet.style.display == "block"){
       
        var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     200;         //Hauteur initiale (la hauteur dès le début !)
      
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
               
                objet.style.height     =     hActuel      +     'px';
               
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                        objet.style.display     =   "none";
                }
        };
        fct();

       
        timer = setInterval(fct,40);    //Toute les 40 ms
       

        lien.innerHTML = "";
       
    }
}
</script>

et dans le body :

        ----

                            <script>var popup1="popup1";</script>
                   
           ,
                            Recherche Développement :
           ,
            </td>
       
        ----

                           

               

           ,
       

Info