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.

Le Deal du moment : -64%
HARPER SM200 White – Appareil à ...
Voir le deal
12.54 €

    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
    Hayate747
    Hayate747
    MasculinAge : 31Messages : 196

    Jeu 29 Jan 2015 - 11:15

    Merci !!
    Alumine
    Alumine
    FémininAge : 23Messages : 488

    Mer 11 Fév 2015 - 15:19

    Je crois que c'est exactement ce que je cherchais à comprendre Very Happy Merci !



    Alumine
    Eiffel01
    Eiffel01
    MasculinAge : 34Messages : 32

    Mer 11 Fév 2015 - 15:42

    Merci Very Happy
    Yuuchan
    Yuuchan
    FémininAge : 24Messages : 31

    Sam 21 Fév 2015 - 19:06

    Merci !
    Anonymous
    Invité

    Dim 22 Fév 2015 - 10:18

    Merci !
    MxPrime2
    MxPrime2
    MasculinAge : 26Messages : 81

    Mar 24 Fév 2015 - 19:33

    Super !
    Caine Lornan
    Caine Lornan
    MasculinAge : 39Messages : 84

    Mer 18 Mar 2015 - 21:06

    Merci
    Alcaline
    Alcaline
    FémininAge : 26Messages : 4

    Jeu 19 Mar 2015 - 11:13

    Merci :hug:
    Malf Claymore
    Malf Claymore
    FémininAge : 26Messages : 126

    Jeu 19 Mar 2015 - 13:16

    Merci beaucoup
    Celuna
    Celuna
    FémininAge : 30Messages : 133

    Ven 20 Mar 2015 - 18:27

    Merci pour ce superbe partage.
    erika02
    erika02
    FémininAge : 24Messages : 278

    Dim 22 Mar 2015 - 16:06

    Merci



    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 5 45054210
    chouchounette
    chouchounette
    FémininAge : 28Messages : 96

    Jeu 9 Avr 2015 - 1:53

    merci beaucoup !
    Carmina
    Carmina
    FémininAge : 34Messages : 429

    Jeu 9 Avr 2015 - 8:56

    cool merci
    tutox
    tutox
    MasculinAge : 39Messages : 22

    Jeu 9 Avr 2015 - 9:50

    merci
    Kathee
    Kathee
    FémininAge : 27Messages : 675

    Jeu 9 Avr 2015 - 15:26

    C'est super, merci beaucoup ! :)




    Bloc flottant latéral ouvrant "onclick" (javascript) - Page 5 Ncw4xQa
    • Venez donc voir ce petit petit fofo :heart:
    castamere rains
    castamere rains
    FémininAge : 25Messages : 16

    Dim 19 Avr 2015 - 20:52

    merci
    Crowley
    Crowley
    FémininAge : 24Messages : 68

    Dim 19 Avr 2015 - 22:13

    Merci beaucoup pour le code ça va beaucoup m'aider !
    Chanel.♥
    Chanel.♥
    FémininAge : 20Messages : 42

    Ven 24 Avr 2015 - 21:28

    Merci ♥
    Heah92
    Heah92
    FémininAge : 22Messages : 88

    Dim 31 Mai 2015 - 14:32

    merci Wink
    ~Nodoka~
    ~Nodoka~
    FémininAge : 23Messages : 185

    Lun 1 Juin 2015 - 15:42

    merci *est curieuse de voir le code*
    Filou
    Filou
    FémininAge : 29Messages : 162

    Dim 7 Juin 2015 - 15:45

    Bonjour,

    Ce tutoriel serait celui que je recherche depuis tant de jours ? °-°
    Je croise les doigts !

    Merci pour le partage ^^
    TiGraou
    TiGraou
    MasculinAge : 27Messages : 243

    Dim 5 Juil 2015 - 6:56

    Merci
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 29Messages : 315

    Mar 7 Juil 2015 - 10:20

    Merci ^^
    Mini007
    Mini007
    MasculinAge : 27Messages : 21

    Mer 8 Juil 2015 - 21:10

    merci Razz!
    Anonymous
    Invité

    Ven 14 Aoû 2015 - 22:43

    Merchi ! :)
    Contenu sponsorisé


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