Archives FluxBB.fr

Les archives de FluxBB.fr

Vous n'êtes pas identifié(e).

Pages : 1 2

#1 24-08-2007 20:05:51

mangafan
Habitué très actif

DynCat (DOM, Javascript) 1.2

Auteur : Bruno Laplace

Petite mod sans prétention, pour m'amuser avec DOM et javascript.

Cette mod sert à cacher ou montrer une catégorie en cliquant sur son titre.
Par défaut, on voit toutes les catégories et on les cache en cliquant dessus.

La position est gardée en mémoire par un cookie (punbb_dyncat).

Note : Aucune modification du fichier index.php, juste un <pun_include "..."> à ajouter au template main.tpl. Testé sur FF 1.5 & 2.0 ainsi qu'IE 6.

Version 1.2 : Tout ce passe désormais en javascript façon DOM dans des fichiers .js séparés du squelette xhtml.

C'est la dernière version de DynCat sauf si besoin d'une correction de bug. La suite se nommera DynBoard.

Cette version n'a été testé que sous Firefox pour le moment mais devrait marcher sur IE & cie.

Dernière modification par mangafan (24-08-2007 20:06:48)

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#2 24-08-2007 22:40:56

M@x
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Et ca ressemble à quoi ?!

M@x.

...

Hors ligne

#3 24-08-2007 23:14:48

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Elle est installée sur mon forum !

A gauche sous l'avatar wink

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#4 25-08-2007 09:49:19

Benji_X80
Régulier

Re : DynCat (DOM, Javascript) 1.2

Plugin utile merci a toi! bravo pour la simplicité d'installation

BxNxG FOREVER - Forum

Hors ligne

#5 25-08-2007 10:14:35

Matthieu
Habitué actif

Re : DynCat (DOM, Javascript) 1.2

merci mais elles s'affichent ou les images fleches ?

Hors ligne

#6 25-08-2007 13:29:39

foxmask
Lugo

Re : DynCat (DOM, Javascript) 1.2

bonjour,
c'est sympa qd on a un bon packet de forum et qu'on veut pas installer la mod sous forum
mais je crois que la même chose peut être réalisé en CSS pure wink

http://www.foxmask.info
HaveFnuBB! le seul forum produit avec le framework PHP5 Jelix
(dé)pot de miel
Membre de la CoreTeam Jelix

Hors ligne

#7 25-08-2007 17:15:04

M@x
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

C'est vraiment très sympa ! wink

M@x.

...

Hors ligne

#8 25-08-2007 18:16:57

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

foxmask a écrit :

bonjour,
c'est sympa qd on a un bon packet de forum et qu'on veut pas installer la mod sous forum
mais je crois que la même chose peut être réalisé en CSS pure wink

Hum la mod sous forum créait bien des forums dans les forums donc dyncat n'est pas vraiment incompatible par son fonctionnement.

Full css, sincèrement je crois pas ! Pour les images d'icônes oui, mais le reste je vois pas trop ? En plus dans l'idée c'est pas sémantique, les css ne servent pas à ça.

Comment garder les positions en cookie et avec un fonctionnement en temps réel (sans rechargement de la page et ancres inutiles) sans toucher au squelette xhtml ? Tout cela sans javascript et compatible avec tous les brouteurs (*) ?

* ie et les hover sur d'autres éléments qu'une balise <a> il aime pas ! wink

wz16 a écrit :

merci mais elles s'affichent ou les images fleches ?

A gauche du texte de la catégorie, pour le moment, c'est pas en css car ça peut écraser une règle de style déjà inclus avec c'est méthode ou chevaucher un petit logo présent dans le background de la balise <h2> comme sur punbb.fr par exemple. wink

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#9 26-08-2007 19:44:31

Benji_X80
Régulier

Re : DynCat (DOM, Javascript) 1.2

Dyncat v1.2 ne marche pas si vous avez la chatbox 2.0 (en ajax) sur l'index du forum ça chamboule tout et on peut même pas envoyer de message sur la chatbox a cause d'un bouton qui le remplace

BxNxG FOREVER - Forum

Hors ligne

#10 26-08-2007 20:00:48

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Cette Chatbox happy Je suis vraiment pas fan de l'outil donc j'ai pas voulu l'installer pour tester jusqu'à maintenant... Je verrais ça dans la soirée. wink

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#11 26-08-2007 21:34:05

Benji_X80
Régulier

Re : DynCat (DOM, Javascript) 1.2

c'est un problèmes de compatibilité avec l'ajax je penses, j'avais installé un mod avant en ajax (un mod qui agrandit une image dans un post pour ceux qui connaissent, j'ai oublié le nom), ça ne marchait pas, enfin  si ça marchait, sauf que la ChatBOX buggé, le petit logo de chargement en .gif obtenait une taille démesuré!!

BxNxG FOREVER - Forum

Hors ligne

#12 27-08-2007 02:13:13

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

J'ai pas le bug en local mais c'est surement parce que j'ai encore modifié dyncat en l'inclut au futur dynboard.

Du coup je met du nouveau fichier common.js :

function dyncat(i, titre) {
    var h2 = document.getElementById("idx"+i).getElementsByTagName("h2")[0];
    var box = document.getElementById("idx"+i).getElementsByTagName("div")[0];
    
    if (box.style.display=='none') {
        box.style.display=''; 
        h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/min.gif" title="Réduire" /> ' + titre;
        pref[i] = 1;
    } else {
        box.style.display='none';
        h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/plus.gif" title="Développer" /> ' + titre;
        pref[i] = 0;
    }
}

function ArrayIdx() {
    var category = new Array();    
    for ( i = 1; document.getElementById("idx"+i) != null; i++)
    {
    if( document.getElementById("idx"+i) != null)
        {
            category[""+i] = document.getElementById("idx"+i);
        }
    }
    category.shift();
    return category.length;
}

date = new Date;
date.setFullYear(date.getFullYear()+1);

var pref = new Array();

function catfind() {
    if( document.getElementById("punindex") ) {
    
        if (LireCookie("punbb_dyncat")) {
            var cookie_value = LireCookie("punbb_dyncat");
            var pref_save = cookie_value.split('_');
        } else {
            var pref_save = new Array();
        }

        var nbcat = ArrayIdx();

        for( i = 1; i <= nbcat; i++)
        {
            (pref_save[i]) ? pref[i] = pref_save[i] : pref[i] = 1;

            var h2 = document.getElementById("idx"+i).getElementsByTagName("h2")[0];
            var box = document.getElementById("idx"+i).getElementsByTagName("div")[0];
            var dh = h2.getElementsByTagName("span")[0].firstChild.data;

            if(pref[i] == 1) {
                h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/min.gif" title="Réduire" /> ' + dh;
                box.style.display='';
            } else {
                h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/plus.gif" title="Développer" /> ' + dh;
                box.style.display='none';
            }

            h2.i = i;
            h2.titre = dh;
            h2.setAttribute("onclick",function() {
                dyncat(this.i, this.titre);
                var pref_save = pref.join('_');
                EcrireCookie("punbb_dyncat", pref_save, date);
            });
            h2.onclick = function() {
                dyncat(this.i, this.titre);
                var pref_save = pref.join('_');
                EcrireCookie("punbb_dyncat", pref_save, date);
            };
        }
    }
}
    
document.write('<'+'style type="text/css" media="screen">');
document.write('.hide { display: none; }');
document.write('<'+'/style>');
document.write('<div class="hide"><img src="img/dynboard/plus.gif" /><img src="img/dynboard/min.gif" /><\/div>');

if (window.attachEvent) {
    window.attachEvent("onload",catfind);
} else if (window.addEventListener) {
    window.addEventListener("load",catfind, false);
}

Ca fera de la lecture en plus et c'est pas que j'ai la  flemme de faire une 1.2.1 pour ça ( siffle ) mais DynBoard devrait arriver bientôt donc wink

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#13 30-08-2007 14:19:25

Benji_X80
Régulier

Re : DynCat (DOM, Javascript) 1.2

Ok on patientera! Je n'ai pas le temps de voir non plus a cause des sites que je fais donc désolé j'aurais aimé du moins. Je verrai plus tard a bientôt

BxNxG FOREVER - Forum

Hors ligne

#14 07-09-2007 18:58:33

steve2206
Habitué actif

Re : DynCat (DOM, Javascript) 1.2

salut mangafan,

j'ai essayé de faire un collapse pour un tableau personnalisé en bas de mon forum, le collapse marche bien mais j'ai un problème avec les cookies; je te renvois à cette discussion où j'explique mon problème.
Si tu peux me donner un coup de main ce serait super cool, merci.

[img]http://omhistorique.free.fr/Images/BANNIERES_OMH/Signature/SIGNATURES_forOM/SIGNATURE_steve2206(1).jpg[/img]

Hors ligne

#15 13-01-2008 03:08:46

M@x
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Bonsoir,

Je viens juste d'installer cette mod pour Easy-Forums (Tests en local) mais en effet j'ai du tester avec la chatbox sur l'index :
vignettes.php?v=20081132344

Après quelques recherches voici ce que j'aimerais : (Juste un lien à droite plutôt que toute la barre de la catégorie cliquable)
vignettes.php?v=20081132735
Il saggit de la même base, ou d'une autre modification ?

Merci de votre aide.
M@x.

EDIT : Je pense que j'ai trouvé sur PunRes : http://www.punres.org/files.php?pid=84

Dernière modification par M@x (13-01-2008 03:15:10)

...

Hors ligne

#16 13-01-2008 05:32:51

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Le bug avec la chatbox, on en a déjà parlé ici ou pas loin (edit : quelques messages plus haut en fait). Et j'y peux pas grand chose. Enfin si faut que je fasse une bonne fois pour toute une version finale modifiable aisément.

Parce qu'il faudra m'expliquer pourquoi la chatbox (outil que j'exècre en général) utilise des balises h2 pour le look (la grande barre grise sur ton screen avec le moins et celle avec une chackbox en bas *) alors qu'il suffisait de faire un border sur la div qui contient les blabla fabuleusement intéressant de la chatbox...

Chatbox en générale a écrit :

Machin dit : Salut ça va.
Machine dit : Oui ça va.
Testeur dit : Up.
Trucmuche dit : Il faut bô.
Osef dit : J'ai mangé une pomme ce midi.
Bidulle dit : J'ai démouler un cake ce matin.
D.V. dit : Luke, je suis ton père.

* Une checkbox dans une balise h2 du snobisme juste pour dire moi je serais pas conforme au norme happy lol

Tu peux utiliser collapse en effet mais c'est plus long à installer ça touche à tout, là où dyncat ne nécessite que 2-3 lignes.

Dernière modification par mangafan (13-01-2008 05:48:53)

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#17 13-01-2008 14:58:14

M@x
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

En effet l'installation est plus longue. POur ce qui est de la chatBox je suis complètement d'accord avec toi mais bon ce n'est pas moi qui choisie : j'héberge des forums, ils font ce qu'il souhaitent... (Parfois ça ne rime à rien big_smile) happy

M@x.

...

Hors ligne

#18 04-02-2008 13:44:02

tms
Membre

Re : DynCat (DOM, Javascript) 1.2

mangafan : je viens de modifier ta mod pour en faire une extension de punbb 1.3
Je poste un lien si ça te dérange pas (j'ai pas trouvé d'informations sur la licence).

Hors ligne

#19 04-02-2008 18:36:57

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Y a pas de soucis, je pensais le faire mais y a un truc qui m'a dérouté dans le système des hooks. Une boucle maudite... qui rend l'astuce des hooks assez contraignante, je trouve.

http://punbb.org/forums/viewtopic.php?id=18254

Pour la petite histoire, j'ai enfin saisi l'astuce pour avoir ma petite image au bon endroit mais je ne pourrais jamais l'avoir après la fermeture du tableau vu le positionnement du hook et la manière dont la boucle se termine...

Du coup je suis curieux de voir comment tu as adapté le code. Personnellement je voulais me débarasser du compte des tag H2 pour éviter les collision avec les nombreuses extensions à venir.

Dernière modification par mangafan (04-02-2008 18:37:14)

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#20 04-02-2008 19:46:44

tms
Membre

Re : DynCat (DOM, Javascript) 1.2

Bah je me suis pas embêté, j'ai juste inclus les deux fichiers JS avec le hook hd_index_head. Et changé un poil le javascript.
Pour les h2, c'est vrai que ça peut poser problème. J'ai pas apporté de modification, mais il suffirait de sélectionner la "category+i" puis de prendre le nœud précédent (div de classe main-head), et enfin de prendre le premier nœud enfant, ou sélectionner avec un getByTagName('h2')[0].

Dernière modification par tms (04-02-2008 19:47:09)

Hors ligne

#21 05-02-2008 01:20:53

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

C'est vrai que ça s'adapte assez vite avec la vieille méthode de la 1.2...

Faut voir, j'aurais vraiment préféré faire ça se fasse différement mais si tu veux diffuser ton adaptation tu peux le faire y a pas de soucis.

Dernière modification par mangafan (05-02-2008 01:23:06)

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#22 05-02-2008 22:56:00

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Bon du coup tms, tu m'as remit dans le bains de cette mod/extension et j'en ai refait une version en lisant tes remarques.

Permettant d'éviter tout les bugs que j'ai croisé jusque la avec les autres mods.

Me reste à voir un truc avec les noeuds car le moteur Gecko est très joueurs. Du coup il fat que je cherche un peut mieux si [c]if ( navigator.product == 'Gecko' )[/c] suffit à éviter tout les bugs et si d'autres broutteurs sont tout aussi joueur que lui.

Un petit truc en passant assez sympa d'aiileurs, si tu es confronté au mêmes ennuis que moi.

http://www.thewatchmakerproject.com/jou … oussibling

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#23 15-03-2008 12:08:23

tms
Membre

Re : DynCat (DOM, Javascript) 1.2

Un lien qui devrait t'intéresser :

http://developer.mozilla.org/en/docs/Wh … in_the_DOM

Tu as un lien vers ta nouvelle version ?

Hors ligne

#24 15-03-2008 20:26:42

mangafan
Habitué très actif

Re : DynCat (DOM, Javascript) 1.2

Oui une des dernières versions par ici.

http://www.punbb.fr/forums/viewtopic.php?id=7105

Mais maintenant c'est la façon dont Opera gère le dom qui me met des bâtons dans les roues et ie qui fait un caca nerveux en appliquant les modifs à sa façon.

J'ai une autre version en local ou ie ne plante pas car j'utilisais l'ancienne méthode en partie en gardant le clique sur le h2 de la catégorie.

Là j'ai voulu faire plus propre en plaçant une div avant les catégories et sous Firefox, ça roule comme d'habitude, après avoir bidouiller pour qu'il arrête de planter à voir des nœuds là ou il n'y en a pas, mais les deux autres broutteurs mettent leur grain de sel.

Sous Opéra du grand art il me place la div après le h2 de la catégorie et sous ie la mise en page saute après la première catégorie.

Dans l'ensemble, je dois pouvoir me contenter avec un mélange de l'ancienne et de la nouvelle méthode. Mais cela aurait été bien plus propre et plus souple avec une nouvelle div que tout le monde aurait pu modifier à sa guise sans trop s'embêter (la mettre à gauche, à droite ou au milieu, cahnger son visuel...).

canon Mangafan : Mettez un chat dans votre processeur ! happy

Hors ligne

#25 19-04-2008 18:32:23

VisuTeam
Membre

Re : DynCat (DOM, Javascript) 1.2

Bonjour, j'installe le mod et tout marche parfaitement. Sauf que quand je veux masquer (par exemple) la catégorie "Aide", c'est la catégorie d'au-dessus qui se masque ?
Voici un petit apercu : http://keve.kv.free.fr/visu-team/forums … /index.php
Quel est le moyen de résoudre ce problème génant ? (merci)

EDIT: PB REGLÉ

Dernière modification par VisuTeam (20-04-2008 08:23:52)

Hors ligne

Pages : 1 2

Pied de page des forums