Problème avec un script Onglet

[popoliline]

Bonjour à tous,

Toujours sur mon codage du futur design d'un forum. Cette fois c'est un script onglet qui fait des siennes. Sur le forum test (en lien, car l'actuel forum est en hiatus le temps qu'on installe le design) tout marchait comme il faut. En transférant le codage nous avons eu des bugs.

Parmi ceux-ci :

- l'onglet 1 ne s'affiche pas en totalité lorsque l'on arrive sur le forum, il faut cliquer pour qu'il se développer, or nous voudrions que "tout" soit visible en arrivant sur le forum.
- L'image de bas de catégorie a disparu dans l'onglet 1, elle n’apparaît qu'au bas de la toute dernière catégorie, hors nous voudrions qu'elle apparaisse à la fin de chaque catégorie de l'onglet : http://hpics.li/e201776

EDIT: 18h28 le 19/09
Le CSS uniquement ce que j’ai ajouté, pas le CSS en entier

Code:



/*POW*/   

td.catHead, th.thHead {
    border-width: 0px 0px 0px;
    font-size: 12px;
  border-color:#D7D7D7!important;
}
td.catBottom, th.thBottom {
    border-width: 0 1px 1px;
  border-color:#D7D7D7!important;
}
.espacetrop{
 margin-top: 0px;
    margin-bottom: -5px;
  background-color:#D7D7D7;
}


.espacetrop1{
 margin-top: -10px;
      margin-bottom: -10px;    line-height: -5px;
background-color:#D7D7D7!important;
}

.postbody {
    display: block;
    padding-left: 15px;
  padding-right: 15px;
    text-align:justify;
}

.forumline{
  border-color:#D7D7D7!important;}

/*Boite MP*/
.pourcentback {
width:65Opx!important;
}

/* PA */
 
/* image de fond */
 
.en_tete{
position:relative;
width:750px;
height:568px;
background-image:url('http://i.imgur.com/mPt95CH.png');
margin:auto;
overflow:hidden;
}
 
/* case contexte */
 
.en_tete .contexte{
position:absolute;
width:232px;
height:153px;
top:123px;
left:50px;
padding:10px;
overflow:auto;
font-family:arial;
font-size:13px;
letter-spacing:0px;
line-height:12px;
text-align:justify;
}
 
/* case partenaire */
 
.en_tete .partner{
width:230px;
height:70px;
position:absolute;
left: 365px;
top: 208px;
text-align:center;
}
 
/* case news */
 
.en_tete .news{
width:213px;
height:130px;
position:absolute;
left: 38px;
top: 318px;
overflow:auto;
z-index:1;
}
 
/* case map */
/* fait avec une image coulissante */
 
.en_tete .map{
width:235px;
height:235px;
background:url(http://imgur.com/qjqbdjS.png) left;
position:absolute;
left: 242px;
top: 293px;
padding:0;
overflow:hidden
}
.map a {display: block;
position:absolute;border-radius:50%;}
 
#staten {left: 0px; top: 147px; width: 88px; height: 88px;}
#queens {left: 122px; top: 67px; width: 112px; height: 137px;}
#brook {left: 88px; top: 99px; width: 82px; height: 95px;}
#bronx {left: 133px; top: 4px; width: 74px; height: 74px;}
#manhat {left: 74px; top: 24px; width: 86px; height: 98px;}
 
#staten:hover,#queens:hover,#brook:hover,#bronx:hover,#manhat:hover {
background: url(http://imgur.com/qjqbdjS.png) no-repeat;
border-radius:0px;}
 
#staten:hover {background-position:-235px -147px;}
#queens:hover {background-position:-357px -67px;}
#brook:hover {background-position:-558px -99px;}
#bronx:hover {background-position:-603px -4px;}
#manhat:hover {background-position:-779px -24px;}
 
/* case staff */
 
.en_tete .staff{
width:230px;
height:280px;
padding:5px;
position:absolute;
left: 480px;
top: 290px;
overflow:auto;
}
 
/*ONGLET STAFF PA*/
 
/* .systab .tab => les onglet */
 
.systab .tab {
padding: 2px 10px;
margin-left: 10px;
color: #000;
font-family: 'Exo', sans-serif;
cursor: pointer;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
 
.systab .contents {
width: 220px;
height: 180px;
text-align: center;
color: #000;
}
 
/*ecriture titre staff*/
 
.pseudostaff{ font-family: 'Yellowtail', cursive;
font-size: 22px; letter-spacing:-1px;
}
.dcstaff{
font-family: 'Exo', sans-serif;
font-size: 10px;
letter-spacing:0px;
}
.rangstaff{
font-family: 'Expletus Sans', cursive;
color:#F9F3F2;
font-size:16px;
letter-spacing:-1px;
}
 
/* style des onglets si ils sont à gauche ou à droite */
 
.systab.s_float .tab,.systab.s_float .tab {
display: block;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
 
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}
 
/* case du bas */
 
.lien_du_bas{
position :absolute;
left:70px;
top:538px;
}
.lien_du_bas a{
display:inline-block;
height:30px;
}
/* FIN PAGE ACCUEIL */

/*listing partenaire*/

.ville {font-family: pathway gothic one;font-size: 28px;color: #A2669D;text-align: center; text-transform: uppercase;margin-bottom: 10px;}
.quartier{font-family: 'Exo', sans-serif; color:#272727; letter-spacing:-1px; font-size: 15px;
  text-transform: uppercase; padding-top: 10px; text-align:; }
.quartier1 { position:relative; width:150px; height:150px; border:2px solid #C7B6C9;
  margin-left: 30px; margin-top: 0px;
  -moz-border-radius:200px; border-radius:200px; }

.quartier1 img { position: relative; left: 0px; word-wrap: break-word;
  -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out; -webkit-filter: grayscale(0); }

.quartierfond { position: absolute; top: 7px; left: 7px;
  width: 135px; height: 135px; -moz-border-radius:200px; border-radius:200px;
  background: rgba(255,255,255,0.85); box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.8); -webkit-transform: rotate(270deg) scale(0);
  -moz-transform: rotate(270deg) scale(0); transform: rotate(270deg) scale(0); opacity: 0;
  -webkit-transition: 0.6s all ease-in-out;
  -moz-transition: 0.6s all ease-in-out; transition: 0.6s all ease-in-out; }

.quartierinfo {position: absolute; top: 0px; left: 0px; font-family: source sans pro;
  font-size: 11px; margin-top: 25px; line-height: 100% ; text-align : center; word-wrap: break-word;
  color : black; text-transform: lowercase; letter-spacing: 0px; height:70px; width :125px; overflow:auto;}

.quartierinfo span { background: ; padding: 0px; display: inline-block; word-wrap: break-word;
  font-size: 9px; letter-spacing:0px;
  margin-bottom: 0px; box-shadow: 0px 0px 0px rgba(0,0,0,0.1); }

.quartier1:hover .quartierfond { -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; }

.quartier1:hover img { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); }
.normalname, .unreg { display: none!important; }

/*présentation du staff*/

.picstaff{ width: 430px; height: 180px;
  background: white; color: #737373;
  overflow: auto; font: 11px georgia;
  text-align: justify; padding: 10px;
  opacity: 0; -webkit-transition:all 0.7s ease-in-out;
  -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
  -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
.picstaff:hover { opacity: .9; }
.picstaff::-webkit-scrollbar { width: 5px; }
.picstaff::-webkit-scrollbar-track  { background-color: #eee; }
.picstaff::-webkit-scrollbar-thumb { background-color: #2A7690; }



/* QEEL */


.montab1 .tab {
  padding: 2px 10px;
  color: #000;
  border: 1px solid #;
  cursor: pointer;
}
.montab1 .contents {
  width:  10%;
  margin-right: 30px;
  border: ;
  background: ;
}
.montab2 .contents {
  width:  40%;
  border: none;
  background: #efe;
  box-shadow:0 0 10px #aba;
  border-radius: 20px;
}
.montab2 .tab.selected {
  color: red;
  background: ;
}
.montab1 .mononglet4 {
  color: blue;
}
.montab1 .mononglet7 {
  color: orange;
}
   
        .fond {width:750px; height:373px;
  background-image:url(http://nsa37.casimages.com/img/2015/08/27//150827080233981055.png);
          margin:auto;text-align:center;
        background-repeat : no-repeat;position:relative}
   
/*groupes*/
.fond a[href^="/g"]{
  background:;
  position:absolute;
  left:302px;
  display:inline-block;
  height:20px;
  width:130px
}
.fond a[href^="/g38"]{
  top:87px;
}
.fond a[href^="/g39"]{
  top:240px;
}
.fond a[href^="/g40"]{
  top:65px;
}
.fond a[href^="/g41"]{
  top:219px;
}
.fond a[href^="/g42"]{
  top:109px;
}
.fond a[href^="/g43"]{
  top:261px;
}
.fond a[href^="/g44"]{
  top:282px;
}
.bloc-onglets{
  position:relative;
  width:px;
  top:5px;
  left:438px
}
        .boite_1_qeel {
    position: relative;
    top: 8px;
    left: 30px;
    width: 230px;
    height: 130px;
    background-color: #;
    border-bottom: 1px solid #;
    border-left: 1px solid #;
    border-right: 1px solid #;
    border-top: 1px solid #;
    color: #292929!important;
    display: block;
    font-size: 11px;
    overflow: auto;
    text-align: justify;
    transition: all .8s;
    font-size:11px;text-align:justify; overflow:auto;  display: block;
          color : #292929!important; background-color:#;
          text-transform:uppercase;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
  transition:all 0.8s; }
   
        .ilwena {height:55px;overflow:auto;}
 
        .boite_1_qeel::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
   
        .boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
   
        #kumao {inline:block;}
        #blabla {inline:block;}
        #blibli {inline:block;}
        #blublu {inline:block;}
   
        .onestla { font-size:11px;text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;
    position: relative;
    left: 30px;
    width: 230px;
    top: 8px;
    height: 130px;
}
   
        .onestla::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
   
        .onestla::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
   
        .onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
   
        .boite_qeel_credit {width:200px;height:260px;padding:5px;position:absolute;top:0px;
          left:38px;top: 50px; text-align:justify; overflow:; display: block;
          color : #292929!important; background-color:#;
          text-transform:; line-height: 100%;  font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:7px;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
   
        /*posteur et voteur du mois qeel*/
        .posteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .posteur:hover { opacity: .9; }
        .posteur::-webkit-scrollbar { width: 5px; }
        .posteur::-webkit-scrollbar-track  { background-color: #eee; }
        .posteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

.voteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial; margin-top: -14px;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .voteur:hover { opacity: .9; }
        .pvoteur::-webkit-scrollbar { width: 5px; }
        .voteur::-webkit-scrollbar-track  { background-color: #eee; }
        .voteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

/**annulation row1 pour le queel**/
#lastco .row1 {
background: none;
}
#anniv .row1 {
background: none;
}
/**fin annulation**/

.passage {
    color: #F2EDE6!important;
    text-decoration: none;
    -webkit-transition: color .6s ease-in;
    -moz-transition: color .6s ease-in;
    -o-transition: color .6s ease-in;
    transition: color .6s ease-in;
}

a, a:link, a:hover {
text-decoration: none!important;
}

.conteneur_categories{
  text-align:center;
  position: relative;
}
#centrage{
text-align:center;
  position: relative;
    right: 190px;
}

.onglet {
text-align:center;
list-style-type: none;
float: right;}

.onglet li {text-align:center;float: left;}

.onglet li:hover{text-decoration:none;}

    .onglet li a {
          display:block;
          text-decoration:none;
          list-style-type: none;
          }

    .onglet li a: hover {
          text-decoration:none;
          list-style-type:none;
        }

    .onglet_actif { text-align:center;}

    .onglet_nactif {text-align:center; }


td.bas_cate{
    background-image:url('http://nsa38.casimages.com/img/2015/09/06//150906122051395858.png');
  width:800px;
  background-repeat:no-repeat;
    height:100px;  }


.boitepa {
top: 40px;
    left: 45px;
    width: 240px;
    position: absolute;
}

.itboite {
    position: relative;
    font-family: verdana;
    color: #ffffff;
    font-size: 12px;
}



Le template index_box

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>
<!-- DEBUT MODIF ONGLETS --><div id="centrage"><ul class="onglet"><li onclick="change_cat('0-1-2-3-4-5-6');" class="onglet_actif" id="cat_0"><img src="http://i.imgur.com/ue1C64h.png"></li> <li onclick="change_cat('7-8');" class="onglet_inactif" id="cat_1"><img src="http://i.imgur.com/XF5vuQj.png"></li></ul>
  </div>
<script type="text/javascript">
<!--

var i = 0;
 
var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7','8');
 
function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('ul.onglet li').removeClass('onglet_actif').addClass('onglet_inactif');
  $('ul.onglet li#cat_'+num).removeClass('onglet_inactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script>   
 
  <!-- FIN MODIF ONGLETS -->

  <center>  <div id="conteneur_categories"><tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> <center><img src="http://nsa38.casimages.com/img/2015/09/06//150906122051552189.png" class="width:750px"><div class="titre_cat" style="margin-bottom:-2px;">{catrow.tablehead.L_FORUM} </div></center></th></tr>
        <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
    <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <center><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}></center>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr><div class="espacetrop1"></div>
      <td class="row1_over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" style="background-color:#D7D7D7;">
       

                 
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">   
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>

                    </h{catrow.forumrow.LEVEL}>

                    <center>
                      <div class="statsyc">Les Youcanniens ont ouvert  {catrow.forumrow.TOPICS} sujets et ont postés {catrow.forumrow.POSTS} messages.</div>
                  <table cellspacing="0" cellpadding="0" >
                   
                    <tbody><tr><td>
                     

                      <div class="babyilu">                        {catrow.forumrow.LAST_POST}
                        </div>
                   
                   
                      </td><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                      </td><td style="vertical-align: top;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="sowakemeup" />

                        </td></tr></tbody> </table></center>
          <div class="espacetrop">          <div id="liencate" style="color:#C7B6C9;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div></td>
 
<!-- END forumrow -->
    <!-- BEGIN catfoot -->
  <tr>
    <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="0"><img src="{SPACER}" alt="" height="0" width="0" /></td>
  </tr>
          <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
   
       
    </table></div>  </center> <!-- END tablefoot --><!-- END catrow -->
    <div class="espacetrop"></div>
 <table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>         
   


   
   

Merci par avance de votre aide !

[popoliline]

Un petit up ?

[popoliline]

UP ?

[popoliline]

UP Please !

[popoliline]

Quelqu'un aurait une idée ?

[popoliline]

help!!!

[popoliline]

Quelqu'un pourrait-il nous aider ?

[popoliline]

UP s'il vous plait !

[popoliline]

Up please, le forum attends désespéramment votre aide pour réouvrir

[popoliline]

s'il vous plait ?

[popoliline]

Je up de nouveau :'(

[popoliline]

Personne ? Nous sommes vraiment perdue pour le coup.

[popoliline]

Une idée quelqu'un ? Please ?

[Evaliah]

Bonjour popoliline,

Je vais essayer de te donner quelques pistes mais ce n'est pas dit que je puisse te débloquer entièrement, enfin ce sera déjà ça.

Tout d'abord peux-tu donner le lien exact du forum où se produit le bug ?

Ensuite il serait plus ergonomique d'avoir le JS séparé du template pour le manipuler plus facilement et l'activer/désactiver au besoin, ce n'est pas obligatoire bien sûr mais je pense que ce serait mieux

[popoliline]

Déjà merci de ton aide, même si tu ne résous qu'un problème, ce sera toujours un pas de plus vers la réouverture !

Je veux bien te donner le lien malheureusement le forum est en "maintenance" donc fermé aux visiteurs vu que nous sommes en MAJ (par contre le forum test reste accessible ici, c'est le même code : http://fluffy-minion.forumactif.com/)
Je veux bien séparer mais en toute honnêteté je serai pas quoi prendre dans le lot, j'ai peur d'aggraver mes beugs !

[Evaliah]

Yop !

Si le code marche parfaitement sur le forum de test et pas sur l'autre il faudrait que je puisse voir l'autre pour avoir le problème sous les yeux
Est-il possible de l'ouvrir le temps de s'occuper des bugs ?
De plus sur le forum de test il n'y a qu'une seule zone visible "invités & News" et si c'est le cas aussi sur l'autre forum il faudrait temporairement donner accès à un peu plus pour voir ce qui cloche.

En dehors de ça as-tu bien vérifié dans le panneau de configuration que toutes les options étaient bien les mêmes d'un forum sur l'autre ? En particulier dans Affichage => Page d'accueil => Structure et hiérarchie ?
Parfois une petite différence dans certaines options peut causer de grands problèmes inattendus !

Pour la partie Js a priori c'est celle-ci dans ton template :

Code:

<script type="text/javascript">
<!--

var i = 0;
 
var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7','8');
 
function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('ul.onglet li').removeClass('onglet_actif').addClass('onglet_inactif');
  $('ul.onglet li#cat_'+num).removeClass('onglet_inactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script>   

Dans un premier temps tu peux au moins mettre cette partie là :

Code:

var i = 0;
 
var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7','8');
 
function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('ul.onglet li').removeClass('onglet_actif').addClass('onglet_inactif');
  $('ul.onglet li#cat_'+num).removeClass('onglet_inactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

Dans un javascript séparé (dans Modules de ton panneau d'administration), pour lequel tu cocheras : "Sur l'index".
(En vérifiant que "Activer la gestion des codes Javascript" est bien sur "Oui")
Pour cette manipulation je te conseille de la faire d'abord uniquement sur ton forum de test où tout fonctionne comme tu veux pour être sûre de toi, et si ça continue à fonctionner faire la même chose sur l'autre.
Il faut que tu fasses bien attention à ne copier que la partie que je t'ai donnée dans ton JS séparé, pas les balises d'ouverture/fermeture de script.

Le bout de code mentionné en premier pour ton template sera ainsi réduit à :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script> 

(Le reste du template n'est pas à changer bien sûr)


Voilà, déjà avec ça ce sera plus facile pour y voir clair au cas où ta vérification des options forum test/bon forum n'ait pas déjà réparé le problème

[popoliline]

Encore merci de ton aide c'est un vrai soulagement.

En fait en rajoutant des catégories sur mon forum test je me suis rendu compte que tout ne marchait pas comme il faut (j'avais pas prêté attention à ce détail xD° Je t'ai déjà débloqué les permissions du forum test (normalement tu peux tout voir là ?) et je demande à mes co admins (qui m'ont donné l'accès au compte fonda pour le codage, je ne suis qu'une simple membre actuellement) si on peut te débloquer l'accès au forum un petit moment (en enlevant le hiatus)

Alors concernant tes demandes : pour les structures et hiérarchies tout est identique. J'ai également fait la modif de JS et ça fonctionne encore maintenant qu'on a isolé le code dans le template.

Ce qui donne ça :

Code:

<table width="100%" border="0" cellspacing="1" 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>
<!-- DEBUT MODIF ONGLETS --><div id="centrage"><ul class="onglet"><li onclick="change_cat('0');" class="onglet_actif" id="cat_0-1"><img src="http://i.imgur.com/ue1C64h.png"></li> <li onclick="change_cat('1-2-3-4');" class="onglet_inactif" id="cat_2-3-4"><img src="http://i.imgur.com/XF5vuQj.png"></li></ul>
  </div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script>   
 
  <!-- FIN MODIF ONGLETS -->

  <center>  <div id="conteneur_categories"><tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> <center><img src="http://nsa38.casimages.com/img/2015/09/06//150906122051552189.png" style="margin-left:0px;"><div class="titre_cat">{catrow.tablehead.L_FORUM} </div></center></th>
        </tr>
   
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <center><h{catrow.cathead.LEVEL} class="hierarchy"><br /><br /><br />
            <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}></center>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
     
     
      <td class="row1_over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
       

                 
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">   
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>

                    </h{catrow.forumrow.LEVEL}>

                    <center>
                      <div class="statsyc">Les Youcanniens ont ouvert  {catrow.forumrow.TOPICS} sujets et ont postés {catrow.forumrow.POSTS} messages.</div>
                  <table cellspacing="0" cellpadding="0" >
                   
                    <tbody><tr><td>
                     

                      <div class="babyilu">
                        <br>
                        {catrow.forumrow.LAST_POST}
                        </div>
                   
                   
                      </td><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                      </td><td style="vertical-align: top;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="sowakemeup" />

                        </td></tr></tbody> </table></center>
                    <div id="liencate" style="color:#C7B6C9">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                                 

                     
      </td>
                   

  <!-- END forumrow -->
    <!-- BEGIN catfoot -->
  <tr>
   
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
          <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
   
       
    </table></div>  </center> <!-- END tablefoot --><!-- END catrow -->
   
 <table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>         
   
 

[Evaliah]

Re,

Sur ton forum de test en invitée je ne vois que ça comme catégorie :



Du coup je n'ai pas le bug dont tu parles, peux-tu faire en sorte que je voie les mêmes catégories que toi (sauf s'il y en a des vraiment très secrètes) ?

[popoliline]

Bizarre je regarde .... En invité je vois tout moi. J'ai peu être pas précisé que le script onglet s'active avec les boutons suivant. En fait il faut cliquer là pour aller vers les autres parties du forum : https://2img.net/r/hpimg15/pics/518297Sanstitre1.png

[Evaliah]

Oula en effet ce n'est pas intuitif !
D'autant plus que les boutons pour aller d'une catégorie à l'autre n'ont pas de curseur particulier dessus donc quand on ne connaît pas leur fonction on ne peut pas deviner...
Enfin bon la question n'est pas là

Donc si je comprends bien là quand je suis sur la page d'accueil je suis censée voir Zone invités & News et Catégorie essai alors qu'on ne voit que Zone invités & News c'est bien ça ?


Si c'est ça :

Pour la première catégorie (Zone invités & News) le code va écrire :

Code:

<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >

Et pour la seconde il va écrire :

Code:

<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">

Pourquoi ?

Parce-que tu as ceci :

Code:

if(nom_cat[compteur_cat] == nom_cat[0])

C'est à dire qu'il n'écrira la première "solution" (donc sans le display: none) que s'il s'agit de la catégorie 0.
Or toi tu veux que s'affichent d'emblée les catégories 0 et 1.

Donc je préconiserais ceci :

Code:

if(nom_cat[compteur_cat] == nom_cat[0] || nom_cat[compteur_cat] == nom_cat[1])

A la place du petit bout que j'ai cité juste au dessus.

Tu peux déjà essayer ça et me dire ce que ça donne ?

[popoliline]

Tu es géniale ça fonctionne sur le forum test et sur le forum principal j'arrive pas à croire que ce soit enfin résolu ! L'ensemble du staff te remercie de nous avoir dépanné de ce premier problème !!

Par contre toujours le beug d'affichage du bas des catégories ici : http://www.hostingpics.net/viewer.php?id=802429Sanstitre3.jpg . Tu aurais une idée ?

[Evaliah]

Yop,

Je suis ravie que le problème principal soit résolu alors

Pour le bas des catégories c'est ce code qui va le générer :

Code:

<table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>

Comme il est placé tout à la fin du template il ne va se placer qu'une fois dans le code généré par celui-ci, à la fin donc, et non à la fin de chaque catégorie.

Je pense que tu peux déjà essayer de le placer plutôt ici :

Code:

<!-- BEGIN catfoot -->
  <tr>
    <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="0"><img src="{SPACER}" alt="" height="0" width="0" />
<table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>
</td>
  </tr>
          <!-- END catfoot -->

Tu peux me dire ce que ça donne en faisant ça ?
(Je ne connais pas par coeur toutes les boucles FA et je n'ai pas de forum de test de disponible actuellement pour tester)

[popoliline]

J'ai fais une petite danse de la joie quand j'ai vu que ça fonctionnait. Je pense que mon père me prends pour une folle maintenant mdr

Alors quand j'essaye de remplacer il me dit "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte."

[Evaliah]

Tiens ça c'est curieux...

Tu peux essayer à cet endroit à la place ?

Code:


<table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>
      </td>
                 
 
  <!-- END forumrow -->

[popoliline]

ça marche pas

EDIT du 10/10, à 11h54 : en reprenant le code à zéro je suis arrivée a afficher les bas de catégories pour chaque catégorie mais ... quand je passe sous un autre onglet par exemple 2075 j'obtiens ça : https://2img.net/r/hpimg11/pics/864280Sanstitre2.png

voici le "nouveau template" :

Code:

<table width="100%" border="0" cellspacing="1" 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>

<!-- DEBUT MODIF ONGLETS --><div id="centrage"><ul class="onglet"><li onclick="change_cat('0-1-2-3-4-5-6');" class="onglet_actif" id="cat_0"><img src="http://i.imgur.com/ue1C64h.png"></li> <li onclick="change_cat('7-8');" class="onglet_inactif" id="cat_1"><img src="http://i.imgur.com/XF5vuQj.png"></li></ul></div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script>   
 
  <!-- FIN MODIF ONGLETS -->

 <center>  <div id="conteneur_categories"><tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> <center><img src="http://nsa38.casimages.com/img/2015/09/06//150906122051552189.png" class="width:750px"><div class="titre_cat" style="margin-bottom:-2px;">{catrow.tablehead.L_FORUM} </div></center></th></tr>
        <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
    <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <center><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}></center>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow --> <center>
  <tr class="bordureforum"><div class="espacetrop1"></div>
    <td class="row1_over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" style="background-color:#D7D7D7;">
       

                 
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">   
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>

                    </h{catrow.forumrow.LEVEL}>

                    <center>
                      <div class="statsyc">Les Youcanniens ont ouvert  {catrow.forumrow.TOPICS} sujets et ont postés {catrow.forumrow.POSTS} messages.</div>
                  <table cellspacing="0" cellpadding="0" >
                   
                    <tbody><tr><td>
                     

                      <div class="babyilu">  <br><br>        <center>              {catrow.forumrow.LAST_POST}</center>
                        </div>
                   
                   
                      </td><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                      </td><td style="vertical-align: top;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="sowakemeup" />

                        </td></tr></tbody> </table></center>
          <div class="espacetrop">          <div id="liencate" style="color:#C7B6C9;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div></td>
 
      </center>

   <!-- 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><img src="http://nsa38.casimages.com/img/2015/09/06//150906122051395858.png" alt="" height="auto" width="auto"/><!-- END catrow --><!-- END tablefoot -->

[Evaliah]

Yop,

Alors si je regarde ta class .cat_forum je vois qu'elle n'a pas de style associé.
Sans se compliquer la vie je pense donc qu'on peut faire ceci :

Code:

.cat_forum {
background: url("http://nsa38.casimages.com/img/2015/09/06//150906122051395858.png") no-repeat center bottom;
padding-bottom: 98px;
}

Et tu supprimes la ligne qui est censée rajouter cette image dans le template puisqu'elle n'est plus utile
Le padding-bottom correspond à la hauteur de l'image, pour qu'elle soit visible sans être recouverte par les forums de la catégorie.

[popoliline]

Tu es officiellement ma sauveuse ça fonctionne !!!!
Dernière sollicitation et j'arrête de t'embêter je viens de remarquer ce beug pour les catégories où il n'y a pas de sous forum : https://2img.net/r/hpimg15/pics/505968Sanstitre1.png
Tu n'aurais pas une idée ?

En tout cas je te remercie pour tout le travail que tu as fais pour nous aider ! Un énorme merci je vais t'ajouter dans les crédits de remerciement de YC car sans toi on aurait pas réouvert !

[Evaliah]

Bonjour,

Je ne vois pas ce problème sur ton forum de test, peux-tu le rendre visible en rajoutant la catégorie incriminée ? (ou en la rendant visible aux invités)

Et avec plaisir pour l'aide

[popoliline]

Coucou,

Alors sur la première catégorie du forum test ça apparaît, je viens de remettre les mêmes templates et css que sur le forum original : http://fluffy-minion.forumactif.com/
Entre zone invité, codage 2015 etc.

merci encore !

[Evaliah]

Alors les "lignes" que tu vois sont simplement le fond du forum.
Cela se produit parce-que tu as un espacement entre les différentes parties de ton tableau.

Pour résoudre le problème tu peux rajouter la dernière ligne dans ta class cat_forum à la suite de ce que je t'avais donné :

Code:

.cat_forum {
    background: url(http://nsa38.casimages.com/img/2015/09/06//150906122051395858.png) no-repeat center bottom;
    padding-bottom: 98px;
    border-spacing: 0;
}

Cette correction résoudra en outre le problème de mauvais alignement des forums avec le titre de la catégorie

Voilà