Bonjour,
Dans un premier temps j'espère ne pas m'être trompé dans le forum où je poste mais si c'est le cas je m'excuse d'avance.
Je viens vous demander de l'aide car je souhaiterais personnaliser le code des onglets pour les catégories (code qui si je me souviens bien vient d'ici (merci encore pour celui qui l'a réalisé *w*)). En effet je voudrais bien qu'on puisse voir s'il y a oui ou non des nouveaux messages dans les catégories sans avoir à les ouvrir une par une. J'ai donc pensé à afficher une icône ou à changer le titre de l'onglet en fonction de la présence ou non de l'icône en dessous de "dernier message posté par untel"(ici c'est celle-la :
).
Alors je vous informe d'avance que c'est le bazar avec tout ça (même moi je m'y perds). Donc je m'excuse d'avance et s'il manque quelque chose n'hésitez pas à demander.
Après je sais que c'est peut être inutile de le dire mais si ma demande se résout, ce serait bien de l'ajouter au tuto des onglet de catégories car je pense que ça pourrait en aider pas mal =)
Voilà merci d'avance et bonne journée, je reste à disposition.
Alors j'ai repris le code onglet de vic (lien ci dessous, merci à Nihil) vu que le mien n'était pas du tout le même. Mais en le reprenant je n'arrivais pas à avoir un bon résultat, mes catégories s'affichait toutes dans le premier onglet et sortait du cadre de mon forum, bref un vrai cafouillage. Nihil m'a à nouveau aidé et je vous livre donc le résultat :
en gros l'un des div devait aller avant l' END tablefoot et non pas après et l'autre div va après le END catrow et non pas avant !
Voilà en espérant que ça vous aide, Moi ça m'a enlever une sacré épine du pieds ! =D
Quand au nouveau message, Nihil vous dit tout en dessous !
Dans un premier temps j'espère ne pas m'être trompé dans le forum où je poste mais si c'est le cas je m'excuse d'avance.
Je viens vous demander de l'aide car je souhaiterais personnaliser le code des onglets pour les catégories (code qui si je me souviens bien vient d'ici (merci encore pour celui qui l'a réalisé *w*)). En effet je voudrais bien qu'on puisse voir s'il y a oui ou non des nouveaux messages dans les catégories sans avoir à les ouvrir une par une. J'ai donc pensé à afficher une icône ou à changer le titre de l'onglet en fonction de la présence ou non de l'icône en dessous de "dernier message posté par untel"(ici c'est celle-la :
).- Le code Javascript:
- Code:
$(function(){
var t;
/* liste des onglets avec les catégories en faisant partie*/
var onglets= [
["Informations",[0]],
["Dayora",[1]],
["A l'Est",[2]],
["Au Sud",[3]],
["Au Nord",[4]],
["A l'Ouest",[5]],
["La Taverne",[6]],
["Le Conseil",[7]]];
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" /> */
$("th.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));
});
});
- Le code CSS pour les onglets:
- Code:
/***************************************************Index_box**************************/
.fondcat{ /*en-tête catégorie*/
border-radius: 100px 50px / 30px 50px;
background-image: url(http://img4.hostingpics.net/pics/314221fondcatsansbis.png);
height: 60px;
width: 846px;
font-family: dancing script;
font-size: 16px;
text-shadow: 0px 0px 6px #FFF;
color : #175FA3;
}
.cadcol{
border: 1px solid #db7093;
background: #000;
border-radius: 20px;
padding: 5px; margin: 5px;
height: 80px;
overflow-y: auto;
}
a.forumlink{
display: block;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*onglets catégories*/
#cat-onglets {
margin: 5px auto;
text-align: center; }
.co-item {
background: #fff;
color: #000;
border: 1px solid #fdf;
display: inline;
cursor: pointer;
margin: 0 5px;
padding: 3px;
border-radius: 10px;
font-family: dancing script;
font-size: 2em;
border-radius: 100px 20px / 20px 100px;
}
.co-item:hover{
background: #fdf;
border: 1px solid 000;
color:#fff;
display: inline;
cursor: pointer;
margin: 0 5px;
padding: 3px;
border-radius: 10px;
}
.co-actif {
background: #000;
color: #fdf;
border:1px solid #fff;
font-family: dancing script;
font-size: 2em;
border-radius: 100px 20px / 20px 100px;}
cat-table {
margin-top : 20px;
}
- Et le code de l'index_box :
- 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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumbg" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="3" class="fondcat" nowrap="nowrap" width="100%"> <span class="text_cat">{catrow.tablehead.L_FORUM}</span> </th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<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}" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<td class="fond_souscat" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%"><br/>
<div style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlinks">
<a class="forumlinks" font-size="15px" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>
<!-- [ DÉBUT DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ] -->
<table width="100%"><tr><td class="cat_gauche"> <br/><br/>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<br/><br/>
<!-- BEGIN switch_moderators_links -->
<span class="gensmall"> {catrow.forumrow.switch_moderators_links.L_MODERATOR} {catrow.forumrow.switch_moderators_links.MODERATORS} </span>
<!-- END switch_moderators_links -->
</td><td class="cat_droite" width="20%">
<div class="lastmessage">Dernier message posté : <br/> {catrow.forumrow.LAST_POST}</div>
<br/>
</td></tr>
<tr><td colspan="2"><div class="lien_ssforum">{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}</div> <div class="nbrpost_ssforum">Il y a {catrow.forumrow.POSTS} missive(s) pour {catrow.forumrow.TOPICS} parchemin(s).</div></td></tr></table>
</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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --><img src="http://img11.hostingpics.net/pics/838052Sanstitre2.png" alt="" height="0px" width="848px" /><br />
Alors je vous informe d'avance que c'est le bazar avec tout ça (même moi je m'y perds). Donc je m'excuse d'avance et s'il manque quelque chose n'hésitez pas à demander.
Après je sais que c'est peut être inutile de le dire mais si ma demande se résout, ce serait bien de l'ajouter au tuto des onglet de catégories car je pense que ça pourrait en aider pas mal =)
Voilà merci d'avance et bonne journée, je reste à disposition.
Résultat
Alors j'ai repris le code onglet de vic (lien ci dessous, merci à Nihil) vu que le mien n'était pas du tout le même. Mais en le reprenant je n'arrivais pas à avoir un bon résultat, mes catégories s'affichait toutes dans le premier onglet et sortait du cadre de mon forum, bref un vrai cafouillage. Nihil m'a à nouveau aidé et je vous livre donc le résultat :
- Mon code avant son passage:
- Code:
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --></div></div><!-- END catrow --><img src="" alt="" height="0px" width="848px" /><br />
- mon code après:
- Code:
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" />
</table> <!-- fermeture de .forumbg -->
</div> <!-- fermeture de .categorie -->
<!-- END tablefoot -->
<!-- END catrow -->
</div> <!-- fermeture de .conteneur_categories -->
<img src="" alt="" height="0px" width="848px" /><br />
en gros l'un des div devait aller avant l' END tablefoot et non pas après et l'autre div va après le END catrow et non pas avant !
Voilà en espérant que ça vous aide, Moi ça m'a enlever une sacré épine du pieds ! =D
Quand au nouveau message, Nihil vous dit tout en dessous !
Dernière édition par Littleelda le Dim 15 Mar 2015 - 14:23, édité 3 fois
<== celle-ci pour ici) ça ne pourrait pas marcher ? Car elle s'affiche correctement sur mon forum et elle n'est pas en background qu'en penses-tu ? Après je ne sais pas si ça pose problème pour le JS.