DynCat (DOM, Javascript) 1.1.1

mangafan · 17-12-2006 13:50:20

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.

Note : Vous n'avez pas besoin de modifier le fichier index.php mais juste le template main.tpl. Testé sur FF 1.5 & 2.0 ainsi qu'IE 6.

Version 1.1.1 : Création du cookie pour garder les statuts des catégories et fonctions fixes placées dans des fichiers *.js.

A venir dans la 1.2 :
- Création d'un plugin pour que l'administrateur puisse changer le visuel et choisir les réglages par défaut.

mangafan · 17-12-2006 13:52:44

Voilà, j'aurais pas le temps de faire le plugin avant un petit moment mais l'essentiel fonctionne. Normalement il n'y a plus d'erreurs dans le lisez-moi happy .

romain9441 · 17-12-2006 13:56:48

Ok, merci mangafan, je vais peut-être abandonner Collapse. happy

emuleman · 07-01-2007 22:37:30

le mod est pas mal mais moi j'ai une chatbox perso smile et il me décale d'un forum à chaque fois le bouton pour réduire ou agrandir :s je vais voir si il y a une solus à ça smile

romain9441 · 19-01-2007 19:25:21

Y a t-il une solution pour charger toutes les images au chargement de la page, car quand on réduit une catégorie, la flèche disparaît une seconde ?

Pandark · 21-01-2007 03:45:44

Avec ie, oui...

MT · 21-01-2007 12:40:20

Ou en faisant un truc moins "propre".
Mettre par exemple une div avec une position de -1000 vers la gauche, et y placer ton image en fond. Elle sera chargée, et personne ne la verra.

mangafan · 22-01-2007 01:20:25

emuleman a écrit :

le mod est pas mal mais moi j'ai une chatbox perso et il me décale d'un forum à chaque fois le bouton pour réduire ou agrandir :s je vais voir si il y a une solus à ça

Et comment est codé la chatbox dans une div avec [c]<div id="idx{n}" class="blocktable">[/c] ou {n} est un chiffre et pire que tout le 1... Donc ça doit décaler, je vais devoir prévoir une option pour ça, c'est dommage perso j'aurais réservé les idx aux catégories et non aux ajouts de mod...

Edit : Une erreur, je viens d'y repenser j'avais anticiper l'annonce affichée ou pas en détectant l'id en javascript, il suffit de faire la même chose avec l'id de ta chatbox. Faudrait que je vois la source de ta page pour t'envoyer la modif.

romain9441 a écrit :

Y a t-il une solution pour charger toutes les images au chargement de la page, car quand on réduit une catégorie, la flèche disparaît une seconde ?

Tant à faire, je vais modifier pour que ça précharge l'image en javascript, ça doit être fesable vu que sans javascript cette modification ne s'affiche pas ça ne devrait pas gêner.

Dernière modification par mangafan (22-01-2007 01:25:03)

mangafan · 22-01-2007 02:54:18

Vite fait pour cacher le chargement de l'icône, en regardant la rediff du Superball happy , mettre dans dyncat.php :

document.write('<'+'style type="text/css" media="screen">');
document.write('.hide { display: none; }');
document.write('<'+'/style>');
document.write('<span class="hide"><img src="img/dyncat/plus.gif" /><img src="img/dyncat/min.gif" /></span>');

Juste avant :

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

Point de vue sémantique, c'est caca mais c'est du javascript donc la question se pose-t-elle vraiment !

Dernière modification par mangafan (22-01-2007 02:55:00)

Pandark · 22-01-2007 20:53:41

mangafan a écrit :

Point de vue sémantique, c'est caca mais c'est du javascript donc la question se pose-t-elle vraiment !

Heu... huh

mangafan · 23-01-2007 00:30:36

Je dis juste que ça ne se voit pas dans le tidy par exemple car c'est du javascript et ça fausse pas le fonctionnement de la page vue que c'est en display:none;.

La partie css gêne pas dans l'entête mais le span dans l'idéal il faudrait le mettre dans le body. En éditant le main.tpl par exemple.

Et normalement quand on utilise xhtml 1.0 strict c'est pour l'accessibilité en partie et le javascript pour l'accessibilité...

Pandark · 23-01-2007 00:51:13

Je jouais juste les rabat-joie (genre : c'est important même si ça ne se voit pas tongue )
(Mais plus sérieusement, ce n'est pas parce que les validateurs ne comprennent pas js qu'il n'est pas normalisé -:huh: un doute m'assaille sur la normalisation du javascript, tout d'un coup-... et le (x)html qu'il affiche aussi.)

mangafan · 23-01-2007 01:53:21

Oui, d'ailleurs ça passait le validateur et je viens de voir que ça passait pas le tidy de firefox... Et validome.org j'en parlerais pas pour rester poli...

J'ai donc changez la dernière ligne d'ajout en ça :

document.write('<div class="hide"><img src="img/dyncat/plus.gif" /><img src="img/dyncat/min.gif" /><\/div>');

Dans une div ça me parait plus correct. Ca passe le tidy de firefox et le valideur de w3c. C'est ce genre de comportement qui me font douter assez souvent du validateur...

DotWoot · 10-02-2007 01:32:25

Bonsoir;

J'ai une erreur avec ce plugins, il fonctionne mais très mal je m'explique
Sur l'index mon forum a 4 Catégories
Quand je clique sur la 2ème catégorie il rabaisse la première,
quand je clique sur la 3ème il rabaisse la 2ème et quand je clique sur la 4ème elle rabaisse la 3ème ce qui fait que la dernière ne peut être rabaisse mais possède quand même le bouton contrairement a la 1ère ...

romain9441 · 10-02-2007 09:50:19

Adresse ?

mangafan · 10-02-2007 20:32:54

Tu es le deuxième as avoir le soucis... le premier n'a pas voulu poursuivre la discussion... Tu as toi aussi une chatbox ?

Faudrait me répondre pour que je teste avec histoire de faire évoluer le bout de code en conséquence. wink

DotWoot · 11-02-2007 05:02:27

Euh non pas de ChatBox ... hmm
Forum: http://release.is.free.fr/forums/index.php

mangafan · 11-02-2007 07:31:19

J'ai du chercher happy ton code source m'indique cela en bas de pas.

<div id="announce" class="block">
    <h2><span><b>Les 10 membres les plus actifs</b></span></h2>
    <div class="box">
        <div class="inbox">
            <div>
                        <a href="profile.php?id=3">adrien.co <img src="http://release.is.free.fr/forums/img/CheckAddonUpdate/link.png"></a> (2) 
                        <a href="profile.php?id=2">DotWoot <img src="http://release.is.free.fr/forums/img/CheckAddonUpdate/link.png"></a> (1) 
                        <a href="profile.php?id=4">Free <img src="http://release.is.free.fr/forums/img/CheckAddonUpdate/link.png"></a> (0) 
        </div>

    </div>
</div>
</div>

Mais pour Dyncat ça signifie que l'annonce est activé et il décale les fonction en conséquence. La manquante se retrouve d'ailleurs sur la balise H2

<div id="brdstats" class="block">
    <h2><span>Informations Forums</span></h2>

Qui elle est masquée via la feuille de style, on ne peut donc pas voir la case ni le code. Sauf affichant le code source de la sélection avec firefox (qui affiche le code javascript créé dynamiquement d'ailleurs une trouvaille ça happy ).

La solution changé le nom de l'

id="announce"

que tu as mit dans les stats ajoutées (copié/collé quand tu nous tiens) il est déjà attribué pour l'annonce et doit être unique.

<div id="memberactivity" class="block">
    <h2><span><b>Les 10 membres les plus actifs</b></span></h2>

par exemple.

DotWoot · 11-02-2007 16:48:51

Exact nikel; merci mangafan :canon:

Par contre j'aurais voulu savoir aussi; en ce qui concerne le clique
Comment faire pour que l'action du clique ne se fait que sur la petite image car même quand je clique sur toute la barre l'action ce met en route directement.

Et comment faire pour placer l'image tout a droite ? roll

Merci

mangafan · 12-02-2007 02:27:58

Ca fait partie des choses que je compte changer pour la prochaine version mais je n'ai vraiment pas le temps en ce moment... hmm

Je dois finir un boulot important pour pouvoir signer mon prochain contrat de travail wink

DotWoot · 12-02-2007 04:04:43

Ok pas de problème; le travail passe avant tout, bonne chance :canon:

mangafan · 12-02-2007 11:01:41

Merci, j'essayerais de m'y mettre dessus ce week-end.

romain9441 · 12-02-2007 19:28:36

Cool, je serai moi aussi intérressé... :canon:

mangafan · 16-04-2007 18:09:47

J'ai un gros bug avec une version 1.2.15 fraichement installée...

Je clique pour réduire et hop bonsoir clara il masque tout le forum...

Faut que je cherche ce qui a été bougé. Je pense pas que ça vienne de la fonction pun_include déplacée y a pas de logique à ça...

La structure html à bougé de la 1.2.14 à la 1.2.15 ?

edit : autant pour moi c'est le main.tpl du gars qui foire il a encastré son forum dans un tableau et comme dyncat masque le premier tableau rencontré en pensant qu'il s'agit du premier forum il cache tout.

Donc ça roule sur la dernière version de punbb

Dernière modification par mangafan (16-04-2007 18:12:50)

mangafan · 23-04-2007 04:40:13

Fonctionne avec la version 1.2.15 de PunBB !

Nouvelle version sur le feu ! Gestion plus dynamique pour gérer le id="idx{n}" des catégories pour éviter d'éventuels bugs avec les blocs personnalisés genre chatbox pub et compagnie.

Archives FluxBB.fr

#1 17-12-2006 13:50:20

DynCat (DOM, Javascript) 1.1.1

#2 17-12-2006 13:52:44

Re : DynCat (DOM, Javascript) 1.1.1

#3 17-12-2006 13:56:48

Re : DynCat (DOM, Javascript) 1.1.1

#4 07-01-2007 22:37:30

Re : DynCat (DOM, Javascript) 1.1.1

#5 19-01-2007 19:25:21

Re : DynCat (DOM, Javascript) 1.1.1

#6 21-01-2007 03:45:44

Re : DynCat (DOM, Javascript) 1.1.1

#7 21-01-2007 12:40:20

Re : DynCat (DOM, Javascript) 1.1.1

#8 22-01-2007 01:20:25

Re : DynCat (DOM, Javascript) 1.1.1

#9 22-01-2007 02:54:18

Re : DynCat (DOM, Javascript) 1.1.1

#10 22-01-2007 20:53:41

Re : DynCat (DOM, Javascript) 1.1.1

#11 23-01-2007 00:30:36

Re : DynCat (DOM, Javascript) 1.1.1

#12 23-01-2007 00:51:13

Re : DynCat (DOM, Javascript) 1.1.1

#13 23-01-2007 01:53:21

Re : DynCat (DOM, Javascript) 1.1.1

#14 10-02-2007 01:32:25

Re : DynCat (DOM, Javascript) 1.1.1

#15 10-02-2007 09:50:19

Re : DynCat (DOM, Javascript) 1.1.1

#16 10-02-2007 20:32:54

Re : DynCat (DOM, Javascript) 1.1.1

#17 11-02-2007 05:02:27

Re : DynCat (DOM, Javascript) 1.1.1

#18 11-02-2007 07:31:19

Re : DynCat (DOM, Javascript) 1.1.1

#19 11-02-2007 16:48:51

Re : DynCat (DOM, Javascript) 1.1.1

#20 12-02-2007 02:27:58

Re : DynCat (DOM, Javascript) 1.1.1

#21 12-02-2007 04:04:43

Re : DynCat (DOM, Javascript) 1.1.1

#22 12-02-2007 11:01:41

Re : DynCat (DOM, Javascript) 1.1.1

#23 12-02-2007 19:28:36

Re : DynCat (DOM, Javascript) 1.1.1

#24 16-04-2007 18:09:47

Re : DynCat (DOM, Javascript) 1.1.1

#25 23-04-2007 04:40:13

Re : DynCat (DOM, Javascript) 1.1.1

Pied de page des forums