Comment réaliser ce genre
+4
-Tancrède-
Chacha
Neptunia
Mdame Lili
8 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 3 • Partagez
Page 1 sur 3 • 1, 2, 3
Comment réaliser ce genre
Bonjour, désolée si mon message n'est pas au bon endroit.
Je suis incapable de donner un nom à ce que je voudrais réaliser dans mon forum http://coutureplaisir.forumgratuit.be/
J'essaie d'expliquer : je voudrais une liste alphabétique et chaque lettre serait clicable et contiendrait des informations.
Je me permets de mettre un lien qui sera sans aucun doute plus explicite.
http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Ville_de_France
si je clic sur la lettre A toutes les villes apparaissent, j'obtiens la même réaction quelque soit la lettre sur laquelle je clic.
Je dois vous précisez que je suis nulle avec les termes techniques et que je suis très lente à la compréhension.
Merci pour la prochaine réponse.
Je suis incapable de donner un nom à ce que je voudrais réaliser dans mon forum http://coutureplaisir.forumgratuit.be/
J'essaie d'expliquer : je voudrais une liste alphabétique et chaque lettre serait clicable et contiendrait des informations.
Je me permets de mettre un lien qui sera sans aucun doute plus explicite.
http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Ville_de_France
si je clic sur la lettre A toutes les villes apparaissent, j'obtiens la même réaction quelque soit la lettre sur laquelle je clic.
Je dois vous précisez que je suis nulle avec les termes techniques et que je suis très lente à la compréhension.
Merci pour la prochaine réponse.
Dernière édition par Mdame Lili le Mar 6 Mai 2014 - 17:19, édité 1 fois
Re: Comment réaliser ce genre
Bonjour !
Au clic sur le A par exemple on arrivera sur un sous-forum ou un sujet listant tout ce qui parle d'aiguilles et autres choses commençant par A ?
Au clic sur le A par exemple on arrivera sur un sous-forum ou un sujet listant tout ce qui parle d'aiguilles et autres choses commençant par A ?
Re: Comment réaliser ce genre
Bonsoir,
***uniquement si vous fonctionnez par messages***
Il vous suffit de copier le lien des messages, par exemple ici, il vous faudrait cliquer sur "Comment réaliser ce genre" (soit le titre du sujet).
Ensuite, il vous suffit de mettre un lien aux lettres du récapitulatif
***uniquement si vous fonctionnez par messages***
Il vous suffit de copier le lien des messages, par exemple ici, il vous faudrait cliquer sur "Comment réaliser ce genre" (soit le titre du sujet).
Ensuite, il vous suffit de mettre un lien aux lettres du récapitulatif
- Code:
[url=lien]A[/url], [url=lien]B[/url], [url=lien]C[/url], etc.
Invité- Invité
Re: Comment réaliser ce genre
Je me suis sans doute mal exprimée, j'essaie autrement
ici http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
je veux insérer les lettres de A à Z.
Lorsque les participantes choisiront en faisant clic sur la lettre A elles obtiendront ceci
Si elles choisissent la lettre P elles obtiendront ceci
Et chaque fois une image commençant par la lettre choisie.
Merci pour votre aide
ici http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
je veux insérer les lettres de A à Z.
Lorsque les participantes choisiront en faisant clic sur la lettre A elles obtiendront ceci
Si elles choisissent la lettre P elles obtiendront ceci
Et chaque fois une image commençant par la lettre choisie.
Merci pour votre aide
Re: Comment réaliser ce genre
Bonjour,
Vous voulez donc faire un tableau à onglets ?
Si oui : https://forum.forumactif.com/t310879-tableaux-a-onglets?highlight=onglets
Vous voulez donc faire un tableau à onglets ?
Si oui : https://forum.forumactif.com/t310879-tableaux-a-onglets?highlight=onglets
Invité- Invité
Re: Comment réaliser ce genre
Re,
Vous pouvez adapter le tableau à onglets ; il s'agit du même principe.
Vous pouvez adapter le tableau à onglets ; il s'agit du même principe.
Invité- Invité
Re: Comment réaliser ce genre
Bonjour,
Peut-être voulez-vous parler de l'indexation comme expliqué dans ce tutoriel sur l'Indexation d'une section ?
Cordialement.
Peut-être voulez-vous parler de l'indexation comme expliqué dans ce tutoriel sur l'Indexation d'une section ?
Cordialement.
Re: Comment réaliser ce genre
Avant d'éditer mon message pour cocher l'icone résidu je vais tester si j'obtiens réellement ce que je désire
Re: Comment réaliser ce genre
AoF-Neptune a écrit:Bonjour !
Au clic sur le A par exemple on arrivera sur un sous-forum ou un sujet listant tout ce qui parle d'aiguilles et autres choses commençant par A ?
Oui c'est cela que je recherche
Re: Comment réaliser ce genre
Pas de réponse de AoF-Neptune
Re: Comment réaliser ce genre
Tu voudrais des ancres non ?
que toutes les lettres soient en haut et que en cliquant sur l'une d'elle tu te retrouve dans la même page (ou une différente d'ailleurs) mais au niveau de la lettre choisi) ?
Si c'est le cas, va faire un tour ici.
que toutes les lettres soient en haut et que en cliquant sur l'une d'elle tu te retrouve dans la même page (ou une différente d'ailleurs) mais au niveau de la lettre choisi) ?
Si c'est le cas, va faire un tour ici.
Re: Comment réaliser ce genre
Désolé, je n'avais pas eu le temps de me pencher de nouveau sur la question.
S'il s'agit de créer un menu qui va rediriger le membre au clic sur une lettre, il y a plusieurs possibilités.
Utiliser la description de la catégorie comme ici
Section graphique
La section les forums spécialisés utilise ce procédé. Au clic sur un nom, cela redirige vers m'extérieur.
Il est bien evidemment possible de positionner les liens en ligne et non en colonne comme sur cet exemple.
Il est aussi possible d'utiliser non pas une catégorie pour cela mais de placer le bandeau de lettres dans le cadre d'accueil de votre forum.
Dans ce cas chaque lettre pointe au choix vers un sujet ou un sous-forum et Nightmare a donné le principe de base plus haut
Autre possibilité si vous souhaitez stocker tout le contenu sur une même page et n'afficher que le contenu A au clic sur A puis le B si le membre clique B, et cela sans que le membre soit redirigé, ça passera par un tableau à onglets dont là encore Nightmare vous a fourni un lien. L'inconvénient de cette technique est qu'elle se limitera à une capacité de 64000 caractères qui risque d'être vite atteinte.
Troisième solution très facile à mettre en oeuvre, le listing de sujets comme sur ce forum.
Ce sujet posté en annonce globale apparait sur chaque sous-forum.
Il n'y a pas dessus le bandeau avec toutes les lettres, mais il suffit de le rajouter.
Là encore on est bridés par la limite de 64000 caractères par message, mais le forum en question a contourné le souci en mettant le début sur un message et la fin sur le message suivant.
Bien que le listing ait été tenu de longues années à la main, l'astuce visant à automatiser la chose a été donnée par Chacha
En faisant abstraction de l'aspect visuel des exemples fournis (l'apparence, suffit de la modifier) quel procédé se rapproche le plus de ce que vous souhaitez ??
S'il s'agit de créer un menu qui va rediriger le membre au clic sur une lettre, il y a plusieurs possibilités.
Utiliser la description de la catégorie comme ici
Section graphique
La section les forums spécialisés utilise ce procédé. Au clic sur un nom, cela redirige vers m'extérieur.
Il est bien evidemment possible de positionner les liens en ligne et non en colonne comme sur cet exemple.
Il est aussi possible d'utiliser non pas une catégorie pour cela mais de placer le bandeau de lettres dans le cadre d'accueil de votre forum.
Dans ce cas chaque lettre pointe au choix vers un sujet ou un sous-forum et Nightmare a donné le principe de base plus haut
- Solution 1:
- Nightmare. ♕ a écrit:Bonsoir,
***uniquement si vous fonctionnez par messages***
Il vous suffit de copier le lien des messages, par exemple ici, il vous faudrait cliquer sur "Comment réaliser ce genre" (soit le titre du sujet).
Ensuite, il vous suffit de mettre un lien aux lettres du récapitulatif- Code:
[url=lien]A[/url], [url=lien]B[/url], [url=lien]C[/url], etc.
Autre possibilité si vous souhaitez stocker tout le contenu sur une même page et n'afficher que le contenu A au clic sur A puis le B si le membre clique B, et cela sans que le membre soit redirigé, ça passera par un tableau à onglets dont là encore Nightmare vous a fourni un lien. L'inconvénient de cette technique est qu'elle se limitera à une capacité de 64000 caractères qui risque d'être vite atteinte.
- Solution 2:
- Nightmare. ♕ a écrit:Vous voulez donc faire un tableau à onglets ?
Si oui : https://forum.forumactif.com/t310879-tableaux-a-onglets?highlight=onglets
Troisième solution très facile à mettre en oeuvre, le listing de sujets comme sur ce forum.
Ce sujet posté en annonce globale apparait sur chaque sous-forum.
Il n'y a pas dessus le bandeau avec toutes les lettres, mais il suffit de le rajouter.
Là encore on est bridés par la limite de 64000 caractères par message, mais le forum en question a contourné le souci en mettant le début sur un message et la fin sur le message suivant.
Bien que le listing ait été tenu de longues années à la main, l'astuce visant à automatiser la chose a été donnée par Chacha
- Solution 3:
- Chacha a écrit:Peut-être voulez-vous parler de l'indexation comme expliqué dans ce tutoriel sur l'Indexation d'une section ?
En faisant abstraction de l'aspect visuel des exemples fournis (l'apparence, suffit de la modifier) quel procédé se rapproche le plus de ce que vous souhaitez ??
Re: Comment réaliser ce genre
Donc si je comprends bien, tout le contenu serait présent sur la même page et le contenu affiché changerait en fonction des clics sans rediriger l'utilisateur.
C'est donc un système à onglets qui correspond le mieux.
C'est donc un système à onglets qui correspond le mieux.
Et je pense que le problème sera identique. Que ce soit dans votre message d'accueil ou dans un message vous serez exposée à la limite des 64000 caractères déjà mentionnée plus haut.Mdame Lili a écrit:Je ne peux mettre la totalité des images, car cela représente 26 pages A4.
Re: Comment réaliser ce genre
Je vais essayer demain dans la poubelle de mon forum de réaliser en brouillon des onglets.
Je vous tiens informé, merci à vous
Je vous tiens informé, merci à vous
Re: Comment réaliser ce genre
J'avais prévenu que j'étais loin d'être évoluée.
J'ai réussi ceci
Code:
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
Ai-je quelque chose de bon ? Ou est-ce nul de nul (ce qui ne m'étonnerait pas !)
Guidez-moi, j'ai réellement besoin de vous, merci
J'ai réussi ceci
Code:
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
Ai-je quelque chose de bon ? Ou est-ce nul de nul (ce qui ne m'étonnerait pas !)
Guidez-moi, j'ai réellement besoin de vous, merci
Re: Comment réaliser ce genre
Je réessaye, j'ai fait un copier-coller de https://forum.forumactif.com/t310879-tableaux-a-onglets?highlight=onglets
Je crois que j'aurai plus facile.
J'ai peur .... si je fais une grosse bêtise, mon forum n'en subira-t-il pas les conséquences ?
Je crois que j'aurai plus facile.
J'ai peur .... si je fais une grosse bêtise, mon forum n'en subira-t-il pas les conséquences ?
Re: Comment réaliser ce genre
Je verrai lundi si j'ai reçu confirmation que mon travail (si je pratique mal) n'altérera pas le fonctionnement de mon forum.
Re: Comment réaliser ce genre
Personne pour me rassurer ?
Re: Comment réaliser ce genre
Mdame Lili a écrit:Personne pour me rassurer ?
Bonjour Mdame Lilli. De toute façon si le code n'est pas bon, vous pouvez l'enlever.
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}
Ne le mettez pas deux fois, ça ne sert à rien (donc enlever ce qui est en gras).
A mettre dans panneau d'administration > affichage > couleur > feuille de style css.
Il manque un bout dans ce code html : les fermetures des premières balises.<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3
A mettre... où vous voulez sur le forum (Page d'accueil, message, page html...)<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>
N'oubliez pas de mettre le javascript qui va avec pour faire fonctionner les onglets.
- Code:
$(function(){
var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
});
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Comment réaliser ce genre
Merci pour tes précisions.
Une autre pour changer un peu
Ce que tu viens de m'expliquer c'est à faire via le panneau d'administration, ok.
Moi je veux que cela n'apparaisse que dans un seul sujet ici en fait
http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
mon forum étant http://coutureplaisir.forumgratuit.be/, sans être inscrit et s'être présenté rien ne peux être lu.
Donc comment dois-je procéder pour inclure toutes tes explications dans le sujet
http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
Merci à toi pour de plus amples explications
Une autre pour changer un peu
Ce que tu viens de m'expliquer c'est à faire via le panneau d'administration, ok.
Moi je veux que cela n'apparaisse que dans un seul sujet ici en fait
http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
mon forum étant http://coutureplaisir.forumgratuit.be/, sans être inscrit et s'être présenté rien ne peux être lu.
Donc comment dois-je procéder pour inclure toutes tes explications dans le sujet
http://coutureplaisir.forumgratuit.be/f432-70-lexique-image-de-couture
Merci à toi pour de plus amples explications
Re: Comment réaliser ce genre
Alors,
Pour le css c'est toujours là où je l'ai dit, et pour le javascript aussi.
C'est juste cette partie :
Attention ! Il faut accepter le html sur le forum. Vous avez un tutoriel qui explique comment faire.
Pour le css c'est toujours là où je l'ai dit, et pour le javascript aussi.
C'est juste cette partie :
qu'il faut mettre dans le sujet.<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>
Attention ! Il faut accepter le html sur le forum. Vous avez un tutoriel qui explique comment faire.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Comment réaliser ce genre
Merci à toi.
Je vais essayé de trouver un bon moment de temps disponible afin d'agir sereinement.
Je vais essayé de trouver un bon moment de temps disponible afin d'agir sereinement.
Re: Comment réaliser ce genre
Sereinement et posément......
Re: Comment réaliser ce genre
Ça se passe bien ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Comment réaliser ce genre
Je n'ai pas pu commencer de la visite, de la visite , toujours de la visite à l'improviste.
Je vous tiendrai au courant.
Je vous tiendrai au courant.
Re: Comment réaliser ce genre
Oups je viens de vérifier en ce qui concerne le HTML c'est ok.
La suite est pour demain - normalement
La suite est pour demain - normalement
Re: Comment réaliser ce genre
Ben non c'est pas aujourd'hui, je ne suis pas en forme niveau santé
Page 1 sur 3 • 1, 2, 3
Sujets similaires
» comment realiser un effet accordeon dans un sujet
» Comment réaliser un spoiler?
» comment realiser cet effet de lightbox sur mon forum
» comment crée ce genre de trame
» Comment obtenir ce genre de bloc ?
» Comment réaliser un spoiler?
» comment realiser cet effet de lightbox sur mon forum
» comment crée ce genre de trame
» Comment obtenir ce genre de bloc ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 3
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum