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

jQuery Discussion :

Faire slider tout le contenu d'un site..


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    57
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 57
    Par défaut Faire slider tout le contenu d'un site..
    Bonjour,

    J'ai une envie pour l'un de mes projets : faire slider tout le contenu du site, quand on clique sur un bouton "Next" par exemple. Histoire de mieux comprendre le fonctionnement, j'ai fait 3 screens, qui symbolisent les 3 étapes maitresse de l'évenement :

    T = 0. Un a un div principal, en gris, et 2 sous-div : div_01 pour le contenu, à gauche, et div_02 pour un menu, à droite.


    http://wir3d.net/bordel/slider_01.jpg

    T = 1. On clique sur un bouton "Next", n'importe où sur le site, et les div_01 et div_02 commencent à slidé, pour arriver à T = 2.

    http://wir3d.net/bordel/slider_02.jpg

    T = 2. div_01 et div_02 ont slidé, et on a maintenant à l'écran div_02 à gauche, et un nouveau div, div_03, à droite.

    http://wir3d.net/bordel/slider_03.jpg

    Tout ceci doit se faire de manière animée évidemment. jQuery est-il capable de faire ça, ou quelque chose de semblable ? Si vous pensez savoir comment s'y prendre, merci de me donner des pistes : )

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Voici un exemple qui est très proche de votre demande. Il faut cliquer dans la div la plus étroite pour l'agrandir au détriment de la plus importante, c'est réversible.

    En commentaire dans le code, une animation légèrement différente.

    Comme vous le verrez, le code pour cette animation est très simple. Si la troisième division doit absolument être cachée au départ, cela compliquera certainement le code et je manque de temps pour chercher.


    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
     
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Author" content="Daniel Hagnoul" />
        <title>Page type</title>
        <style type="text/css">
            body {
                background-color:#FFFFFF;
                color:#000000;
                font-family:Arial, Helvetica, sans-serif;
                font-size:medium;
                font-style:normal;
                font-weight:normal;
                line-height:normal;
                letter-spacing:normal;
            }
            h1,h2,h3,h4,h5 {
                font-family:"Times New Roman", Times, serif;
            }
            div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                margin:0px;
                padding:0px;
            }
            p {
                padding:6px;
            }
            ul,ol,dl {
                list-style:none;
                padding-left:6px;
                padding-top:6px;
            }
            li {
                padding-bottom:6px;
            }
            div#conteneur {
                width:820px;
                height:600px;
                background-color:#BEBEBE;
            }
            div#divID1 {
                float:left;
                width:594px;
                height:585px;
                background-color:#FFA07A;
                margin:6px;
            }
            div#divID2 {
                float:left;
                width:174px;
                height:585px;
                background-color:#FF0000;
                margin:6px;
            }
            div#divID3 {
                float:left;
                width:12px;
                height:585px;
                background-color:#76EEC6;
                margin:6px;
            }
        </style>
        <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#divID3").click(function(){
                    if (parseInt($(this).css("width")) < 20){
                    /*
                        $("#divID1").animate({width:"-=582px"}, 3000);
                        $("#divID2").animate({width:"+=420px"}, 3000);
                        $("#divID3").animate({width:"+=164px"}, 3000);
                    */
                        $("#divID1").animate({width:"-=582px"}, 3000);
                        $("#divID3").animate({width:"+=579px"}, 3000);
                    }
                });
                $("#divID1").click(function(){
                    if (parseInt($(this).css("width")) < 20){
                    /*
                        $("#divID1").animate({width:"+=582px"}, 3000);
                        $("#divID2").animate({width:"-=420px"}, 3000);
                        $("#divID3").animate({width:"-=164px"}, 3000);
                    */
                        $("#divID1").animate({width:"+=582px"}, 3000);
                        $("#divID3").animate({width:"-=579px"}, 3000);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="conteneur">
            <div id="divID1"></div>
            <div id="divID2"></div>
            <div id="divID3"></div>
        </div>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    57
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 57
    Par défaut
    Pas mal du tout. Merci bien pour cette petite animation, qui rend vraiment bien je trouve. Je met ça de côté, ça risque de me servir plus tard : )

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 8
    Dernier message: 20/11/2012, 09h49
  2. Masquer les liens la corbeille et tout le contenu du site
    Par yanis97 dans le forum Développement Sharepoint
    Réponses: 4
    Dernier message: 04/04/2012, 15h38
  3. faire disparaitre "affichez tout le contenu du site"
    Par xenosender dans le forum SharePoint
    Réponses: 3
    Dernier message: 25/02/2009, 14h34
  4. Onglet Afficher tout le contenu du site
    Par guintolli dans le forum SharePoint
    Réponses: 6
    Dernier message: 05/08/2008, 18h16
  5. Bouton Afficher tout le contenu du site
    Par glucas59 dans le forum SharePoint
    Réponses: 3
    Dernier message: 28/04/2008, 11h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo