Ajout bouton dans la barre de navigation flottante

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout bouton dans la barre de navigation flottante

Message par @To le Lun 12 Oct 2015 - 22:06

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Bonsoir,

Je test en ce moment la barre de navigation flottante: http://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante , Merci Vivi pour cette géniale astuce ! Very Happy

Voila j'essaye d'y rajouter un bouton :

Code:
  customNav : '<a  href="/search?search_id=draftsearch"><Bloc-notes></a>',

Et rien n'y fait, le bouton n'apparaît pas! scratch l'adresse du bouton: href="/search?search_id=draftsearch"

Comment procéder svp pour le rajouter ? Par le CSS est-ce possible ?

Merci, bonne soirée à tous.


Dernière édition par To-DMEvo le Mar 13 Oct 2015 - 19:58, édité 1 fois

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 6:25

Salut To-DMEvo,

ce script devrait fonctionner :


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.

Code:

$(function(){
$('#pun-navlinks  li a.mainmenu[href="/"]').after('<li> <a class="mainmenu"href="/search?search_id=draftsearch">Bloc-notes</a></li>');
});
Penses à cliquer sur le bouton
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par @To le Mar 13 Oct 2015 - 7:35

Salut Milouze14,

Merci pour ce script.

Je l'ai testé, par contre il fait apparaître 2 fois le module de traduction sur la toolbar..
Je souhaiterais que le bouton bloc-notes soit positionné aprés profil et non visible par les visiteurs, est-ce possible ?

Voir sur mon forum d'essai: http://forumessai.superforum.fr/

Bonne journée, a+

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 16:12

Re,

remplaces le script par celui-ci:

Code:
$(function(){if (_userdata["session_logged_in"] == 1) 
$(function(){
$('#fa_sticky_nav li a.mainmenu[href="/profile?mode=editprofile"] ,#pun-navlinks  li a.mainmenu[href="/profile?mode=editprofile"]').after('<li> <a class="mainmenu"href="/search?search_id=draftsearch">Bloc-notes</a></li>');
      })});


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par @To le Mar 13 Oct 2015 - 18:18

Re,

Parfait pour le placement de "Bloc-notes" sur la barre de navigation flottante! et pour que les visiteurs ne voient pas ce bouton, merci Milouze14.

Reste le soucis du module de traduction qui apparaît en double sur la toolbar..

Résultat sur mon fourm d'essai: http://forumessai.superforum.fr/

Bonne soirée Very Happy

Edit :

Oups, cela doit venir d'ailleur.. désolé. Je cherche scratch

Edit 18h53:

Bloc-notes apparait 2 fois dans la barre de navigation du forum (non flottante)... Sad

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 19:07

Re,

Bloc-notes apparait 2 fois dans la barre de navigation du forum (non flottante)... Sad

Tu as su mettre le lien bloc note dans la barre de navigation ,
maintenant il faut le supprimer Very Happy , mais je ne peux malheureusement pas t'aider
sur ce point.

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par @To le Mar 13 Oct 2015 - 19:10

Oui c'est bon je viens de l'enlever Very Happy

Ce soucis est réglé Wink

Reste le double module de traduction, c'est souvent là que sa pêche quand il y a des modif grrr.

Je te remercie Milouze14

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 19:11

Re,
quel est le script pour la traduction et comment l'as tu placé ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par @To le Mar 13 Oct 2015 - 19:30

Il est placé dans un template, SCC et javascript..

Heureusement sur mon forum officiel le soucis n'existe pas, c'est l'essentiel.

Le java:

Code:
$(function(){$(function(){ $('#fa_right.fa_tbMainElement').after($('#google_translate_element').clone()); $('.traducteur').remove(); })});

Le SCC:
Code:
/*==========================================Traducteur toolbar=============================================*/

#pun-about #qjump {float: left;text-align: left;display: none;}
#google_translate_element{float: right;padding-top:2px;}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {float: right;}
.goog-te-menu-value {background-color:#fff !important;color:grey !important;}
.goog-te-gadget-simple { background-color:#fff !important;  font-size: 10px; display:block; padding-top: 0px;
padding-bottom: 0px;  cursor: pointer;  zoom: 1;  border-radius:6px;  }
body { top: 0 !important; }

Template Overal header:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />   
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   jQuery().ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(window).load(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>

<body>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main" style="z-index: 10000 !important;">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

  <!--===modif traducteur R-max ===-->
  <table class="traducteur"><tr><td>
    <div id="google_translate_element">
                           
</div><script type="text/javascript">
 function googleTranslateElementInit() {  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </td></tr></table>
  <!--===fin traducteur===-->
 
   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
            <div class="pun">
               <div id="pun-intro" class="clearfix">
                  <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

                  <!-- BEGIN switch_h1 -->
                  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
                  <!-- END switch_h1 -->

                  <!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
                  <!-- END switch_desc -->
               </div>
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

                                  <div class="searchbar"><script>
  (function() {
    var cx = '018298385879720744366:v9_h7bwe4ou';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        'http://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search></div>
                                 
               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                 </div>
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation -->

Edit

Partie du template concerné:

Code:
<!--===modif traducteur R-max ===-->
  <table class="traducteur"><tr><td>
    <div id="google_translate_element">
                         
</div><script type="text/javascript">
 function googleTranslateElementInit() {  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </td></tr></table>
  <!--===fin traducteur===-->

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 19:36

Re,
je viens de faire les modifications sur mon fofo de test et la barre de traduction est affichée qu'une seule fois
de mon côté Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par @To le Mar 13 Oct 2015 - 19:48

Re,

Ok, merci du test Very Happy

Le soucis se trouve peut être dans un autre code java.. à force de tout tester lol

Heureusement c'est mon forum de test!
Je finirai par trouver, cela fait parti de l'apprentissage Wink

Encore merci Milouze14, je te souhaite une bonne soirée thumright

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout bouton dans la barre de navigation flottante

Message par Milouze14 le Mar 13 Oct 2015 - 19:57

Re,
bonne continuation cher ami,
bonne soirée également.

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum