Décalage catégorie

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

Résolu Décalage catégorie

Message par CryingToYourHeart le Mar 31 Juil 2012 - 18:41

Bonjour,

J'ai installé un système d'onglets sur mon forum il y a peu, et il se trouve qu'un des onglets est un onglet réservé aux administrateurs et modérateurs. Sauf que quand on est membre et invité l'onglet s'affiche quand même et il décale tout les autres onglets d'un cran ce qui est assez gênant lorsqu'on parcours le forum.

J'aimerais donc savoir s'il était possible que cet onglet ne soit visible que par les administrateurs ?

Voici ci dessous ma structure pour les onglets:
Spoiler:

Le Javascript correspondant au code:
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));
  });
 
});

Et le code CSS:
Code:
/*ONGLETS*/
.fondcat{
background: url('http://img15.hostingpics.net/pics/662947cat3.png');
height: 198px;
width: 896px;
  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: 1000px;
  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*/

Merci à tout ceux qui voudront bien m'aider Very Happy


Dernière édition par CryingToYourHeart le Jeu 9 Aoû 2012 - 11:49, é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: Décalage catégorie

Message par CryingToYourHeart le Mer 1 Aoû 2012 - 18:41

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: Décalage catégorie

Message par CryingToYourHeart le Jeu 2 Aoû 2012 - 18:46

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: Décalage catégorie

Message par CryingToYourHeart le Ven 3 Aoû 2012 - 19: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: Décalage catégorie

Message par CryingToYourHeart le Sam 4 Aoû 2012 - 18:58

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: Décalage catégorie

Message par CryingToYourHeart le Dim 5 Aoû 2012 - 20:57

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: Décalage catégorie

Message par CryingToYourHeart le Lun 6 Aoû 2012 - 20:57

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: Décalage catégorie

Message par CryingToYourHeart le Mar 7 Aoû 2012 - 21:53

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: Décalage catégorie

Message par CryingToYourHeart le Mer 8 Aoû 2012 - 22:44

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: Décalage catégorie

Message par Scoubifitz le Jeu 9 Aoû 2012 - 2:59

@CryingToYourHeart a écrit:Bonjour,

J'ai installé un système d'onglets sur mon forum il y a peu, et il se trouve qu'un des onglets est un onglet réservé aux administrateurs et modérateurs. Sauf que quand on est membre et invité l'onglet s'affiche quand même et il décale tout les autres onglets d'un cran ce qui est assez gênant lorsqu'on parcours le forum.

J'aimerais donc savoir s'il était possible que cet onglet ne soit visible que par les administrateurs ?

Voici ci dessous ma structure pour les onglets:


Le Javascript correspondant au code:
Spoiler:
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));
  });
 
});

Et le code CSS:
Spoiler:
Code:
/*ONGLETS*/
.fondcat{
background: url('http://img15.hostingpics.net/pics/662947cat3.png');
height: 198px;
width: 896px;
  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: 1000px;
  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*/

Merci à tout ceux qui voudront bien m'aider Very Happy
bonsoir,

scratch

si j'ai bien compris , il y a le forum réservé à l'administration en premier ...

donc la numérotation devrait être décalée dans le script , comme ceci :
ADMIN
(0)
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8 )
(9)
(10)

pas besoin de mettre le premier forum en onglet , puisqu'il n'apparait pas aux membres , par contre il restera affiché au staff ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage catégorie

Message par CryingToYourHeart le Jeu 9 Aoû 2012 - 11:51

Finalement je les aient enlevés car ça me décalait tout

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