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 - 12: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 - 9:38, édité 3 fois



    MasculinAge : 19Message(s) : 8
    kosmiska☼
    le Dim 19 Fév 2012 - 10:09
    "c'est de toute beauté" Je veux le voir *.*

    Mercii pour ce Code ♥
    MasculinAge : 17Message(s) : 58
    Matris
    le Mar 21 Fév 2012 - 22:35
    Merci !


    FémininAge : 30Message(s) : 4
    Jess
    le Mer 22 Fév 2012 - 1:55
    merci :)
    FémininAge : 20Message(s) : 26
    dorinne
    le Mer 22 Fév 2012 - 10:37
    Génial merci beaucoup :)


    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    FémininAge : 19Message(s) : 5
    Darknesse
    le Mer 22 Fév 2012 - 11:21
    Merci ^^
    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 22 Fév 2012 - 15:16
    Mais je vous en prie !

    N'hésitez pas à prévenir si vous découvrez un bug ^^



    FémininAge : 22Message(s) : 56
    Lirou21
    le Mer 22 Fév 2012 - 16:01
    Merci Wink


    FémininAge : 20Message(s) : 13
    kimel'
    le Jeu 23 Fév 2012 - 17:08
    Merci beaucoup ! (:
    FémininAge : 23Message(s) : 46
    Streetwalker
    le Ven 24 Fév 2012 - 19:51
    Merci du partage


    L'enfant Michael Jackson n'a jamais pu exister, le chanteur des Jacksons 5 l'a étouffé à la naissance.
    FémininAge : 20Message(s) : 26
    dorinne
    le Sam 25 Fév 2012 - 11:17
    Bonjour, je pense utiliser ce code pour ma page d'accueil de mon forum, cependant j'ai vu qu'on ne voyait pas "automatiquement" un des onglets.
    Enfin, comment m'exprimer >< Sur NU, pour le QEEL on voit le dernier onglets sans avoir à cliquer dessus, comment cela est possible?
    Car pour une page d'accueil, c'est toujours mieux de voir dès la première fois, le plus important du forum XD


    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    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 Sam 25 Fév 2012 - 11:20
    En effet, je vais voir ce que je peux faire pour arranger ça Wink Pas le temps immédiatement, mais ce soir ou demain je pense.



    FémininAge : 20Message(s) : 26
    dorinne
    le Sam 25 Fév 2012 - 11:22
    Oh ce n'est pas pressé, j'ai beaucoup d'autres choses à faire en attendant! Mais merci beaucoup! Very Happy


    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    FémininAge : 19Message(s) : 17
    Nutty
    le Sam 25 Fév 2012 - 13:37
    Merci beaucoup o/


    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 Sam 25 Fév 2012 - 14:55
    Tuto mis à jour avec l'explication pour ajouter un onglet ouvert directement au chargement de la page !



    FémininAge : 20Message(s) : 26
    dorinne
    le Sam 25 Fév 2012 - 20:03
    Je te remercie beaucoup (et encore c'est pas assez je trouve XD)!! C'est génial Very Happy :michi2:


    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    MasculinAge : 39Message(s) : 22
    LB670
    le Sam 25 Fév 2012 - 23:11
    Merci pour ce tuto.


    FémininAge : 21Message(s) : 57
    Yesterday
    le Sam 25 Fév 2012 - 23:26
    Merci pour le tuto! Very Happy
    FémininAge : 20Message(s) : 26
    dorinne
    le Sam 25 Fév 2012 - 23:40
    Je dérange encore... >< De temps en temps, tous les onglets de l'accordéon sont ouverts et pas seulement le premier! Pourtant je ne fais qu'actualiser la page, je ne change rien, je suppose que cela n'est pas normal alors comment puis-je faire?


    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    MasculinAge : 32Message(s) : 85
    Nero Brigh
    le Dim 26 Fév 2012 - 13:00
    Merci !
    FémininAge : 23Message(s) : 30
    Okoia
    le Lun 27 Fév 2012 - 11:25
    Merci ! **
    FémininAge : 99Message(s) : 119
    Seby
    le Lun 27 Fév 2012 - 14:52
    Merci. Enfin je sais pas, je vais l'essayer voir s'il fonctionne déjà XD
    MasculinAge : 15Message(s) : 63
    Vador
    le Lun 27 Fév 2012 - 15:23
    merci
    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 Mar 28 Fév 2012 - 8:16
    @dorinne a écrit:Je dérange encore... >< De temps en temps, tous les onglets de l'accordéon sont ouverts et pas seulement le premier! Pourtant je ne fais qu'actualiser la page, je ne change rien, je suppose que cela n'est pas normal alors comment puis-je faire?

    Doit y avoir un soucis dans le JS quelque part dans ce cas... Tu peux me passer l'adresse de ton forum / forum de test, que je voie ça ? ^^



    FémininAge : 17Message(s) : 22
    ChocoCookie
    le Mar 28 Fév 2012 - 9:31
    Oh, c'est ce que je cherchais, merci >3< !


    Life in colors
    FémininAge : 22Message(s) : 11
    Ju'
    le Mar 28 Fév 2012 - 23:44
    Merci
    Contenu sponsorisé
    Aujourd'hui à 8:31

      La date/heure actuelle est Mer 28 Sep 2016 - 8:31