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
    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 : 25Message(s) : 62
    LouetRinkin
    le Mer 8 Fév 2012 - 13:22
    "vous avez été quelques uns à vous demander s'il était possible "d'avoir le même mais avec clic et pas survol"."
    Et ce quelque un c'est moi. Cool
    MasculinAge : 31Message(s) : 31644

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Mer 8 Fév 2012 - 13:53
    Génial ! Je te remercie pour l'adaptation, je pense qu'elle en séduira plus d'un ^^ Merci beaucoup Very Happy


    MasculinAge : 21Message(s) : 3
    Lander.
    le Mer 8 Fév 2012 - 16:06
    En effet, elle en séduit plus d'un :)


    MasculinAge : 22Message(s) : 202
    Barney
    le Mer 8 Fév 2012 - 18:30
    Vraiment une excellente idée, bravo et merci ! :)
    FémininAge : 25Message(s) : 50
    warning.sign
    le Mer 8 Fév 2012 - 20:59
    Justement, je me demandais comment... donc, merci ! =D
    MasculinAge : 25Message(s) : 71
    Yusei Hôji
    le Mer 8 Fév 2012 - 21:41
    Merci Very Happy
    FémininAge : 24Message(s) : 96
    chouchounette
    le Jeu 9 Fév 2012 - 14:05
    Merci beaucoup
    MasculinAge : 17Message(s) : 16
    Kelogo
    le Jeu 9 Fév 2012 - 21:57
    Thanks !!!


    FémininAge : 29Message(s) : 89
    Sateen
    le Jeu 9 Fév 2012 - 22:20
    Hoooo j'adore, Merci beaucoup

    Par contre pour le qeel il faut pas un code Template Index-body ?
    FémininAge : 34Message(s) : 24
    Rakuen
    le Ven 10 Fév 2012 - 1:48
    Hello :) Merci pour le partage!
    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 Ven 10 Fév 2012 - 10:09
    Y a pas de quoi. \o/

    Sateen : Pour le QEEL, il suffit de l'ajouter dans le template et d'adapter le code existant en y incluant les balises de templates que vous souhaitez voir dedans. =)



    FémininAge : 29Message(s) : 89
    Sateen
    le Ven 10 Fév 2012 - 10:13
    Haaaaaa d'accord ham1 Merci beaucoup :hug2:
    MasculinAge : 20Message(s) : 158
    titou9322
    le Ven 10 Fév 2012 - 18:54
    merci
    FémininAge : 19Message(s) : 43
    Candy †
    le Ven 10 Fév 2012 - 22:02
    Thank (:
    FémininAge : 26Message(s) : 28
    Leila
    le Sam 11 Fév 2012 - 9:37
    Super code :)
    Merci
    FémininAge : 37Message(s) : 206
    CathyCréation
    le Dim 12 Fév 2012 - 5:58
    merci beaucoup
    FémininAge : 24Message(s) : 194
    Strawberry-Swan
    le Dim 12 Fév 2012 - 8:40
    Merci !


      FémininAge : 19Message(s) : 43
      Yin
      le Lun 13 Fév 2012 - 13:05
      Super apperçut! Il vas me servir! Merci beaucoup Very Happy
      MasculinAge : 22Message(s) : 10
      A.T.O
      le Mar 14 Fév 2012 - 23:59
      Je vais essayer ça tout de suite
      MasculinAge : 20Message(s) : 43
      Hypnos
      le Mer 15 Fév 2012 - 13:37
      J'aimerais bien voir ce code *_*


      MasculinAge : 22Message(s) : 764
      vic_le_faucheur
      le Jeu 16 Fév 2012 - 18:48
      Enfin quelqu'un qui aime le javascript ^^
      MasculinAge : 25Message(s) : 116
      killer999
      le Ven 17 Fév 2012 - 12:49
      THanks
      MasculinAge : 21Message(s) : 166
      Jimmy
      le Sam 18 Fév 2012 - 19:04
      WESh :!
      FémininAge : 18Message(s) : 84
      Margii
      le Sam 18 Fév 2012 - 20:05
      Merci *^*
      Contenu sponsorisé
      Aujourd'hui à 10:44

        La date/heure actuelle est Lun 26 Sep 2016 - 10:44