Javascript / Phpbb2 : catégorie rétractable

Etana a écrit:

Bonjour,

Tu peux remplacer dans la template général > index_box ceci :

Code:: <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>

Par ceci :

Code:: <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr onClick="i= 0;e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';">

Ce code permettra de réduire et agrandir les catégories en cliquant sur la barre de titre.

Cordialement.

Etana a écrit:

Voilà avec un + alors :

Il faut remplacer:

Code:: <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

Par :

Code:: <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src=http://i45.tinypic.com/2z9dxyt.gif align=right /></div></th>

=]

Cordialement.

Ps :

Sinon voici une version avec cookie ( qui permettent d'enregistrer les états d'ouverture / fermeture ) de ce que j'avais donné avant :

Il faut remplacer :

Code:: <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>

Par :

Code:: <script type="text/javascript">var num= 0;</script>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr id="currenttr" onClick="i= 0;e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none'; retour=(my_getcookie(this.id)=='true')?'false':'true';my_setcookie(this.id,retour, 1, 0);" style="cursor:pointer;">

Et puis remplacer :

Code:: 
</table>

Par :

Code:: 
</table><script type="text/javascript">document.getElementById('currenttr').id='trfrm'+num;if(my_getcookie('trfrm'+num)=='true') { i= 0;e=document.getElementById('trfrm'+num).parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display='none'; } num++;</script>

Etana a écrit:

Alors il faudrait ceci plutôt:

Code:: <th nowrap="nowrap" width="150"><div style="width:150px; position:relative;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src=http://i45.tinypic.com/2z9dxyt.gif style="position: absolute;top: -30px;right: 60px;" /></div></th>

En modifiant "top: -30px;right: 60px;" ( tu peux aussi utiliser right et left ) afin de le positionner où tu le souhaite o/

Cordialement.

Etana a écrit:

Puisque Skull-piou l'a demandé, voici une solution avec cookie pour le cas où on veut mettre juste l'image + et l'image -

Il faut toujours aller dans la template index_box, y chercher :

Code::

Et mettre juste avant :

Code:: <script type="text/javascript">var num= 0;</script>

Ensuite il faut chercher :

Code:: <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

Et le remplacer par :

Code:: <th nowrap="nowrap" width="150"><div style="width:150px; position:relative;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif'; retour=(my_getcookie(this.id)=='true')?'false':'true';my_setcookie(this.id,retour, 1, 0);" src=http://i45.tinypic.com/2z9dxyt.gif style="position: absolute;top: -15px;right: 10px;" id="currentimg"/></div></th>

Puis pour finir chercher :

Code:: <img src="{SPACER}" alt="" height="5" width="1" />

Et mettre juste avant :

Code:: <script type="text/javascript">document.getElementById('currentimg').id='imgfrm'+num;if(my_getcookie('imgfrm'+num)=='true') { document.getElementById('imgfrm'+num).src='http://i47.tinypic.com/xmmlpg.gif'; i= 0;e=document.getElementById('imgfrm'+num).parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display='none'; } num++;</script>

Mais moi je préfère n'avoir qu'à cliquer sur la barre ( faut moins déplacer sa souris :) ).

Cordialement.

phpbb3 :

Code:: <script type="text/javascript">
var pvf= document.getElementById('main-content').firstChild; while(pvf.className!='forabg' && pvf.className!='h3' && (pvf=pvf.nextSibling) ); var i= 1; while(pvf && pvf.className=='forabg') { vf=pvf.firstChild.firstChild.nextSibling;
vf.firstChild.style.cursor='pointer';
vf.firstChild.id='catret'+(i++);
vf.firstChild.onclick=function() {
   alert(this.id);
   alert(my_getcookie(this.id));
   if(parseInt(my_getcookie(this.id))==1) {
      my_setcookie(this.id,'0',0,0);
      this.parentNode.nextSibling.style.display='block';
   }
   else
   {
      my_setcookie(this.id,'1',1,0);
      this.parentNode.nextSibling.style.display='none';
   }
   alert(my_getcookie(this.id))
};
if(parseInt(my_getcookie(vf.firstChild.id))==1) vf.nextSibling.style.display='none'; pvf= pvf.nextSibling; }
</script>

Code:: PHPBB3 : <script type="text/javascript">var pvf= document.getElementById('main-content').firstChild; while(pvf.className!='forabg' && pvf.className!='h3' && (pvf=pvf.nextSibling) ); var i= 1; while(pvf && pvf.className=='forabg') { vf=pvf.firstChild.firstChild.nextSibling; vf.firstChild.style.cursor='pointer'; vf.firstChild.id='catret'+(i++); vf.firstChild.onclick=function() { if(parseInt(my_getcookie(this.id))==1) { my_setcookie(this.id,'0',0,0); this.parentNode.nextSibling.style.display='block'; } else { my_setcookie(this.id,'1',1,0); this.parentNode.nextSibling.style.display='none'; } }; if(parseInt(my_getcookie(vf.firstChild.id))==1) vf.nextSibling.style.display='none'; pvf= pvf.nextSibling; } </script>

Code:: <script type="text/javascript">var pvf= document.getElementById('main-content').firstChild; while(pvf.className!='forabg' && pvf.className!='h3' && (pvf=pvf.nextSibling) ); var i= 1; while(pvf && pvf.className=='forabg') { vf=pvf.firstChild.firstChild.nextSibling; vf.firstChild.style.cursor='pointer'; vf.firstChild.id='catret'+(i++); vf.firstChild.onclick=function() { if(parseInt(my_getcookie(this.id))==1) { my_setcookie(this.id,'0',0,0); this.parentNode.nextSibling.style.display='block'; } else { my_setcookie(this.id,'1',1,0); this.parentNode.nextSibling.style.display='none'; } }; if(parseInt(my_getcookie(vf.firstChild.id))==1) vf.nextSibling.style.display='none'; pvf= pvf.nextSibling; } </script>

Il suffit de remplacer :

Code:: <div class="main">


   <div class="main-head">
      <div class="page-title">{catrow.tablehead.L_FORUM}</div>
   </div>
   <div class="main-content">

Par :

Code:: <div class="main"><script type="text/javascript">var num= 0; var curc;</script>


   <div class="main-head" onClick="if(this.nextSibling.style.display=='none'){my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';}else{my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
      <div class="page-title" id="cret">{catrow.tablehead.L_FORUM}</div><script type="text/javascript">curc= document.getElementById('cret');curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
   </div>
   <div class="main-content">
      <script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>