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
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Dim 5 Oct 2014 - 16:49

    Merci, ils sont magnifiques é_è



    Just want to be yours.
    avatar
    Storminder
    MasculinAge : 21Messages : 56

    le Dim 5 Oct 2014 - 20:52

    Merci
    avatar
    skyfighter
    MasculinAge : 34Messages : 345

    le Jeu 16 Oct 2014 - 13:22

    merci





    avatar
    Del
    MasculinMessages : 110

    le Mar 21 Oct 2014 - 17:56

    Merci.



    « Run you clever boy and remember... »
    En ligne
    avatar
    Neymar
    MasculinAge : 18Messages : 138

    le Mar 21 Oct 2014 - 18:02

    Merci !
    avatar
    Mr Yo
    MasculinAge : 42Messages : 37

    le Dim 26 Oct 2014 - 12:08

    Merki tout plein cheers
    avatar
    Crépuscule de Lune
    FémininAge : 28Messages : 27

    le Ven 7 Nov 2014 - 21:54

    Merci beaucoup pour ce partage ^^




    avatar
    Arpège
    FémininAge : 18Messages : 104

    le Dim 30 Nov 2014 - 12:31

    Merci Very Happy




    Writers World commence à ouvrir !
    avatar
    âme
    FémininAge : 51Messages : 154

    le Dim 30 Nov 2014 - 13:56

    Merci :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Anguis
    FémininAge : 25Messages : 25

    le Ven 5 Déc 2014 - 18:39

    merci
    avatar
    zbou
    FémininAge : 23Messages : 83

    le Jeu 11 Déc 2014 - 13:01

    merci
    avatar
    Depp
    FémininAge : 26Messages : 298

    le Ven 12 Déc 2014 - 14:32

    Merci :)



    avatar
    1charlotte
    FémininAge : 15Messages : 196

    le Dim 14 Déc 2014 - 17:50

    Merci !
    avatar
    Banpaia
    FémininAge : 19Messages : 130

    le Mar 23 Déc 2014 - 18:44

    Merci beaucoup !!
    avatar
    Chocolakato
    FémininAge : 26Messages : 774

    le Ven 26 Déc 2014 - 12:21

    Mercibien !



    avatar
    Nevr0z
    FémininAge : 28Messages : 74

    le Mar 30 Déc 2014 - 17:10

    Merci :)
    avatar
    Millaby
    FémininAge : 21Messages : 43

    le Mar 30 Déc 2014 - 22:05

    Mercii !
    avatar
    LKD
    FémininAge : 26Messages : 21

    le Mar 6 Jan 2015 - 16:15

    intéressant merci !
    avatar
    Haniwa
    FémininAge : 22Messages : 206

    le Ven 9 Jan 2015 - 17:49

    Merci
    avatar
    Romann
    FémininAge : 23Messages : 183

    le Ven 9 Jan 2015 - 18:17

    Merci :)



    avatar
    Foudry
    MasculinAge : 16Messages : 30

    le Sam 10 Jan 2015 - 15:28

    Pratique, merci (:
    avatar
    British Cookie
    FémininAge : 26Messages : 34

    le Lun 12 Jan 2015 - 20:19

    Super, c'est pile ce que je cherchais.
    Je te remercie ^^
    avatar
    Akiyuki
    MasculinAge : 18Messages : 89

    le Mar 20 Jan 2015 - 3:14

    Merci !
    avatar
    P'tit loup
    MasculinAge : 34Messages : 435

    le Mer 21 Jan 2015 - 19:17

    Merci o/



    avatar
    Freya Lazare
    FémininAge : 29Messages : 110

    le Mar 27 Jan 2015 - 19:25

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Mai 2017 - 13:33