AccueilFAQRechercherMembresGroupesS'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.


    PA/QUEEL en accordéon vertical sur clic ! [HTML/CSS/JAVASCRIPT]

    Partagez
    avatar
    Glycérine
    FémininAge : 28Messages : 307

    le Mer 8 Fév 2012 - 13:16

    Rappel du premier message :

    Encore un ? Pourquoi ?

    Bonjour, bonjour !

    Aujourd'hui et pour ma première astuce, j'adapte un code de Sparrow-style (avec sa permission Wink) qui est l'un de ses célèbres accordéons ! Mais avec du JavaScript cette fois !
    En effet, vous avez été quelques uns à vous demander s'il était possible "d'avoir le même mais avec clic et pas survol". Donc, on l'a fait. Et comme je suis pas douée pour les longs discours, voyez par vous même !



    >> Aperçu <<

    Comme pour celui de Sparrow, il vous sera possible de changer les couleurs et/ou images de fond pour chaque onglet ou encore de modifier le fond du contenu, les images, la taille (l'astuce pour la taille est à la fin, au départ le contenu a 250px de hauteur), tout ça quoi ^^.

    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
    Pour voir ce code, vous devrez poster à la suite de ce topic !



    2. Le CSS
    Pour voir ce code, vous devrez poster à la suite de ce topic !




    3. Le JavaScript
    Pour voir ce code, vous devrez poster à la suite de ce topic !




    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




    Pour avoir un onglet ouvert dès le départ




    Dernière édition par Glycérine le Dim 15 Juil 2012 - 11:38, édité 3 fois




    avatar
    Loki
    MasculinAge : 29Messages : 283

    le Lun 14 Juil 2014 - 17:22

    Merci !
    avatar
    Fayzl4D
    MasculinAge : 21Messages : 84

    le Dim 20 Juil 2014 - 8:09

    merci
    avatar
    Ysamar
    FémininAge : 37Messages : 36

    le Sam 2 Aoû 2014 - 12:51

    merci!
    avatar
    PitchiPitchiPitch
    FémininAge : 19Messages : 18

    le Mer 29 Oct 2014 - 10:11

    merci a toi de partager tes qeel :)
    avatar
    Manue
    FémininAge : 36Messages : 58

    le Jeu 30 Oct 2014 - 18:12

    Hummm ... Soyons fou après tout qui sait on peut toujours comprendre ! xD
    avatar
    Sachikou
    FémininAge : 17Messages : 48

    le Dim 14 Déc 2014 - 16:07

    Merci :)



    avatar
    Niortais
    MasculinAge : 32Messages : 27

    le Lun 22 Déc 2014 - 9:05

    Merci
    avatar
    Kowei
    FémininAge : 19Messages : 23

    le Mer 24 Déc 2014 - 17:13

    Merci !
    avatar
    1charlotte
    FémininAge : 16Messages : 196

    le Jeu 25 Déc 2014 - 15:11

    Pas mal **
    avatar
    Romann
    FémininAge : 23Messages : 183

    le Mer 21 Jan 2015 - 7:05

    Merci Very Happy



    avatar
    Hayate747
    MasculinAge : 27Messages : 194

    le Sam 24 Jan 2015 - 17:15

    Merci !!!
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Dim 15 Fév 2015 - 21:54

    Merci Pour voir :) .



    Patricia :)
    avatar
    CapriceK
    FémininAge : 26Messages : 254

    le Mar 24 Fév 2015 - 10:01

    Merci :)
    avatar
    CapriceK
    FémininAge : 26Messages : 254

    le Mar 24 Fév 2015 - 10:38

    Désolée du double post (l'édit n'apparaît pas sur mon message, c'est bizarre), mais j'ai repéré une minuscule erreur dans le tuto^^.

    Le code qu'il faut remplacer en second pour avoir un onglet ouvert, celui-ci:
    Code:
    if($(this).parent().hasClass("current"))
          {
            $("#pa div.partie").removeClass("current");
          {

    Le dernier crochet est un crochet ouvert, il faudrait qu'il soit fermé } , non? En tout cas, après avoir fait tout le tuto, j'ai décidé que je voulais pouvoir fermer entièrement les onglets et j'ai recopié ce code pour re-remplacer le dernier, et ça ne fonctionnait pas jusqu'à ce que je change ce crochet^^.
    avatar
    Soleilou
    FémininAge : 17Messages : 48

    le Ven 12 Juin 2015 - 17:22

    Miciiiii
    avatar
    Satyrix
    MasculinAge : 19Messages : 18

    le Mer 5 Aoû 2015 - 19:51

    @Yusei Hôji a écrit:Merci Very Happy
    avatar
    Neyotox
    MasculinAge : 24Messages : 37

    le Lun 28 Sep 2015 - 6:13

    Wow...supeerbe
    avatar
    Kelalin
    FémininAge : 24Messages : 1517

    le Lun 28 Sep 2015 - 17:34

    Merci ! (ˆˇˆ)-c<˘ˑ˘)
    avatar
    Faïryna
    FémininAge : 14Messages : 59

    le Dim 6 Déc 2015 - 19:01

    MERCIIIIIII
    avatar
    lacoste
    MasculinAge : 23Messages : 30

    le Lun 21 Déc 2015 - 5:00

    merci
    avatar
    Myosotis
    FémininAge : 17Messages : 94

    le Ven 1 Jan 2016 - 16:00

    Mercii
    avatar
    xLittleRainbow
    FémininAge : 22Messages : 23

    le Lun 4 Jan 2016 - 11:57

    Many thanks c'est exactement ce que je cherchais **
    avatar
    Globule
    FémininAge : 17Messages : 47

    le Jeu 7 Jan 2016 - 0:43

    Merci !
    avatar
    Kouza
    FémininAge : 28Messages : 9

    le Ven 5 Fév 2016 - 16:28

    Merci pour le partage, très beau travail :)
    avatar
    Shanoa
    FémininAge : 19Messages : 64

    le Jeu 11 Fév 2016 - 9:13

    merci beaucoup
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Juil 2017 - 16:47