Codes boutons .....

[Luluwebmaster]

Bonjour a tous !
Bon voila ,
y'as pas très longtemps j'ai vu un sujet et dans se sujet , quelqu'un avait poster se code :

Code:


$(function(){
     
          /* variable temporaire */
          var t;
     
          /* liste des onglets avec les catégories en faisant partie */
          var onglets=  [
                                  ["cat1",[0]],
                                  ["cat2",[1]],
                                  ["cat3",[2]],
                                  ["cat4",[3]],
                                  ["cat5",[4]],
                                  ["Tout le forum",[0, 1, 2, 3, 4 ]]];
     
          /* fonction pour sélectionner un onglet d'après une string s */
          var getOnglet= function(s) {
              var j;
              for(j=0;j<onglets.length;j++)
                if(JSON.stringify(onglets[j])==s) return onglets[j];
              return !1;
          };
     
          /* fonction pour voir si un index de catégorie i est dans un onglet d */
          var inOnglets= function(d,i) {
              var j;
              for(j=0;j<d[1].length;j++)
                if(d[1][j]==i) return !0;
              return !1;
          };
     
          /* onglet sélectionné par défaut */
          var songlet= onglets[0];
          /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
          var save= false;
          /* temps pour slider en ms */
          var timeslide= 800;
     
          /* récupération de l'onglet sauvé d'une autre fois */
          if(save && window.localStorage)
              if(t=localStorage.getItem("onglets"))
                if(t=getOnglet(t))
                    songlet= t;
     
          /* entoure les catégories d'un <div class="cat-table" /> */
          $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
     
          /* affichage de l'onglet en cours */
          $(".cat-table").filter(function(index) {
            return !inOnglets(songlet,index);
          }).hide();
     
          /* ajout du div des onglets */
          $(".cat-table:first").before('<div id="cat-onglets"></div>');
     
          /* ajout des onglets dans le div */
          for(t=0;t<onglets.length;t++)
          {
              $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
          }
     
          /* clic sur un onglet */
          $("#cat-onglets .co-item").click(function(){
              $("#cat-onglets .co-actif").removeClass("co-actif");
              $(this).addClass("co-actif");
              var o= onglets[$("#cat-onglets .co-item").index(this)];
              $(".cat-table").not($(".cat-table").filter(function(index) {
                return inOnglets(o,index);
              }).slideDown(timeslide)).slideUp(timeslide);
              if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
          });
     
        });



Ma demande , se serais savoir si c'est possible de faire la même chose sur mon forum
mais en modifiant quelques trucs :
Il faudrait mettre que deux boutons :


image :


le lien ou il mène :
http://ekoloko.lebonforum.com/forum

image:

le lien ou il mène :
http://leblokolo.lebonforum.com/h4-page-ekoloko-land

Ce que je voudrais c'est que les boutons sois placer ici :



Et que quand on clic sur l'un des boutons , ça ne changer pas de page ( comme dans le code exemple )

Voila

Merci d'avance !

[Arlem]

Bonjour,

Je ne comprends pas ce que vous voulez dire par "ça ne change pas de page", vous auriez un exemple de forum où on pourrait voir le script en action ?
Parce que si vous êtes dans un sous forum et que vous cliquez sur le forum, je ne vois pas comment faire pour que ça ne change pas de page... ^o)

[Luluwebmaster]

Bonjour ,
Un exemple :
http://leblokolo.lebonforum.com/

(c'est mon forum de test )

[Luluwebmaster]

Up

[Automne]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

[Luluwebmaster]

Up

[Arlem]

Je doute que ce soit possible, ou du moins pas avec le script que vous avez donné dans le premier message car dans ce cas vous essayiez d'inclure une page externe. La solution la plus facile reste de faire une redirection vers les autres pages comme vous avez fait pour les autres boutons.

[Luluwebmaster]

Bonjour ,
ok ,

et si on fais comme l'autre , quelle code un faudrait mettre ?


Merci d'avance

[Arlem]

Dans ce cas il faut mettre ceci là où vous souhaitez qu'ils apparaissent :

Code:

<a href="/forum"><img src="http://nsa30.casimages.com/img/2012/12/10/121210081132106585.png" border="0"></a><a href="http://leblokolo.lebonforum.com/h4-page-ekoloko-land"><img src="http://nsa30.casimages.com/img/2012/12/10/12121008115982194.png" border="0"></a>

[Luluwebmaster]

Re ,
Ok mais je dois le mettre ou exactement ? :p

[Arlem]

Etant donné que vous avez déjà modifié votre template overall_header, copiez/collez le nous (entre les balises de Code) qu'on ne vous fasse pas faire de modifications qui en annuleraient d'autres.

[Luluwebmaster]

Je vous donne mon code de template overall_header ? Si c'est cela , le voila :

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 w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).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);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#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[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         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}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, 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 background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.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">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            
                      <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

                       
                                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                     
                                 
                                            <tr>
                                              <td align="{MENU_POSITION}"{MENU_NOWRAP}>
                                              <span class="M14_accueil"><img src="http://nsa32.casimages.com/img/2012/12/08/121208081534287136.png"></span><br />
                                              <span class="M14_btn-youtube">
                                              <a href="https://www.youtube.com/channel/UCdWr7uOcd6xWsBKZf3vS1hg?feature=watch" target="_blank">
                                              <img src="http://nsa32.casimages.com/img/2012/12/07/12120710411765830.png" ></a></span>
                                              <span class="M14_btn_google"><a href="https://plus.google.com/u/0/b/116048942590188998318/116048942590188998318/posts" target="_blank">
                                              <img src="http://nsa31.casimages.com/img/2012/12/08/mini_121208075739237636.png" ></a></span>
                                              <span class="M14_btn_facebook"><a href="http://www.facebook.com/pages/Forum/383554848390234?ref=hl" target="_blank">
                                              <img src="http://nsa31.casimages.com/img/2012/12/07/121207104241866801.png" ></a></span><br />
                                            {GENERATED_NAV_BAR}</td>
                                            </tr>
                                            </table>
                                   
                                   
            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <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>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <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>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->



Voila

Merci d'avance !

[Arlem]

Oui c'était bien ça.
Juste après {GENERATED_NAV_BAR}, ajoutez :

Code:

<br/>
<a href="/forum"><img src="http://nsa30.casimages.com/img/2012/12/10/121210081132106585.png" border="0"/>
</a>
<a href="http://leblokolo.lebonforum.com/h4-page-ekoloko-land">
<img src="http://nsa30.casimages.com/img/2012/12/10/12121008115982194.png" border="0"/>
</a>

Je n'ai pas mis que les liens s'ouvrent dans une nouvelle fenêtre, ce qui se rapproche au plus de ce que vous souhaitiez à l'origine.

[Luluwebmaster]

Bonjour ,
je ne vois pas ou est {GENERATED_NAV_BAR} ..... :p

J'ai aussi une question , es-que les boutons serons a la place que j'ai mis d'en l'image pour montrer ?

Merci d'avance !

[Arlem]

Si vous ne le trouvez pas faites une recherche dans le template, ça vous y emmenera directement.
Ce sera au même endroit que sur l'image oui, à la différence que ça décalera la pub vers le bas au lieu de passer au dessus.

[Luluwebmaster]

ça marche nickel !!!


Un grand merci a vous !