Problème onglets

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

Résolu Problème onglets

Message par CryingToYourHeart le Mer 27 Juin 2012 - 19:38

Bonjour,
Récemment j'ai installé un système d'onglets sur mon forum, d'abord sur mon forum test, puis sur mon véritable forum, seulement lorsque je l'ai installé les onglets ne se font pas, alors je ne sais pas si ça vient du fait que sur mon forum test il y a moins de catégories ou non, je ne sais pas. Je vous met toutes les informations pour savoir si j'ai fais quelque chose qui ne va pas:

Template:

Code:
 
 <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
      <td colspan="3" class="fondcat" nowrap="nowrap" width="100%"> {catrow.tablehead.L_FORUM} </td>
</tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"></td>
      <!-- END inc -->
 
      <td class="fondfo" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="70">
        <div class="cadcol"><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
   
                          </span></div>
      </td>
          <td class="fondfo" align="center" valign="top" height="70">
            <div style="width:100px";>
            <div class="cadcol" id="subforums"><span class="genmed">Navigation</span><br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
            </div>
            </td>
      <td class="fondfo" align="center" valign="top" height="70">
                  <div style="width:200px;">
                  <div class="cadcol">
                    <span class="gensmall">{catrow.forumrow.TOPICS}sujets et {catrow.forumrow.POSTS} messages <br /><br />
                      {catrow.forumrow.LAST_POST}</span><br /><br />
                  </div>
                  <div style="margin-top:-30px;" align="center">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div><br /></div>
      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><!-- END tablefoot --><!-- END catrow --><img src="http://img15.hostingpics.net/pics/709373cat2.png" alt="" height="142px" width="886px" /><br />

CSS:

Code:
/*ONGLETS*/
.fondcat{
background: url('http://img15.hostingpics.net/pics/414795cat3.png');
height: 142px;
width: 886px;
  text-align: center;
}
 
.fondfo{ background: #DEC0B4;
}
 
.cadcol{
  border: 1px solid lavender;
  background: lavender;
  border-radius: 20px;
  padding: 5px; margin: 5px;
  height: 110px;
  overflow-y: auto;
}
 
a.forumlink{
  display: block;
  text-align: center;
}
 
/*onglets catégories*/
#cat-onglets {
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 150px;
  position: absolute;
  top: 1400px;
  left: 20px;
  display: block;
}
 
.co-item {
  background: #D6C6C0;
  color: #F8EEE9;
  border: 1px solid  #D6C6C0;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fdf;
  border: 1px solid 000;
  color:#fff;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #DEC0B4;
  color: #F8EEE9;
  border:1px solid #DEC0B4; }
/*END*/

Javascript:

Code:
$(function(){
 
  var t;
 
  /* liste des onglets avec les catégories en faisant partie*/
  var onglets=  [
                          ["Parlons du forum",[0]],
                          ["Beginning",[1]],
                          ["Logements",[2]],
                          ["L'université",[3]]];
                          ["La côte",[4]]]];
                          ["La forêt",[5]]]]];
                          ["La ville",[6]]]]]];
                          ["La communication",[7]]]]]]];
                          ["Hors RPG",[8]]]]]]]];
                          ["Corbeille",[9]]]]]]]]];
 
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
 
  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= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
  /* 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" /> */
  $("td.fondcat").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));
  });
 
});

Merci à tous ceux qui voudrons bien m'aider Very Happy


Dernière édition par CryingToYourHeart le Mer 4 Juil 2012 - 18:01, édité 1 fois

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Jeu 28 Juin 2012 - 20:04

UP

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Ven 29 Juin 2012 - 20:23

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Dim 1 Juil 2012 - 15:43

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Lun 2 Juil 2012 - 16:32

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Mar 3 Juil 2012 - 16:36

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par CryingToYourHeart le Mer 4 Juil 2012 - 17:15

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème onglets

Message par Invité le Mer 4 Juil 2012 - 17:35

Bonjour,

Il y a un soucis de crochets dans le code JS Razz, essayez avec celui-ci:
Code:
$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partient */
  var onglets=  [
                        ["Parlons du forum",[0]],
                          ["Beginning",[1]],
                          ["Logements",[2]],
                          ["L'université",[3]],
                          ["La côte",[4]],
                          ["La forêt",[5]],
                          ["La ville",[6]],
                          ["La communication",[7]],
                          ["Hors RPG",[8]],
                          ["Corbeille",[9]]];
 
  /* 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" /> */
  $("td.fondcat").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));
  });
 
});

Vos onglets sont positionné très bas sur la page ( si je me souviens bien c'est parce que le message d'accueil était très long) vous pouvez modifier la hauteur dans e CSS s'ils sont positionnés trop bas par rapport aux catégories:
/*onglets catégories*/
#cat-onglets {
padding: 5px;
margin: 5px;
text-align: center;
width: 150px;
position: absolute;
top: 1400px;
left: 20px;
display: block;
}
Bien sincèrement.

Invité
Invité


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

Résolu Re: Problème onglets

Message par CryingToYourHeart le Mer 4 Juil 2012 - 18:01

Bonjour,

Oui je me disais aussi que c'était à ce niveau là Very Happy
Merci beaucoup ça marche super bien Very Happy

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart 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