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

-53%
Le deal à ne pas rater :
-53% sur le jeu MOTOGP 21 sur PC
21.99 € 47.19 €
Voir le deal
Le Deal du moment : -41%
SanDisk Carte Mémoire microSDXC Ultra 128 Go + ...
Voir le deal
16.64 €

    Bloc flottant latéral ouvrant "onclick" (javascript)

    Onyx
    Onyx
    FémininAge : 27Messages : 3322

    Sam 11 Jan 2014 - 5:11

    Rappel du premier message :



    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Bouh!

    Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

    Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

    Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

    Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



    Si le bouton est une image



    Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
    Code:
      <div id="ongleton">
        <div class="ongleton_contenu">
          Contenu du bloc
        </div>
        <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
        <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
      </div>
      <script type="text/javascript">
      //<!--
        $('#ongleton_ouvrir').click(function(){
          $('#ongleton_ouvrir').css("display", "none");
          $('#ongleton_fermer').css("display", "block");
          $('#ongleton').css("left", "0px");
        });
        $('#ongleton_fermer').click(function(){
          $('#ongleton_ouvrir').css("display", "block");
          $('#ongleton_fermer').css("display", "none");
          $('#ongleton').css("left", "-212px");
        });
      //-->
      </script>

    Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
    Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
    Puis, nous avons deux div, soit deux boutons.
    La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
    La deuxième image est le bouton pour fermer (id="ongleton_fermer").
    Enfin, nous avons le javascript qui fait fonctionner le tout.

    Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
    Code:
    $('#ongleton').css("left", "-212px");


    Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
    Code:
    /*Bloc qui contient le bloc flottant et les boutons*/
    #ongleton {
      position: fixed;
      height: 90%; /*Hauteur du bloc flottant*/
      top: 5%; /*Espace du haut*/
      left: -212px;
      z-index: 999;
      transition: 1s;
      -webkit-transition: 1s;
    }
    /*Bloc flottant*/
    .ongleton_contenu {
      width: 200px; /*Largeur*/
      height: 100%;
      padding: 5px;
      background-color: #1B2836;
      color: #9BB9D9;
      font-size: 13px;
      font-family: Time New Roman;
      border: 2px #6993BE solid;
      border-left: none;
      border-radius: 0 30px 30px 0;
    }
    /*Boutons Ouvrir et Fermer*/
    #ongleton_ouvrir, #ongleton_fermer {
      position: absolute;
      top: 45%;
      left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
      z-index: 999;
      cursor: pointer;
    }

    Voilà, votre bloc flottant est installé ^^






    Si le bouton est un texte



    Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
    Code:
      <div id="ongleton">
        <div class="ongleton_contenu">
          Contenu du bloc
        </div>
        <div id="ongleton_ouvrir">
          Ouvrir
        </div>
        <div id="ongleton_fermer" style="display: none;">
          Fermer
        </div>
      </div>
      <script type="text/javascript">
      //<!--
        $('#ongleton_ouvrir').click(function(){
          $('#ongleton_ouvrir').css("display", "none");
          $('#ongleton_fermer').css("display", "block");
          $('#ongleton').css("left", "0px");
        });
        $('#ongleton_fermer').click(function(){
          $('#ongleton_ouvrir').css("display", "block");
          $('#ongleton_fermer').css("display", "none");
          $('#ongleton').css("left", "-212px");
        });
      //-->
      </script>

    Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
    Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
    Puis, nous avons deux div, soit deux boutons.
    La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
    La deuxième div est le bouton pour fermer (id="ongleton_fermer").
    Enfin, nous avons le javascript qui fait fonctionner le tout.

    Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
    Code:
    $('#ongleton').css("left", "-212px");


    Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
    Code:
    /*Bloc qui contient le bloc flottant et les boutons*/
    #ongleton {
      position: fixed;
      height: 90%; /*Hauteur du bloc flottant*/
      top: 5%; /*Espace du haut*/
      left: -212px;
      z-index: 999;
      transition: 1s;
      -webkit-transition: 1s;
    }
    /*Bloc flottant*/
    .ongleton_contenu {
      width: 200px; /*Largeur*/
      height: 100%;
      padding: 5px;
      background-color: #1B2836;
      color: #9BB9D9;
      font-size: 13px;
      font-family: Time New Roman;
      border: 2px #6993BE solid;
      border-left: none;
      border-radius: 0 30px 30px 0;
    }
    /*Boutons Ouvrir et Fermer*/
    #ongleton_ouvrir, #ongleton_fermer {
      position: absolute;
      top: 45%;
      left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
      z-index: 999;
      cursor: pointer;
      width: 100px;
      height: 20px;
      background-color: #1B2836;
      border: 2px solid #6993BE;
      border-bottom: none;
      text-align: center;
      color: #9BB9D9;
      padding: 5px;
      padding-top: 10px;
      border-radius: 30px 30px 0 0;
      margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
      -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
      transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
    }

    Voilà, votre onglet flottant est installé ^^




    N'oubliez pas de créditer N-U è_é


    Dernière édition par Onyx le Jeu 13 Avr 2017 - 19:19, édité 10 fois
    En ligne
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2455

    Dim 16 Aoû 2015 - 22:53

    Merci beaucoup du partage ! (*^▽^*)
    Luirio
    Luirio
    MasculinAge : 30Messages : 167

    Ven 21 Aoû 2015 - 7:37

    Je veux s'il vous plait! Merci ^^
    Neko Mimi
    Neko Mimi
    FémininAge : 30Messages : 165

    Jeu 10 Sep 2015 - 11:31

    J'aime merci beaucoup ♥



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 6 Tumblr_me5uxaCZuJ1qj73e2o1_500
    Soupy
    Soupy
    FémininAge : 25Messages : 23

    Dim 20 Sep 2015 - 18:21

    Pile ce que je cherchais, merci encore!
    Shaolan
    Shaolan
    MasculinAge : 29Messages : 118

    Ven 2 Oct 2015 - 8:39

    Merci !
    NaLu
    NaLu
    FémininAge : 25Messages : 157

    Dim 18 Oct 2015 - 18:06

    Merci pour ce partage *0*



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 6 683430Sanstitre7
    Lilie
    Lilie
    FémininAge : 37Messages : 190

    Sam 24 Oct 2015 - 23:15

    Ah ça m'intéresse ! Merci pour le partage :)
    pimslady
    pimslady
    FémininAge : 31Messages : 71

    Mar 1 Déc 2015 - 14:51

    top de chez top !! merci pour le partage !
    avatar
    Nal Souclade
    MasculinAge : 22Messages : 167

    Mar 1 Déc 2015 - 19:34

    Super, pile ce que je cherchais ! Merci beaucoup *^* !
    Databar
    Databar
    MasculinAge : 27Messages : 142

    Mer 2 Déc 2015 - 17:44

    Jolie :)
    Heryon
    Heryon
    FémininAge : 26Messages : 23

    Jeu 17 Déc 2015 - 22:58

    Merci du partage ! c:
    Luune
    Luune
    FémininAge : 32Messages : 143

    Sam 2 Jan 2016 - 14:32

    Merci
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 27Messages : 162

    Sam 2 Jan 2016 - 18:49

    Merciiiiiiii
    FreeSpirit
    FreeSpirit
    MasculinAge : 25Messages : 167

    Dim 10 Jan 2016 - 21:26

    Merci !
    Arisu
    Arisu
    FémininAge : 32Messages : 116

    Lun 22 Fév 2016 - 5:19

    Merci !
    RyuTsuki
    RyuTsuki
    FémininAge : 30Messages : 41

    Lun 22 Fév 2016 - 11:58

    Merci ça c'est vraiment cool =)
    Whit
    Whit
    FémininAge : 23Messages : 154

    Lun 22 Fév 2016 - 22:35

    Merci !
    beza
    beza
    FémininAge : 25Messages : 47

    Dim 28 Fév 2016 - 14:45

    Merci !
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 27Messages : 45

    Mar 1 Mar 2016 - 19:20

    Oh trop coooool !! Merci beaucoup *-*



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    FanDeFofo
    FanDeFofo
    MasculinAge : 44Messages : 16

    Mer 2 Mar 2016 - 19:11

    r
    Chorks
    Chorks
    MasculinAge : 24Messages : 32

    Jeu 17 Mar 2016 - 20:52

    Merci :)
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 21Messages : 60

    Dim 3 Avr 2016 - 22:52

    merci !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 52Messages : 167

    Lun 4 Avr 2016 - 14:58

    Merci
    InfiniKey
    InfiniKey
    FémininAge : 34Messages : 58

    Mar 5 Avr 2016 - 18:11

    C'est beau :omg:
    Eywa
    Eywa
    FémininAge : 35Messages : 14

    Lun 25 Avr 2016 - 12:55

    ah oui sympa ça
    Contenu sponsorisé


      La date/heure actuelle est Lun 17 Mai 2021 - 22:05