IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Faire apparaitre/disparaitre une div


Sujet :

JavaScript

  1. #1
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut Faire apparaitre/disparaitre une div
    Salut,

    j'ai ce code pour faire apparaitre/disparraitre une div :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script language="javascript">
    function hideShow(id_div)
        {
        var img = "image";
        img += id_div ;
        if (document.getElementById(id_div).style.display=='block')
            {
            document.getElementById(id_div).style.display='none'
            document.getElementById(img).src='down.png'
            }
        else
            {
            document.getElementById(id_div).style.display='block'
            document.getElementById(img).src='up.png'
            }    
        }
    </script>
     
    <a href="#"><img src="down.png" name="image1" border="0" id="image1" onClick="hideShow(1)"></a>
    <div id="1" style="display:none ">
    contenu
    </div>
    Ce code faire donc apparaitre/disparraitre "tout d'un coup", comment faire pour que ca fasse comme en cliquand sur le croix � c�t� de la publicit� a droite l� : http://www.dailymotion.com/fr/cluste...coup-de-mother

    Merci de votre aide

  2. #2
    Membre Expert
    Avatar de muad'dib
    Homme Profil pro
    D�veloppeur Java
    Inscrit en
    Janvier 2003
    Messages
    1 013
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 44
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activit� : D�veloppeur Java
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Janvier 2003
    Messages : 1 013
    Par d�faut
    Je n'ai aucune pub � droite.

  3. #3
    Membre Expert
    Homme Profil pro
    Architecte de syst�me d'information
    Inscrit en
    Juillet 2004
    Messages
    2 725
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 38
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activit� : Architecte de syst�me d'information

    Informations forums :
    Inscription : Juillet 2004
    Messages : 2 725
    Par d�faut
    Moi non plus, enfin j'ai AdBlock aussi :S

  4. #4
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    Pour red�finir le style par d�faut d'un �l�ment via l'object style, on utilise

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    element.style.my_property = '';
    De plus ton getter (la valeur retourn�e par element.style.my_property) par d�faut est vide

    Donc ta fonction ne marchera jamais

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/javascript">
    function $(el) {
    	return document.getElementById(el);
    }
     
    function toggle(id_div) {
    		var img = $("image"+id_div),
    			div = $(id_div),
    			hide = function() {;div.style.display='none';img.src='down.png'},
    			show = function() {div.style.display='';img.src='up.png'};
    			(div.style.display == '') ? hide() : show(); 
    }
    </script>
    Accesoirement, le mieux est de passer par des classes pour cacher et afficher tes �l�ments, en ajoutant une classe qui applique le display:none

  5. #5
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut
    Le code que je vous ai donn� marche tr�s bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.

  6. #6
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par d�faut
    marche pas chez moi ...

    mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacit� ...
    une petite recherche sur le forum te donnera les code crossbrowser pour l'opacit� (parceque l� il � pas l'air crossbrowser) j'en ai parl� il n'y a pas tr�s longtemps ...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  7. #7
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    Citation Envoy� par kevinf
    Le code que je vous ai donn� marche tr�s bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.
    Marche pas leur truc

    Essaye bytefx avec cette fonction :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    	function toggle(id_div) {
    			var img = $("image"+id_div),
    				div = $(id_div),
    				hide = function() {bytefx.fade(div , 100, 0, 2, function(){this.style.display='none'});img.src='down.png'},
    				show = function() {div.style.display='';bytefx.fade(div , 0, 100, 2, function(){});img.src='up.png'};
    				(div.style.display == '') ? hide() : show(); 
    }
    Ca devrait marcher
    Edit : La version "packer"

    Citation Envoy� par SpaceFrog
    marche pas chez moi ...

    mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacit� ...
    une petite recherche sur le forum te donnera les code crossbrowser pour l'opacit� (parceque l� il � pas l'air crossbrowser) j'en ai parl� il n'y a pas tr�s longtemps ...
    Non, setInterval est beaucoup trop lent pour ce genre d'effet.

  8. #8
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut
    En fait, c'est pas un effect d'opacit� que je veux. Le site � changer son effect entre temps (grrr).
    C'�tait en fait comme si le site remontait par dessus la pub lentement, et bien moi je voudrais faire parreil dans les 2 sens.

  9. #9
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par d�faut
    absolument pas ! j'ai d�ja fait des effets de fade avec setInterval !

    et au passage
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    element.bytefx.fade = setInterval(function(){
    tir� du code de bytefx

    la librairie utilise un setInterval ...

    Donc tu peux downloader un librairie compl�te pour n'utiliser que le fade ...
    ou faire ton fade toi m�me avec un setInterval ...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  10. #10
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    Citation Envoy� par kevinf
    En fait, c'est pas un effect d'opacit� que je veux. Le site � changer son effect entre temps (grrr).
    C'�tait en fait comme si le site remontait par dessus la pub lentement, et bien moi je voudrais faire parreil dans les 2 sens.
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    	function toggle(id_div) {
    			var img = $("image"+id_div),
    				div = $(id_div),
    				hide = function() {bytefx.size(div,{width:200,height:0},20,function(){this.style.display='none'});img.src='down.png'},
    				show = function() {div.style.display='';bytefx.size(div,{width:200,height:200},20,function(){});img.src='up.png'};
    				(div.style.display == '') ? hide() : show(); 
    	}
    Lis l'api, c'est une des meilleures, si ce n'est la meilleur lib pour les effets graphiques.

    @SpaceFrog : Mes essais avec SetInterval on toujours �t� plus lent qu'avec setTimeout. Autrement, vu la taille de la lib (3 ko) et sont efficacit�/simplicit� de syntaxe pourquoi r�inventer la roue?

  11. #11
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par d�faut
    je ne parle par de r�inventer la roue ... tout ce que je dis c'est que �a utilise setInterval !

    et niveau lib je pr�f�re prototype window beintot la doc en fran�ais sera disponible... tous les effets de scriptaculous son accessibles depuis le prototype window...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  12. #12
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    Citation Envoy� par SpaceFrog
    Donc tu peux downloader un librairie compl�te pour n'utiliser que le fade ...
    ou faire ton fade toi m�me avec un setInterval ...
    J'ai du mal comprendre

    Prototype window c'est aussi beaucoup plus lourd, dois-je rappeler que byte fx fais 3 ko.
    De plus se baser c'est la doc en Fran�ais pour developper c'est un sacr� probl�me, la majorit� du temps c'est mal traduit, et il vaudra mieux toujours connaitre l'anglais pour s'en sortir en programmation

  13. #13
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut
    Je croit que je d�lester, car je ne trouve pas ce que je veux.

  14. #14
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par d�faut
    le prototype window ne fait pas que l'effet fade... il est plus � la base pour g�rer les popups et alert (fausses popup).
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  15. #15
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    Je le sais pertinement, par contre le fait qu'il s'appuie sur prototype full est d�ja � mon sens un argument pour que j'�vite de l'utiliser en prod ext�rieure

  16. #16
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par d�faut
    sinon pour l'effet monter descendre ou droit gauche j'ai �galement coll� une paire de scripts sur le forum et dasn les contributions ...

    un truc comme �a ?
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
     
    <script type='text/javascript'>
     
    var y = 1;
    var step = 20;
    var down = true;
    var minstep=step;
    var running=false;
    var t
     
     
    function smooth_on_off(p_id, hmax){
      running=true;
      obj=document.getElementById(p_id);
     
      if(y>hmax&&down){step=-step;
                    down=false;
                    running=false;
                    clearInterval(t);
                    return false;}
      if(y<minstep&&!down){step=-step;
                    down=true;
                    running=false;
                    y=1;
                    clearInterval(t);
                    return false;}
     
      y = y+step;
     
      obj.style.height = y + 'px';
    }
     
    function deroule(p_id,hmax){
    if (running) {return false;}
    t=setInterval(function(){smooth_on_off(p_id,hmax)},1)
     
    }
    </script>
    <style type='text/css'>
    div.main{
      width: 700px;
     
      background: #CCEEDD;
      font-weight: bold;
    }
     
    div.title{
      width: 700px;
      height: 30px;
      background: navy;
      color:white;
      font-weight: bold;
      font-size:14px;
      line-height:30px;
      cursor: pointer;
      padding-left:10px;
    }
     
    div.content{
      width: 700px;
      height: 1px;
      background: #FFEEFF;
      display: block;
      overflow: hidden;
      font-weight: normal;
      position:absolute;
      z-index:2;
      padding:10px;
      text-align:justify;
    }
    body {font-family:verdana;}
    </style>
    </head>
     
    <body onload="document.body.focus()">
     
    <div class="main">
     
      <div class="title" onclick="deroule('flop', 200);" >
    	Un petit texte
      </div>
     
      <div id="flop" class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
     
    Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
     
      </div>
     
    </div>
     
     
     
    </body>
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  17. #17
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut
    Oui, c'est exactement cela, mais pour que ca marche avec mon script.

  18. #18
    Membre �clair� Avatar de kevinf
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Juin 2005
    Messages
    863
    D�tails du profil
    Informations personnelles :
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Juin 2005
    Messages : 863
    Par d�faut
    Pourrait tu m'aider � l'adapter � mon script, car le tien marche avec du texte et moi avec des images donc je vois pas comment faire.

    Merci de ton aide

  19. #19