Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    FémininAge : 27Message(s) : 307

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Glycérine
    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



    MasculinAge : 28Message(s) : 283
    Loki
    le Lun 14 Juil 2014 - 17:22
    Merci !
    MasculinAge : 20Message(s) : 84
    Fayzl4D
    le Dim 20 Juil 2014 - 8:09
    merci
    FémininAge : 37Message(s) : 36
    Ysamar
    le Sam 2 Aoû 2014 - 12:51
    merci!
    FémininAge : 18Message(s) : 18
    PitchiPitchiPitch
    le Mer 29 Oct 2014 - 10:11
    merci a toi de partager tes qeel :)
    FémininAge : 35Message(s) : 49
    Manue
    le Jeu 30 Oct 2014 - 18:12
    Hummm ... Soyons fou après tout qui sait on peut toujours comprendre ! xD
    FémininAge : 16Message(s) : 48
    Sachikou
    le Dim 14 Déc 2014 - 16:07
    Merci :)


    MasculinAge : 32Message(s) : 27
    Niortais
    le Lun 22 Déc 2014 - 9:05
    Merci
    FémininAge : 18Message(s) : 22
    Kowei
    le Mer 24 Déc 2014 - 17:13
    Merci !
    FémininAge : 15Message(s) : 191
    1charlotte
    le Jeu 25 Déc 2014 - 15:11
    Pas mal **
    FémininAge : 22Message(s) : 183
    Romann
    le Mer 21 Jan 2015 - 7:05
    Merci Very Happy


    MasculinAge : 26Message(s) : 192
    Hayate747
    le Sam 24 Jan 2015 - 17:15
    Merci !!!
    FémininAge : 53Message(s) : 230
    patriciadpt30
    le Dim 15 Fév 2015 - 21:54
    Merci Pour voir :) .


    Patricia :)
    FémininAge : 25Message(s) : 254
    CapriceK
    le Mar 24 Fév 2015 - 10:01
    Merci :)
    FémininAge : 25Message(s) : 254
    CapriceK
    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^^.
    FémininAge : 16Message(s) : 45
    Soleilou
    le Ven 12 Juin 2015 - 17:22
    Miciiiii
    MasculinAge : 18Message(s) : 18
    Satyrix
    le Mer 5 Aoû 2015 - 19:51
    @Yusei Hôji a écrit:Merci Very Happy
    MasculinAge : 23Message(s) : 37
    Neyotox
    le Lun 28 Sep 2015 - 6:13
    Wow...supeerbe
    FémininAge : 24Message(s) : 1353

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Lun 28 Sep 2015 - 17:34
    Merci ! (ˆˇˆ)-c<˘ˑ˘)
    FémininAge : 13Message(s) : 53
    Faïryna
    le Dim 6 Déc 2015 - 19:01
    MERCIIIIIII
    MasculinAge : 22Message(s) : 30
    lacoste
    le Lun 21 Déc 2015 - 5:00
    merci
    FémininAge : 16Message(s) : 94
    Myosotis
    le Ven 1 Jan 2016 - 16:00
    Mercii
    FémininAge : 21Message(s) : 23
    xLittleRainbow
    le Lun 4 Jan 2016 - 11:57
    Many thanks c'est exactement ce que je cherchais **
    FémininAge : 17Message(s) : 40
    Globule
    le Jeu 7 Jan 2016 - 0:43
    Merci !
    FémininAge : 28Message(s) : 9
    Kouza
    le Ven 5 Fév 2016 - 16:28
    Merci pour le partage, très beau travail :)
    FémininAge : 18Message(s) : 64
    Shanoa
    le Jeu 11 Fév 2016 - 9:13
    merci beaucoup
    Contenu sponsorisé
    Aujourd'hui à 21:03

      La date/heure actuelle est Dim 25 Sep 2016 - 21:03