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


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

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2910

    le 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
    avatar
    Symphonie
    FémininAge : 21Messages : 20

    le Sam 1 Mar 2014 - 22:44

    Merci beaucoup !!! J'y mettrai mes crédits C=
    avatar
    Drakylla
    MasculinAge : 25Messages : 32

    le Lun 3 Mar 2014 - 17:10

    Alors ça, c'est super top ! Discret, soft, j'adore ! Very Happy
    avatar
    Drakylla
    MasculinAge : 25Messages : 32

    le Lun 3 Mar 2014 - 17:51

    Par contre j'ai un soucis chez moi avec ce tuto. J'ai tout bien mis dans mon template, dans le css, j'ai plusieurs fois changé la valeur dont tu parles en rouge dans ton tuto, puis j'ai été vérifié sur le site exemple avec l'outil développeur que j'avais bien mis le code au bon endroit, mais ça me fait toujours ça :
    http://nsa31.casimages.com/img/2014/03/03/140303055338232578.png
    En gros l'onglet est toujours ouvert et il ne se ferme pas. Lorsque je clique sur le bouton, le mot "fermer" apparaît puis "ouvrir" si je reclique, mais l'onglet ne bouge pas d'un pouce.
    Tu saurais m'aider s'il te plaît ? Voilà une partie de mon template, la seule modif que j'y avais apporté un peu avant c'est pour placer la barre de navigation tout en haut.

    Spoiler:
    Code:
    </head>
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    <div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
     
    <table cellspacing="0" cellpadding="0" id="ongleton">
      <tbody>
        <tr>
          <td>
     <div class="onglet_contenuon">
      Contenu de l'onglet
    </div>
          </td>
          <td>
     <div  id="onglet_ouvrir" onclick="document.getElementById('ongleton').style.left='0px'; document.getElementById('onglet_ouvrir').style.display='none'; document.getElementById('onglet_fermer').style.display='block'">
      Ouvrir
    </div>
    <div  id="onglet_fermer" style="display: none;" onclick="document.getElementById('ongleton').style.left='0px'; document.getElementById('onglet_fermer').style.display='none'; document.getElementById('onglet_ouvrir').style.display='block'">
      Fermer
    </div>
          </td>
        </tr>
      </tbody>
    </table>
     
      <!-- BEGIN hitskin_preview -->

    Voilà voilà, merci encore pour le tuto sinon, c'est vraiment utile et si j'arrive à le faire fonctionner chez moi je vais m'en servir. x)
    avatar
    Florian Takiya
    MasculinAge : 22Messages : 61

    le Mer 12 Mar 2014 - 16:34

    Merci ! Very Happy
    avatar
    Alonely
    MasculinAge : 22Messages : 43

    le Mer 19 Mar 2014 - 14:35

    Merci
    avatar
    tamanegeek
    MasculinAge : 17Messages : 167

    le Sam 22 Mar 2014 - 16:16

    Merci !
    Lucrèce
    FémininAge : 27Messages : 63

    le Dim 23 Mar 2014 - 13:22

    Très beau travail, merci beaucoup !
    avatar
    Banpaia
    FémininAge : 19Messages : 130

    le Mar 25 Mar 2014 - 9:48

    Merci !
    avatar
    SvenO
    MasculinAge : 23Messages : 78

    le Mer 26 Mar 2014 - 19:22

    Merci ! ca fait un moment que je veux savoir comment faire !



    avatar
    Aoi Kiseki
    FémininAge : 25Messages : 98

    le Ven 28 Mar 2014 - 4:28

    merciii
    avatar
    M.T
    FémininAge : 27Messages : 53

    le Dim 30 Mar 2014 - 1:45

    Curieuse de découvrir l'astuce. Merci !
    avatar
    Jacoon
    FémininAge : 20Messages : 147

    le Dim 30 Mar 2014 - 17:50

    Merci de l'astuce. :3
    avatar
    Crucible
    FémininAge : 27Messages : 36

    le Mer 2 Avr 2014 - 2:00

    Merci beaucoup pour tout !



    « ONCE, I DUG A PIT AND FILLED IT WITH CLOUDS. OR WAS IT CLOWNS ?
    DOESN'T MATTER. IT DIDN'T SLOW HIM DOWN.
    TO BE HONEST, IT WASN'T THE BEST IDEA.
    AND IT REALLY BEGAN TO SMELL. MUST HAVE BEEN CLOWNS.
    CLOUDS DON'T SMELL BAD. THEY TASTE OF BUTTER ! AND TEARS.
    »
    avatar
    Evydence
    FémininAge : 20Messages : 60

    le Mar 8 Avr 2014 - 18:30

    Merci beaucoup!
    avatar
    Tatia38
    FémininAge : 28Messages : 303

    le Mar 8 Avr 2014 - 18:32

    Merci beaucoup
    avatar
    louha
    FémininAge : 29Messages : 212

    le Sam 12 Avr 2014 - 16:07

    merci Very Happy
    avatar
    Lutine
    FémininAge : 29Messages : 101

    le Lun 14 Avr 2014 - 13:38

    Merci :)
    avatar
    Tekesuta
    FémininAge : 22Messages : 33

    le Mer 16 Avr 2014 - 23:35

    merci beaucoup!
    avatar
    shala
    FémininAge : 25Messages : 213

    le Ven 18 Avr 2014 - 13:21

    merci



    avatar
    Dooh-Nem
    FémininAge : 24Messages : 139

    le Sam 19 Avr 2014 - 13:37

    merci
    avatar
    Invité

    le Mar 22 Avr 2014 - 13:42

    Merci beaucoup :)
    Fallynouch
    FémininAge : 23Messages : 6

    le Ven 2 Mai 2014 - 3:01

    merci
    avatar
    Capouccino
    FémininAge : 19Messages : 165

    le Ven 9 Mai 2014 - 21:10

    MErci o/



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    Ailou ~3
    FémininAge : 17Messages : 61

    le Sam 10 Mai 2014 - 18:05

    Merci du partage ! :)
    avatar
    Buffdale
    MasculinAge : 23Messages : 13

    le Mer 14 Mai 2014 - 19:23

    Merci beaucoup pour ce code, je vais voir si je peux m'en servir un de ces quatre ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mar 30 Mai 2017 - 11:10