AccueilDernières imagesRechercherS'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 : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.99 €
Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

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

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 11 Jan 2014 - 5:11



    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
    Enidech
    Enidech
    MasculinAge : 33Messages : 39

    Sam 18 Jan 2014 - 19:59

    Bonjour !  Very Happy 

    Merci à toi, c'est génial, c'est exactement ce que je recherchais! Il est vrai que le retour en haut de page de l'onglet de Sparrow est gênant, en revanche j'adore son contenu, j'aimerais savoir faire le même genre de personnalisation haha ^^

    Cordialement, Dech.
    Noruenu
    Noruenu
    FémininAge : 31Messages : 123

    Mar 21 Jan 2014 - 23:04

      Merci ! :B
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Jeu 23 Jan 2014 - 9:05

    Très pratique, merci beaucoup !
    Watchaaah
    Watchaaah
    FémininAge : 26Messages : 22

    Mer 29 Jan 2014 - 17:41

    Superbe ! Merci beaucoup !
    Fox.andBlue
    Fox.andBlue
    FémininAge : 30Messages : 105

    Mer 29 Jan 2014 - 21:37

    Merci beaucoup pour le tuto!



    Bloc flottant latéral ouvrant "onclick" (javascript) 681640signafoxandblue
    mathou_inu
    mathou_inu
    FémininAge : 28Messages : 55

    Mer 29 Jan 2014 - 22:44

    Merci !



    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Ven 31 Jan 2014 - 10:05

    Merci pour ce code

    cordialement

    Patricia



    Patricia :)
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Ven 31 Jan 2014 - 17:32

    merci c'est toujours pratique ce genre de code Very Happy



    Bloc flottant latéral ouvrant "onclick" (javascript) 1424818313-sign-apoka
    Uther
    Uther
    MasculinAge : 27Messages : 93

    Sam 1 Fév 2014 - 2:40

    Merci
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Sam 1 Fév 2014 - 11:08

    merci



    Patricia :)
    Azzuen
    Azzuen
    FémininAge : 25Messages : 61

    Sam 1 Fév 2014 - 20:29

    Merci ~ 
    Valhalla
    Valhalla
    MasculinAge : 33Messages : 105

    Dim 2 Fév 2014 - 13:14

    Merci beaucoup
    Jamy
    Jamy
    FémininAge : 31Messages : 41

    Lun 3 Fév 2014 - 19:17

    Voyons voir ça ! :) merciii
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mar 4 Fév 2014 - 11:41

    Il y a un petit moment je cherchais ce genre de code! ^^
    Merci du partage! Very Happy
    -Dr3ams-
    -Dr3ams-
    FémininAge : 31Messages : 29

    Ven 7 Fév 2014 - 20:54

    Merci !
    EOS
    EOS
    MasculinAge : 31Messages : 34

    Jeu 13 Fév 2014 - 4:22

    Merci
    O'Daim
    O'Daim
    FémininAge : 28Messages : 116

    Jeu 13 Fév 2014 - 18:43

    Merci beaucoup !!
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Dim 16 Fév 2014 - 21:53

    Merci beaucoup !



    Bloc flottant latéral ouvrant "onclick" (javascript) Kit_si10
    CaféOlé
    CaféOlé
    MasculinAge : 35Messages : 355

    Lun 17 Fév 2014 - 10:33

    merci, je veux décortiquer pour voir comment ça marche x)




    Stitch56
    Stitch56
    FémininAge : 30Messages : 209

    Dim 23 Fév 2014 - 20:53

    Merci
    Mwet
    Mwet
    MasculinAge : 28Messages : 125

    Jeu 27 Fév 2014 - 7:24

    Merci beaucoup !
    avatar
    Løve
    MasculinAge : 28Messages : 189

    Jeu 27 Fév 2014 - 10:04

    Merci o/
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Sam 1 Mar 2014 - 16:52

    merciii =)
    Adonaï
    Adonaï
    FémininAge : 29Messages : 39

    Sam 1 Mar 2014 - 21:01

    Merci pour le partage =D !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:46