AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -27%
XIAOMI POCO X3 64Go – Gris
Voir le deal
176 €

    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT]

    Glycérine
    Glycérine
    FémininAge : 32Messages : 308

    Lun 13 Fév 2012 - 23:33

    Rappel du premier message :

    Et hop, en voilà un autre !

    Bonjour, bonjour !

    Aujourd'hui et pour ma seconde astuce, j'adapte encore un code de Sparrow-style ! xD Qui est, cette fois, l'accordéon horizontal ! De nouveau avec notre petit ami JavaScript !

    >> Aperçu <<

    Il est, tout comme son petit frère, modifiable en un peu tous les paramètres, attention néanmoins à la taille qui risque d'être plus capricieuse ! (Je vous déconseille personnellement de toucher aux tailles des titres...)

    Allez ^^ Let's go !


    Et comment qu'on fait ?

    Je préviens, la manipulation est un tout petit peu plus complexe que la version "survol" et il faut que vous ayez le JavaScript activé sur votre forum. Mais je vais vous expliquer tout ça en détail, don't worry Willy.

    1. Le HTML


    Copiez/collez ce code là où vous voudrez voir apparaître votre accordéon (Page d'accueil, QEEL, autre...).

    Code:
    <div id="accueil">
        <div class="page" id="page1">
            <table class="contenu_page">
                <tr>
                    <td class="titre" style="width: 400px !important; overflow: hidden;">
                       <span class="page_titre">Titre page 1</span>
                    </td>
                    <td>
                        <div class="contenu">
                           Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="page" id="page2">
            <table class="contenu_page">
                <tr>
                    <td class="titre" style="width: 40px; overflow: hidden;">
                       <span class="page_titre">Titre page 2</span>
                    </td>
                    <td>
                        <div class="contenu">
                           Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="page" id="page3">
            <table class="contenu_page">
                <tr>
                    <td class="titre" style="width: 40px; overflow: hidden;">
                       <span class="page_titre">Titre page 3</span>
                    </td>
                    <td>
                        <div class="contenu">
                           Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="page" id="page4">
            <table class="contenu_page">
                <tr>
                    <td class="titre" style="width: 40px; overflow: hidden;">
                       <span class="page_titre">Titre page 4</span>
                    </td>
                    <td>
                        <div class="contenu">
                           Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="page" id="page5">
            <table class="contenu_page">
                <tr>
                    <td class="titre" style="width: 40px; overflow: hidden;">
                       <span class="page_titre">Titre page 5</span>
                    </td>
                    <td>
                        <div class="contenu">
                           Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
    <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    2. Le CSS

    Copiez/collez ce code dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.

    Code:
    #accueil
    {
       width: 900px;
       height: 400px;
       overflow: hidden;
       background: url(http://img11.hostingpics.net/pics/181185imagedefond.jpg) center no-repeat;
       border: 3px solid #272727;
    }
    #page1
    {
       width: 40px;
       height: 400px;
       float: left;
       overflow: hidden;
       background-color: #555555;
    }

    #page2
    {
       width: 40px;
       height: 400px;
       float: left;
       overflow: hidden;
       background-color: #777777;
    }

    #page3
    {
       width: 40px;
       height: 400px;
       float: left;
       overflow: hidden;
       background-color: #9b9b9b;
    }

    #page4
    {
       width: 40px;
       height: 400px;
       float: left;
       overflow: hidden;
       background-color: #bababa;
    }

    #page5
    {
       width: 40px;
       height: 400px;
       float: left;
       overflow: hidden;
       background-color: #dcdcdc;
    }

    .current
    {
       width: 82% !important;
       height: 400px !important;
    }

    .contenu_page
    {
       width: 100%;
       height: 400px;
    }

    .page_titre
    {
       display: inline-block;
       height: 40px;
       width: 400px;
       margin-left: -180px;
       color: #ffffff;
       text-align: center;
       font-size: 24px;
       font-family: arial black;
       letter-spacing: 2px;
       text-shadow: 1px 1px 0px #5f5f5f;
       -webkit-transform: rotate(-90deg); 
       -moz-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
       transform: rotate(-90deg);
    }

    .page_titre:hover
    {
       cursor: pointer;
    }

    .contenu
    {
       width: 670px;
       height: 380px;
       margin-left: -180px;
       overflow: none;
       background-color: white;
       overflow: hidden;
       padding: 6px;
    }

    .credit
    {
       display: block;
       text-align: right;
       margin-right: 20px;
    }
    .credit a
    {
       font-size: 10px;
       text-decoration: none !important;
    }

    3. Le JavaScript

    Pour le JavaScript, allez dans votre panneau d'administation > Module > Gestion des pages Javascript.

    Vérifiez tout d'abord que le JavaScript est bien activé.

    Ensuite, créez une nouvelle page avec le nom que vous voulez. Sélectionnez n'importe lequel des choix sauf index et copiez/collez ce code dans votre page :


    Code:
    // Code par Glycérine [Never-Utopia]
    $("#accueil .page .contenu").hide();

    $("#accueil .page .current").parent().find(".contenu").fadeIn("slow", "linear");
       
    $("#accueil .page .page_titre").click(
       function ()
       {
          //$(this).parent().parent().parent().parent().parent().siblings().find(".contenu").fadeToggle("slow");
          
          if($(this).parent().parent().parent().parent().parent().hasClass("current"))
          {
             $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () {
                 $("#accueil div.page").removeClass("current");
               });
          }
          else
          {
             $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () {
                 $("#accueil div.page").removeClass("current");
                $(this).parent().parent().parent().parent().parent().toggleClass("current");
               });
             
             
             
             
          }
             $(this).parent().parent().parent().parent().parent().find(".contenu").fadeIn("slow");
          return false;
       }
    );

    Validez et retourner sur la gestion de vos pages. Votre page est créée et son lien est normalement dans la liste. Copiez le et gardez le.

    Ensuite, à la suite du code HTML que vous avez ajouter un peu plus tôt, juste en dessous, vous ajoutez cette ligne en remplaçant les xxx par le lien de votre page JavaScript que vous gardez précieusement.


    Code:
    <script type="text/javascript" src="xxx"></script>

    Je vais citer Sparrow pour ce qui est des crédits de Never-Utopia Wink

    Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser Wink
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.




    Aly
    Aly
    FémininAge : 23Messages : 22

    Dim 11 Mar 2012 - 11:47

    Merci !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 Aly2_b10
    Pourquoi se contenter de survivre ?
    Moi j'ai préféré vivre...
    Lala09
    Lala09
    FémininAge : 25Messages : 32

    Dim 11 Mar 2012 - 12:59

    Oh j'aime *o*



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 426529PNG028
    giannismoll7
    giannismoll7
    MasculinAge : 26Messages : 62

    Dim 11 Mar 2012 - 14:05

    merci :)
    Loki fulbester
    Loki fulbester
    MasculinAge : 30Messages : 6

    Jeu 15 Mar 2012 - 17:37

    merci
    Vampi
    Vampi
    FémininAge : 24Messages : 56

    Ven 23 Mar 2012 - 8:04

    Merci (:



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 SUXdpaGuJP
    Merci Yakkuru =D

    Spoiler:
    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 162284SignVampi
    Merci Jiyuu =D
    Tiffa
    Tiffa
    FémininAge : 26Messages : 34

    Ven 23 Mar 2012 - 15:54

    merci
    Ectoplasm'
    Ectoplasm'
    FémininAge : 30Messages : 8

    Ven 23 Mar 2012 - 20:59

    Merci beaucoup, je cherchai ça depuis un certain moment o/
    C'est vraiment sympatoche :)
    Eviiex
    Eviiex
    FémininAge : 28Messages : 5

    Sam 24 Mar 2012 - 4:14

    C'est génial ça. :)
    Merci beaucoup.
    Morphine.
    Morphine.
    FémininAge : 30Messages : 41

    Lun 26 Mar 2012 - 12:47

    Je suis intéressée *_*
    Merci !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 30st6
    Mizukishuu
    Mizukishuu
    FémininAge : 21Messages : 6

    Lun 26 Mar 2012 - 17:20

    Merci !
    Je chercher justement comment faire ça !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 Crea_412
    Anonymous
    Invité

    Dim 8 Avr 2012 - 14:36

    Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks ♥.
    cosmos-chann
    cosmos-chann
    FémininAge : 23Messages : 115

    Dim 8 Avr 2012 - 15:14

    oo je vais le tester merci !
    ( Lou' )
    ( Lou' )
    FémininAge : 25Messages : 108

    Lun 9 Avr 2012 - 17:37

    Merciii ♥
    warning.sign
    warning.sign
    FémininAge : 30Messages : 58

    Lun 9 Avr 2012 - 18:02

    merci =)
    Hell's
    Hell's
    FémininAge : 22Messages : 15

    Lun 9 Avr 2012 - 19:45

    :3
    Luv Scarlet
    Luv Scarlet
    MasculinAge : 26Messages : 94

    Mer 11 Avr 2012 - 20:13

    Merci pour le codage (je pense inclure directement les crédits dans le PA).



    Isazae
    Isazae
    MasculinAge : 32Messages : 19

    Jeu 12 Avr 2012 - 14:21

    Parfait c'est exactement ce que je recherche.
    Adan
    Adan
    MasculinAge : 21Messages : 11

    Jeu 12 Avr 2012 - 14:54

    Merci beaucoup beaucoup !
    Vintage Phonic
    Vintage Phonic
    FémininAge : 31Messages : 21

    Jeu 12 Avr 2012 - 15:09

    Merciii c'ests vraiment super *-*
    24nono38
    24nono38
    FémininAge : 31Messages : 68

    Dim 15 Avr 2012 - 1:29

    Je suis intriguée par le code ^^



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 230763kratossign1
    Woo
    Woo
    FémininAge : 30Messages : 143

    Dim 15 Avr 2012 - 13:52

      Je vais tenter ça ! :3
      Merci ô/



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 619075SignatureMukurocopie
    bluebubbles.
    bluebubbles.
    FémininAge : 27Messages : 2

    Lun 16 Avr 2012 - 18:27

    Merci (:
    avatar
    Del
    MasculinMessages : 110

    Mar 24 Avr 2012 - 15:04

    Merci .



    « Run you clever boy and remember... »
    Tsumei
    Tsumei
    MasculinAge : 30Messages : 116

    Sam 5 Mai 2012 - 11:36

    Merci !
    Assyn
    Assyn
    FémininAge : 26Messages : 60

    Sam 5 Mai 2012 - 19:00

    Merciiii! ^_^



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 2 795525AssynScopy
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 2:44