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.

-43%
Le deal à ne pas rater :
CORSAIR – Souris Gaming M65 RGB ELITE
39.99 € 69.99 €
Voir le deal
Le deal à ne pas rater :
Code promo ASOS : -20% en plus sur les promos jusqu’à -80% !
Voir le deal

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

    Onyx
    Onyx
    FémininAge : 28Messages : 3349

    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
    Harmonia
    Harmonia
    FémininAge : 23Messages : 110

    Dim 1 Mai 2016 - 6:37

    Très pratique, merci beaucoup !
    Patdrue
    Patdrue
    FémininAge : 31Messages : 158

    Mar 17 Mai 2016 - 17:16

    Merci !
    EAVENN
    EAVENN
    FémininAge : 25Messages : 162

    Jeu 19 Mai 2016 - 20:46

    merci !
    Candy Libertine
    Candy Libertine
    FémininAge : 23Messages : 136

    Dim 22 Mai 2016 - 15:27

    Super merciii !
    Grande
    Grande
    FémininAge : 33Messages : 207

    Mer 25 Mai 2016 - 13:51

    Merci =D



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 7 171074gwenj10
    mon-etoile
    mon-etoile
    FémininAge : 33Messages : 140

    Mar 31 Mai 2016 - 14:21

    Merci beaucoup
    Tink ♥
    Tink ♥
    FémininAge : 29Messages : 66

    Mer 15 Juin 2016 - 19:33

    Merci Wink
    Oror
    Oror
    FémininAge : 31Messages : 96

    Dim 26 Juin 2016 - 12:58

    C'est pile ce qu'il me fallait et d'un pratique sans nom ! ^^
    Merci beaucoup du partage ! ^^



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 7 351490minion
    Lilynufare
    Lilynufare
    FémininAge : 31Messages : 341

    Sam 2 Juil 2016 - 0:00

    merci :)
    Rosedesvents
    Rosedesvents
    FémininAge : 35Messages : 97

    Lun 4 Juil 2016 - 12:14

    Merci Very Happy
    Banshee Quinn
    Banshee Quinn
    FémininAge : 23Messages : 23

    Sam 16 Juil 2016 - 5:19

    Merci ♥
    Lamire
    Lamire
    FémininAge : 28Messages : 96

    Lun 25 Juil 2016 - 4:00

    Merci~~
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 32Messages : 51

    Jeu 28 Juil 2016 - 13:17

    Merki ! J'espère pouvoir le mettre à droite Sad
    Risa
    Risa
    FémininAge : 33Messages : 263

    Lun 19 Sep 2016 - 11:20

    Merci du partage !
    Kovu
    Kovu
    FémininAge : 20Messages : 256

    Dim 25 Sep 2016 - 14:37

    Merci beaucoup !
    Likau
    Likau
    MasculinAge : 27Messages : 353

    Sam 22 Oct 2016 - 11:59

    Nickel Chrome Very Happy
    dean winchester
    dean winchester
    MasculinAge : 27Messages : 85

    Mar 1 Nov 2016 - 23:32

    merci
    Sighild
    Sighild
    FémininAge : 34Messages : 225

    Ven 11 Nov 2016 - 17:41

    Merci beaucoup pour le partage.
    Froufy
    Froufy
    FémininAge : 21Messages : 59

    Dim 20 Nov 2016 - 12:02

    Merci^^



    1+1= 4
          2
    3
    Eime
    Eime
    FémininAge : 25Messages : 15

    Mar 22 Nov 2016 - 16:32

    Je prends, merci !
    Depp
    Depp
    FémininAge : 30Messages : 301

    Sam 3 Déc 2016 - 16:58

    merci bien :)



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 7 Tumblr_nenygwIlcz1s4u464o1_500
    Lyxiae
    Lyxiae
    FémininAge : 28Messages : 44

    Dim 11 Déc 2016 - 12:19

    Merci !
    QuickLittleBastard
    QuickLittleBastard
    MasculinAge : 27Messages : 10

    Dim 18 Déc 2016 - 4:18

    Merci :)
    Hawk Lowell
    Hawk Lowell
    FémininAge : 24Messages : 134

    Mer 21 Déc 2016 - 19:16

    Merci
    Marie
    Marie
    FémininAge : 32Messages : 2206

    Mar 27 Déc 2016 - 18:48

    Coucou!

    Juste pour voir. ^^



    /

    Kit fait par Arpège. Merci! :love:
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 22:40