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.

-29%
Le deal à ne pas rater :
SEAGATE – Disque dur Interne HDD – BarraCuda – 4To
84.99 € 119.81 €
Voir le deal

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

    Onyx
    Onyx
    FémininAge : 27Messages : 3321

    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
    Shuna
    Shuna
    FémininAge : 26Messages : 137

    Mer 14 Mai 2014 - 21:03

    merci j'adore !
    Shatters
    Shatters
    FémininAge : 27Messages : 57

    Ven 16 Mai 2014 - 0:13

    Merci !



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    LinaK
    LinaK
    FémininAge : 30Messages : 53

    Ven 6 Juin 2014 - 19:03

    Tout simplement génial Very Happy



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 3 J9ko

    Doan Lavita
    Doan Lavita
    FémininAge : 22Messages : 72

    Sam 7 Juin 2014 - 18:11

    Merci! *^*



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 3 Freee10
    avatar
    Dada1779
    MasculinAge : 36Messages : 23

    Mar 10 Juin 2014 - 10:15

    Merci pour le partage
    avatar
    Zahil
    MasculinAge : 27Messages : 29

    Mar 10 Juin 2014 - 12:26

    Merci ! :)
    Sue Sheeran
    Sue Sheeran
    FémininAge : 22Messages : 27

    Mar 10 Juin 2014 - 13:28

    merci :)
    Keylha
    Keylha
    FémininAge : 20Messages : 82

    Mar 10 Juin 2014 - 21:05

    Merci beaucoup ! :3



    Ashem
    Ashem
    FémininAge : 35Messages : 255

    Mer 11 Juin 2014 - 18:25

    merci
    Sina
    Sina
    FémininAge : 27Messages : 33

    Ven 13 Juin 2014 - 16:55

    Merci beaucoup !



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 3 SinaSignatureNU
    Anonymous
    Invité

    Ven 13 Juin 2014 - 18:09

    Merci !
    Ema Skye
    Ema Skye
    FémininAge : 22Messages : 134

    Lun 23 Juin 2014 - 22:52

    Merci ! Very Happy
    Dark6nika
    Dark6nika
    FémininAge : 27Messages : 118

    Mar 24 Juin 2014 - 17:18

    Ah, super intéressant ça ! Merci beaucoup de partager ce code bien utile ;3



    Stiou
    Stiou
    FémininAge : 26Messages : 42

    Lun 30 Juin 2014 - 23:22

    Merci !



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 3 Dany12
    Layla4
    Layla4
    FémininAge : 21Messages : 149

    Mar 1 Juil 2014 - 12:57

    Merci !
    narakye
    narakye
    FémininAge : 26Messages : 497

    Mar 1 Juil 2014 - 13:15

    merci *-*
    Nanou0001
    Nanou0001
    FémininAge : 36Messages : 50

    Mer 2 Juil 2014 - 9:13

    merci
    Azuriel
    Azuriel
    FémininAge : 26Messages : 129

    Dim 20 Juil 2014 - 12:11

    Merci ! o/
    Venise
    Venise
    FémininAge : 37Messages : 270

    Ven 25 Juil 2014 - 1:01

    merci
    Mr Yo
    Mr Yo
    MasculinAge : 46Messages : 37

    Dim 3 Aoû 2014 - 14:31

    Genial, merci
    patriciadpt30
    patriciadpt30
    FémininAge : 58Messages : 240

    Jeu 7 Aoû 2014 - 21:28

    cool



    Patricia :)
    Nileeda
    Nileeda
    FémininAge : 24Messages : 42

    Jeu 14 Aoû 2014 - 12:23

    Merci :)
    Daph
    Daph
    FémininAge : 27Messages : 67

    Ven 5 Sep 2014 - 4:44

    Merci Very Happy



    Liliumini
    Liliumini
    FémininAge : 25Messages : 58

    Sam 27 Sep 2014 - 21:58

    Merci, c'est vraiment utile!
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 23Messages : 83

    Sam 4 Oct 2014 - 23:55

    Merci :) !
    Contenu sponsorisé


      La date/heure actuelle est Dim 7 Mar 2021 - 15:56