Fork me on GitHub






xmouse
Blocs rétractables
#1
Semi pro
Inscrit: 04/08/2005 14:16
De Quelque part dans les étoiles...
Messages: 1141
Bonjour à tous,

Je suis en train de réfléchir sur la manière d'optimiser les blocs sur mon site (http://www.xmouse.org).

Je pense avoir trouvé l'idée mais j'aimerai avoir votre aide pour savoir si c'est faisable et surtout comment.

Voilà, j'aimerai rajouter un bouton sur un ou plusieurs blocs pour pouvoir les cacher et en recliquant sur ce bouton qu'ils réapparaissent.

Merci d'avance pour votre aide.

Edit Kris : j'ai reformulé le titre de ton sujet, par une phrase plus adaptée ; par ailleurs, tout le monde sur ce forum demande de l'information.

Posté le : 04/10/2005 10:01

Edité par kris sur 05/10/2005 19:23:59

Il n'y a qu'une chose que vous pouvez changer dans l'Univers : c'est Vous-Même !
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Demande d'informations
#2
Guest_
Il me semble qu'à une époque whewb avait fait un thème avec des blocs rétractables... J'arrive pas à le retrouver

Posté le : 05/10/2005 19:13
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Demande d'informations
#3
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Salut,

Regardes sur ce site, flèches dans le header, si c'est quel chose comme celà que tu désires ?

A +

Posté le : 05/10/2005 19:22

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xmouse
Re: Demande d'informations
#4
Semi pro
Inscrit: 04/08/2005 14:16
De Quelque part dans les étoiles...
Messages: 1141
C'est exactement çe que je recherche.... Merci pour tout...

Mais maintenant, n'étant pas très doué pour le codage, avez vous une idée si c'est un code java, php, ou autre à insérer dans les blocs ???


Posté le : 05/10/2005 19:37

Il n'y a qu'une chose que vous pouvez changer dans l'Univers : c'est Vous-Même !
Partager Twitter Partagez cette article sur GG+
Rapport Haut
fooups
Re: Demande d'informations
#5
Semi pro
Inscrit: 05/04/2003 19:03
Messages: 1645
Cette technique a été présentée en septembre 2003 sur les forums par Yoyo2021. Elle a été qualifiée de technique des blocs pliables. Si je précise la date, c'est bien évidemment parce qu'elle s'applique à une version de XOOPS ancienne, et qu'elle n'a pas (à ma connaissance) été testée depuis.


Je laisse la parole à Yoyo maintenant:
Citation :

Voila le script a ajouter entre les balises <Script></Script> du fichier "theme.html"
function blockpliable(blockid){
 if (blockid.style.display == 'none'){
 blockid.style.display = '';
 }
 else {
 blockid.style.display = 'none';
 }
}


Ce code entoure le titre du block ( <{$block.title}> )

<A HREF=# onClick="blockpliable(<{$block.title|regex_replace:"/[^a-zA-Z]/":""}>)"><{$block.title}></A>


Pour ceux qui se pose la question, "<{$block.title|regex_replace:"/[^a-zA-Z]/":""}>" renvoi la valeur de block.title mais sans les espaces et les chiffres.

Ce code contient le contenu du block ( <{$block.content}> )

<div id="<{$block.title|regex_replace:"/[^a-zA-Z]/":""}>" style="display: none"><{$block.content}></div>


A noter ici que le "Style="display: none"" n'est pas obligatoire. Il sert a ce que les block soit plier au demarage de la page. Voir sur le site exemple que j'ai donner au debut. (Edit Fooups-> lien non fourni car HS)

Voila un exemple tirer de mon fichier "theme_blockleft.html"
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
 <td><table width="160" border="0" cellpadding="0" cellspacing="0" class="titreblock">
 <tr> 
 <td align="center" valign="middle"> <div class="blockTitleLeft"><A HREF=# onClick="blockpliable(<{$block.title|regex_replace:"/[^a-zA-Z]/":""}>)"><{$block.title}></A></div></td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td align="center" valign="middle">
 <div id="<{$block.title|regex_replace:"/[^a-zA-Z]/":""}>" style="display: none"> 
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td><div class="blockContentSide"><{$block.content}></div></td>
 </tr>
 </table>
 </div> 
 </td>
 </tr>
 <tr>
 <td class="footerblock">&nbsp;</td>
 </tr>
</table



Il reste avec cette technique un petit problème, à savoir qu'il faut replier/redéplier les blocs à chaque changement de page. Une fois encore, Yoyo vient à notre rescousse:

Citation :

Bon! voila longtemps je voulais terminer ce hack

Voila maintenant avec ce code, vos blocks vont rester ouvert ou fermer selon l'etat vous l'avez laisser quand vous fermer la fenetre ou cliquer sur un lien.

A noter pour que cela fonctionne vous devez editer PATH et DOMAINE dans la function SetCookie

J'espere que vous vous amuserez
<body onload="<{foreach item=block
from=$xoops_lblocks}>LoadBloc('block<{$block.bid}>');
<{/foreach}>">




// Debut de Bloc Pliable

function blockpliable(id){
var listElementStyle=document.getElementById(id).style;

if (listElementStyle.display=="none"){
document.getElementById(id).style.display="";
SetCookie(id, '1');                                                 

}
else {
document.getElementById(id).style.display="none";
SetCookie(id, '0');    
}
}

function LoadBloc(ids){
        
// Lecture des cookies
var cookies = document.cookie.split(/; /);
for(var i = 0; i < cookies.length; i++)
{
  cookies[i] = cookies[i].split(/=/);
  cookies[i][1] = unescape(cookies[i][1]);
       
  if(cookies[i][0] == ids){
    //alert(cookies[i][0] + " @ " + ids + " @ " + cookies[i][1]);
    
      if(cookies[i][1] == '1'){
        document.getElementById(ids).style.display="";
      } else {
        document.getElementById(ids).style.display="none";
      }
    } 
  
}

function SetCookie (name, value) {  
    var argv = SetCookie.arguments;  
    var argc = SetCookie.arguments.length;  
    var expires = new Date (2005, 12, 24)
    //var expires = (argc > 2) ? argv[2] : null;  
    var path = "/v2";  
    //var path = (argc > 3) ? argv[3] : null;  
    var domain = ".odesia.com";
    //var domain = (argc > 4) ? argv[4] : null;  
    var secure = (argc > 5) ? argv[5] : false;  

    document.cookie = name + "=" + escape (value) + 
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
    ((path == null) ? "" : ("; path=" + path)) +  
    ((domain == null) ? "" : ("; domain=" + domain)) +    
    ((secure == true) ? "; secure" : "");
    //var expires = new Date (2005, 12, 24)
    //document.cookie = name + "=" + escape (value) + "; expires=" +
expires.toGMTString();
}



:merci: Yoyo et @+

Posté le : 05/10/2005 19:58
Partager Twitter Partagez cette article sur GG+
Rapport Haut
phmo
Re: Demande d'informations
#6
Xoops accro
Inscrit: 25/11/2004 12:53
De 48400 Florac - France
Messages: 3370
Bonsoir,

Citation :
avez vous une idée si c'est un code java, php, ou autre à insérer dans les blocs ???


Ne cherche pas du côté des blocs, c'est plutôt géré au niveau du thème.
Il y a un thème comme ça en téléchargement sur Xoops, mais je ne me souviens pas lequel.

Amicalement,
Philippe.

Posté le : 05/10/2005 20:04
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xmouse
Re: Demande d'informations
#7
Semi pro
Inscrit: 04/08/2005 14:16
De Quelque part dans les étoiles...
Messages: 1141
Cool,

Je teste et je vous tiens au courant.

En tout cas merci pour les infos.

Posté le : 05/10/2005 20:11

Il n'y a qu'une chose que vous pouvez changer dans l'Univers : c'est Vous-Même !
Partager Twitter Partagez cette article sur GG+
Rapport Haut
_OvO_
Re: Demande d'informations
#8
Aspirant
Inscrit: 28/02/2003 16:25
Messages: 59
Citation :

phmo a écrit:
Bonsoir,

Citation :
avez vous une idée si c'est un code java, php, ou autre à insérer dans les blocs ???


Ne cherche pas du côté des blocs, c'est plutôt géré au niveau du thème.
Il y a un thème comme ça en téléchargement sur Xoops, mais je ne me souviens pas lequel.

Amicalement,
Philippe.


Bonsoir,

Pour vous faire une idée... :
ipb_green & mp00

Mais comme l'indique Fooups, les colonnes se réaffichent lors d'un changement de page

Posté le : 05/10/2005 20:48
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

36 Personne(s) en ligne (28 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 36 | Plus ...