AccueilDernières imagesRechercherS'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 à ne pas rater :
Nike : Jusqu’à 50% sur les articles de fin de saison
Voir le deal

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

    Glycérine
    Glycérine
    FémininAge : 35Messages : 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.




    Arwena
    Arwena
    FémininAge : 32Messages : 4

    Sam 19 Jan 2013 - 18:11

    Merci beaucoup c'est super !
    Hik@ri
    Hik@ri
    MasculinAge : 31Messages : 152

    Mar 22 Jan 2013 - 9:20

    Je le cherchais partout ! Merci !
    ninouee
    ninouee
    FémininAge : 42Messages : 143

    Ven 25 Jan 2013 - 22:58

    C'est superbe!

    Je vais essayer de m'inspirer de votre travail.

    Mil merci!



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 Robert12
    Teseu
    Teseu
    MasculinAge : 29Messages : 54

    Sam 26 Jan 2013 - 0:06

    Merci!
    MugiwaraNoLuffy33
    MugiwaraNoLuffy33
    FémininAge : 23Messages : 4

    Jeu 31 Jan 2013 - 13:02

    Merci <3
    Linky
    Linky
    FémininAge : 33Messages : 30

    Dim 3 Fév 2013 - 12:39

    et merci! ^^
    bianca ~♥~
    bianca ~♥~
    FémininAge : 55Messages : 111

    Mar 12 Fév 2013 - 19:48

    Merci *-*



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 Coco_c11
    Zhuge Liang
    Zhuge Liang
    MasculinAge : 34Messages : 52

    Sam 16 Fév 2013 - 20:20

    Merci :)
    Diboan
    Diboan
    MasculinAge : 31Messages : 7

    Sam 16 Fév 2013 - 22:24

    Merci de partager votre travail !
    Nymphadora
    Nymphadora
    FémininAge : 34Messages : 28

    Dim 17 Fév 2013 - 14:53

    codage parfait ! bien expliqué =D
    Lou'
    Lou'
    FémininAge : 34Messages : 99

    Sam 23 Fév 2013 - 22:31

    Merci infiniment pour ce tuto très utile
    Opaline
    Opaline
    FémininAge : 24Messages : 86

    Mer 27 Fév 2013 - 14:21

    Merci pour ce beau code, je te le chipe Razz



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 140502022634448028
    Nahana Pinlane
    Nahana Pinlane
    FémininAge : 23Messages : 46

    Lun 4 Mar 2013 - 23:37

    Thanks :3 !
    LuxAeterna
    LuxAeterna
    FémininAge : 45Messages : 99

    Lun 11 Mar 2013 - 20:47

    Merci :toto:
    BABY. MINE
    BABY. MINE
    FémininAge : 27Messages : 40

    Mar 12 Mar 2013 - 20:33

    Merci x)
    Ami
    Ami
    FémininAge : 32Messages : 88

    Mar 12 Mar 2013 - 23:19

    Par curiosité ♥



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 2ry65qpPA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 I7643c
    Kurokaze
    Kurokaze
    FémininAge : 32Messages : 35

    Mer 20 Mar 2013 - 15:06

    Pas mal ! J'aime bien, merci !
    Sento Baionoido
    Sento Baionoido
    MasculinAge : 28Messages : 12

    Mar 26 Mar 2013 - 12:50

    Un apprenti codeur recherche désespérément un code et ... Oh ! A moi le code ^^
    Rheah
    Rheah
    FémininAge : 27Messages : 148

    Lun 1 Avr 2013 - 14:43

    Oh, pile ce que je cherchais **' ! Merci \o/
    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 2451212816
    Matris
    Matris
    MasculinAge : 24Messages : 58

    Mar 2 Avr 2013 - 17:28

    Merci^^



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 Sansti10
    Shangwi'
    Shangwi'
    FémininAge : 24Messages : 31

    Ven 5 Avr 2013 - 19:02

    Piti prob avec le code, j'ai supprimé la fin du code, donc je poste ici car je ne trouve pas l'autre topic.



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 130330112046640194
    Pastomaniac
    Pastomaniac
    FémininAge : 27Messages : 194

    Dim 7 Avr 2013 - 20:22

    Merci *-*



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 7 130813091054601890
    Himegimicake
    Himegimicake
    FémininAge : 30Messages : 9

    Mer 10 Avr 2013 - 11:50

    Code bien pratique, merci ^^
    Taylor ♥
    Taylor ♥
    FémininAge : 25Messages : 11

    Mer 17 Avr 2013 - 13:41

    Merci :)
    Imari
    Imari
    FémininAge : 40Messages : 68

    Jeu 18 Avr 2013 - 13:00

    Merci beaucoup =D



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


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:26