Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Diztest - Menu vertical gauche modifiable dynamiquement...

128 appréciations
Hors-ligne
:b0: à toutes et à tous

Suite à mes articles sur les possibilités de modifier dynamiquement le "Menu Barre", aujourd'hui c'est le "Menu vertical gauche" dont il est question.
Dans le même principe :
- changer le titre des modules
- déplacer les modules
- insertion d'un nouveau module

Je crois que le mieux est de lire cet article [lien] et de tester mes codes, j'attends vos réactions, si nécessaire je rajouterai quelques explications complémentaires.

:n8: C'est mon petit cadeau à l'occasion de la année nouvelle et j'en profite pour vous présenter tous mes :n7: meilleurs voeux :n7: pour 2011, surtout la santé mais également joie, bonheur, prospérité, amour...
sans oublier beaucoup de visiteurs sur vos blogs ainsi que de bons contacts au sein de Blog4ever, dans la sérénité, la joie et la bonne humeur.

:n7: Bonne continuation et bonne pioche :pp: :n7:


0 appréciations
Hors-ligne
:bd: papyclic

C'est super, ça marche et en plus c'est trés facile à comprendre.

une bonne année 2011 :ba1:
maniaclic

:b1: je viens de faire un essai avec ""module plus "" sur mon blogtest ,vraiment génial ,cela ouvre encore de belle perspective de création un grand merci pour tout le travail
:ba1: l'année 2011 commence vraiment bien félicitation :b2: :b2:
:by:

1 appréciations
Hors-ligne
:b1: ,

Hé bien à présent, avec la barre et maintenant le menu, c'est l'ensemble de nos blog qui est personnalisable :ct: !!!
Il y a eu tellement de sujets postés ici pour demander cette souplesse des modules dans le menu gauche que cela va ravir bon nombre de bloggeurs
Puis comme dit investigations parallèles, c'est simple d'utilisation

Un grand merci, une fois de plus


2 appréciations
Hors-ligne
:b1: PapyClic,

Tu n'arrêtes pas de produire des nouveautés dans ton labo ; décidément, tu nous gâtes !

:b2: pour tes trouvailles.

128 appréciations
Hors-ligne
:b1: Marithé; Noëlle, Fanfan et Phil

Merci pour vos appréciations, ils sont sympas mes nouveaux joujoux :ct:
Et ce n'est qu'un avant goût des projets en cours de KL... je crois que 2011 sera un bon millésime pour Blog4ever. :fa:

Allez! je retourne à mes codes.

Bonne pioche :pp: :ba1: :ba8: :bsg:


1 appréciations
Hors-ligne
re ,

je reposte mes questions ici concernant le menu gauche, pour que cela soit compréhensible pour ceux qui en auront l'utilité:

J'ai deux questions, je ne sais pas si tu veux deux sujets ou un seul...dis-moi si je dois en ouvrir un second.

1/Il est très facile d'insérer un nouveau module, comme "glitters-blinkies" que j'ai rajouté avant le module "photos". Si je veux en créer un autre, juste avant "glitters-blinkies", la règle du rajout avant "photos" étant déjà appliquée pour "glitters-blinkies", quel module faut-il écrire? Y a-t-il une règle, une hiérarchie automatique dans la création?
J'ai voulu placer le nouveau module "horloges" avant "glitters-blinkies", mais "menu-photos" étant pris, il s'est trouvé plus bas. J'espère que je suis claire, c'est pas évident à expliquer.....

2/Dans le nouveau module "horloges",j'aimerais insérer une véritable horloge, celle qui est en bas du menu. Je voudrais la placer entre le h2(Horloges) et le lien(horloges pour blogs), comme je l'ai fait en bidouillant sur le modèle plus bas. Est-ce possible? Insère-t-on une horloge flash dans un script comme tu as créé ou est-ce incompatible?



Bonne soirée


128 appréciations
Hors-ligne
:b1: Noëlle et les autres

Tu as très bien fait de reporter tes questions ici et un lien sur ce sujet fera suivre les éventuels lecteurs de ton sujet.

Je viens de préciser sur mon article la manière d'opérer si l'on crée plusieurs blocs car j'ai remarqué qu'il y avait plusieurs DIVs avec comme identifiant menu_perso1, alors qu'il faut créer un identifiant à chaque DIV menu_perso2, menu_perso3, etc...
Ainsi après tu peux affecter une liste de liens à chacun sans erreur, processus un peu long mais en faisant bloc par bloc on peut copier et après changer les chiffres. Je vais, dans mon prochain article, faire un exemple.
Egalement avec ce système on peut positionné les blocs, c'est là, la réponse à ta question :
Si tu as créé plusieurs DIVs
var nvDiv1 = document.createElement("div");
var nvDiv2 = document.createElement("div");
var nvDiv3 = document.createElement("div");

Tu pourras placer le deuxième DIV nvDiv2 avant le DIV nvDiv1
// affectation du module au menu avec son positionnement
menuGauche.insertBefore(nvDiv2, nvDiv1);

Les IDs peuvent servir si l'on sort de la procédure, pour recréer des variables, c'est toujours très utile.

Pour la deuxième question, tu fais un test en mettant ton code dans un bloc DIV avec ID, exemple:
**** ton code ***

Après du créé un script :

Tu remplaces ***ID*** par l'identifiant du bloc où tu veux insérer l'horloge.

Voilà je vais essayer de mettre un exemple ce soir.

:by: bonAp


1 appréciations
Hors-ligne
Ouf ouf ouf, pour la première question, je vais jouer la prudence et attendre ton deuxième article, je ne suis pas calée du tout en javascript, et je ferais que des bêtises.

Pour la deuxième, j'ai suivi correctement tes conseils je pense, mais l'horloge se trouve au dessus, et non entre le "h2 horloges" et le lien "horloges pour blogs". Ai-je zappé quelque chose?
Je te mets une capture, c'est plus parlant:



C'est là qu'on se rend compte du travail en amont!!!!!!

Bonne soirée


128 appréciations
Hors-ligne

:ok1: Noëlle, c'était pour tester si ton code était accepté.
Je vais rectifier le tire et placer l'horloge entre le titre h2 et la liste.

:by:

128 appréciations
Hors-ligne
...

L'horloge est en place le code modifié pour l'insérer :



J'ai changé l' ID de ton code swf_horloge tu laisses comme ça.

Pour le reste on verra demain, je fais autre chose en même temps.

@demain


1 appréciations
Hors-ligne
:ct: merci merci! C'est exactement ce que je voulais Je ne touche plus à rien et fais une sauvegarde par précaution.
Je vais voir en détail et étudier le code.

merci!


112 appréciations
Hors-ligne
:bd: ,

C'est vraiment super ce que tu nous offres là :ct: :b2: :b2:

Mais avant de le tester, j'avais une petite question: sur un blog gratuit, est-ce qu'on peut mettre les codes aussi sur la page d'accueil?

et aussi, quand tu parles des fichiers externes liés, je n'ai pas réussi à trouver sur ton blog si tu expliques ce que c'est

c'est du beau travail! :c9:

128 appréciations
Hors-ligne
:b1: Cat

Désolé de répondre à retardement mais hier j'avais des soucis de chargement.
est-ce qu'on peut mettre les codes aussi sur la page d'accueil?

Oui c'est possible pour les blogs gratuits, sur la page d'accueil ou sur un article mais en utilisant le nouveau composeur. Par contre si l'on veut sur tout le blog, il faut l'accès aux bordures donc en version payante.
quand tu parles des fichiers externes liés,

J'ai simplement indiqué ça pour les initiés mais j'expliquerai cette procédure par la suite, j'essaie d'expliquer progressivement.

:pp: Bonne soirée


112 appréciations
Hors-ligne
Super!! :b2: beaucoup :ct: :c9:

112 appréciations
Hors-ligne
:bd: ,

J'ai testé certains éléments de tes nouveaux bijoux: sur le menu et sur la barre dans un nouveau blog (en version gratuite que j'ai créé il y a peu de temps) [lien]

- La première chose: en copiant ton premier code (sur l'article du menu vertical)
j'ai ces indications (sur la page d'accueil et les 2 articles où je l'ai mis) qui se sont ajoutées et que je ne sais pas comment enlever:

Nombre de modules : 3

Module N°0: Articles
Module N°1: Forum
Module N°2: Partenaires


- La deuxième chose: tes codes sont parfaits pour la page d'accueil et les articles mais comment faire pour les catégories déjà créées? car quand on clique sur une catégorie, c'est la règle première qui s'applique... (pour mon cas Articles au lieu de Lecture, Forum au lieu de Musique) ... n'y a-t-il pas un moyen de le mettre via le css pour qu'il s'applique comme une règle de base?

j'ai peut-être pas tout compris non plus ou pas tout vu dans tes articles

- enfin une dernière question, comment déplacer un article (pour moi qui était dans l'ancienne catégorie Articles, maintenant Lecture, pour la mettre dans la nouvelle catégorie Musique qui était anciennement la catégorie forum)?

Merci beaucoup d'avance pour tes réponses et le mal que tu te donnes pour notre plus grand bien :b2: :pp: :c9:

128 appréciations
Hors-ligne
:b1: Cat

Merci de testé mes codes, ça m'aidera pour les améliorer ou les corriger.

Pour ta première question, il suffit de retirer le code du petit outil qui sert uniquement pour analyser les modules existants. Ce code là c'est pour toi mais il ne faut pas le laisser.

La deuxième question je n'ai pas bien compris ton problème, c'est sur quel menu, barre ou vertical?

Je ne comprends pas non plus tu parles d'articles à déplacer et de catégories.

Si tu peux mieux me préciser, je regarderai ce soir.

:by:


112 appréciations
Hors-ligne
:b1: ,

J'ai enlevé le 1er code, tout est rentré dans l'ordre.

Pour ma deuxième question, je vais essayer d'être plus claire:

J'avais le module Articles que j'ai changé en Lecture
et le module Forum que j'ai changé en Musique

En arrivant sur la page d'accueil, tout est correct dans la barre et le menu vertical, les deux modules sont bien indiqués.

Dans le menu vertical, dans la rubrique Lecture, il y a plusieurs liens, dont par exemple Livres * Asie *: quand je clique sur ce lien ça donne ça [lien]
Les paramètres de base, soient Articles et Forum reviennent
Et dans cette même catégorie Livres * Asie * quand je clique sur le seul article que j'ai mis pour l'instant: Le Faucon du Siam, tout revient dans l'ordre [lien]

C'est normal puisque j'ai ajouté le code dans l'article Le Faucon du Siam. Voilà pourquoi je me demandais s'il était possible que ce code soit appliqué à chaque lien de chaque module et si oui, comment faire, car quand on créé une catégorie on a pas la possibilité de se mettre en mode html pour entrer le code.

Enfin, dans la partie Barre, quand je clique sur Lecture ou Musique, les modules redeviennent Articles et Forum dans la partie barre et le menu vertical.


Pour ma dernière question, j'ai trouvé la solution, je pense

Voilà, finalement mon problème se résume à comment appliquer tes codes pour qu'ils soient visibles sur tout le blog, où que l'on clique.

Merci d'avance pour tes réponses, j'adore ces nouveautés, c'est vraiment super! :c9:

112 appréciations
Hors-ligne
:bd: ,

Bon, oublie mon précédent message... je pense que j'avais pas tout compris :ppc: (remarque que j'ai pas encore tout compris, mais j'essaie)

Donc, j'ai remplacé le module Articles par Lecture,
j'ai rajouté un nouveau module Musique

Pour simplifier les choses, je me suis créé un article Codes Javascript en brouillon que je pourrai copier sur chaque nouvel article... enfin, quand il sera au point

et ce que j'ai compris (enfin je crois) c'est que je dois appliquer dans cette liste de code tous les liens d'articles dans le menu vertical mais je sais pas encore comment le faire ...

C'est pourquoi je me demande (et je te demande s'il n'y aurait pas un moyen d'attribuer des règles directement dans le CSS pour faire en sorte que ces codes soient pris en compte pour tout le blog (comme quand on crée des #div...)

Pour le mien, c'est pas grave, il est tout nouveau et il n'y a que 2 articles, mais je pense aux autres blogs en version gratuite qui n'ont pas accès aux bordures de pages et qui ont déjà plein d'articles.

J'espère que je suis assez claire dans ce que j'écris

et encore une fois :b2: pour toutes ces possibilités que tu nous donnes de créer des merveilles :c9:

128 appréciations
Hors-ligne
:b0: Cat

Je crois que tu as compris maintenant, c'est résumé au début du premier article...
Extrait :
Je précise que ces codes sont à mettre :
- soit dans un article en mode HTML avec le nouveau composeur (actif sur l'article uniquement)
- soit dans la bordure gauche/droite (actif sur tout le blog)
- ou dans un fichier pour ceux qui connaissent le système de fichier externe lié


Cat, c'est tout à fait normal, les versions payantes ont plus de possibilités... sinon pourquoi payé!!!

Mais pour les versions gratuites il y a quand même, certaines possibilités, mais avec beaucoup plus de travail perso.

Ces procédures ne peuvent pas se mettre dans le CSS.

Bon dimanche :pp:




0 appréciations
Hors-ligne
:bd: Merci pour ces différents conseils. Ils me sont très utiles car je suis vraiment au b.a.-ba... j'avance donc tout doucement dans les différentes étapes!

En revanche, je ne comprends pas très bien comment insérer mon nouveau modules "catalogue" après "articles" et ainsi mettre dans l'ordre : Articles / Catalogue / Partenaires / Newsletter / Sondages et Statistiques?

D'autre part, ne voulant pas modifier mon blog avec le Diz Perso ayant trop peur de tout perdre.... je ne sais pas comment ajouter d'onglet dans la barre Menu en haut en dessous du titre (Accueil - Article ...)
:b2:
Marie

128 appréciations
Hors-ligne
:b1: Marie

Le module "Catalogue" a été créé en HTML je pense, il ne fait pas partie de la structure de ton modèle, actuellement je ne pense pas pouvoir le déplacer avec mes nouveaux codes. Il faut le recréer avec le nouveau code et le positionner, là c'est possible.
Si tu veux je regarderai ce que je peux faire mais pas de suite.


Dans ton modèle le menu du haut a l'ID menu donc dans mon article[lien], le code, à la première ligne, tu remplaces barre par menu
comme ci-dessous
var menu_barre = document.getElementById("menu");


Voilà j'espère que ces explications t'aideront.

Bonne continuation :b2:



0 appréciations
Hors-ligne
:b1: ,

Tout d'abords :b2: pour cette nouveauté c'est génial :ct:

Je l'ai appliqué sur un autre de mes blog et ça fonctionne très bien.

Mais j'ai quand même une question :

voici une partie mon code :
// création du texte de chaque lien
var texteNvLien0 = document.createTextNode("titre 1"); // premier lien
// création des attributs des liens
nvLien0.href = "adresse de mon article"; // premier lien
// affectation du texte au lien
nvLien0.appendChild(texteNvLien0); // premier lien

// création du texte de chaque lien
var texteNvLien1 = document.createTextNode("titre 2");
// création des attributs des liens
nvLien1.href = "adresse de mon article";
// affectation du texte au lien
nvLien1.appendChild(texteNvLien1);




Je voudrai placer une image devant le titre de ma catégorie article 1 et article 2, j'utilise habituellement ce code dans les catégories et le menu de droite
article 1


Mais quand je place ce code comme ça :(" article 1")

Oup's ça fait disparaitre le nouveau module.

Merci de ton aide
Nathalie



128 appréciations
Hors-ligne
Bonsoir Nathalie

:b2: d'employer mes codes

Ok! j'ai bien compris, je n'ai pas testé ce rajout d'image dans le titre du lien.
C'est bien ça ?
Rien à voir avec ce que l'on fait en HTML.
C'est une procédure dynamique, il faut, en théorie, créer l'élément HTML img et le concaténer au texte.
Je vais essayer, je ne suis pas certain de réussir.

@demain je pense :pp:


0 appréciations
Hors-ligne
re :b1:

Oui c'est bien ça (rajout d'image dans le titre du lien)
pour pouvoir mettre des "puces" ou des gifs "news" par exemple
comme sur le reste du blog.

Ok bien compris la différence.

(pour le mot concatener, j'ai été voir la définition :ptdr:
"désigne l'action de mettre bout à bout au moins deux chaînes..."
Ok compris le principe de ce qui faut faire


Merci pour tes recherches
Bonne soirée, à demain
Nathalie




128 appréciations
Hors-ligne
:b0: Nathalie

Bien j'ai trouvé le code il fonctionne, je l'ai testé dans mon dernier article [lien]

// Création de puces et son insertion avant le texte du lien
// Création élément img
var imgPuce0 = document.createElement("img");
// Création des attributs, adresse et bordure
imgPuce0.setAttribute("src", "https://static.blog4ever.com/2009/10/354722/artfichier_354722_127203_201003303206403.png");
imgPuce0.setAttribute("border", "0");
// Affectation au lien
nvLien0.appendChild(imgPuce0);


Un peu lourd comme code car il faut créer un élément img pour chaque lien (imgPuce0, imgPuce1, etc...). Mais avantage à en tirer, à chaque lien une nouvelle image, si on le souhaite. Peut-être que je trouverai mieux un jour... une nuit. :ptdr:

Bonne nuit


0 appréciations
Hors-ligne
:b1:

Ok ça fonctionne j'ai réussi à mettre les images comme tu l'a fait
sur diztest pour "DizPerso Labs" et "Nouveau composeur"

mais je voudrai faire comme "Astuces et générateur"
pourrai tu me dire ce qui faut changer dans le code que tu m'as donné

:b2:
Nathalie



128 appréciations
Hors-ligne
:b0: Nathalie

Sur DizTest ce n'est pas avec le code traité sur ce sujet.
C'est totalement différent regarde cet article [lien].
Si tu as des difficultés ouvre un nouveau sujet, pas dans cette catégorie, mais dans "CSS & DIZPERSO", pour une meilleur compréhension.

Bonne journée :pp:


0 appréciations
Hors-ligne
:b1:

désolé, mais je comprends pas :snif:

Voici mon code, mon image puce est à gauche du texte du lien
c'est parfait pour un gifs "new's" par exemple, mais je voudrai que l'image soit à droite du texte du lien car j'ai placé une "puce" dans tous les autres modules du blog


// création du texte de chaque lien
var texteNvLien0 = document.createTextNode("article1"); // premier lien
// création des attributs des liens
nvLien0.href = "adresse du lien "; // premier lien
// affectation du texte au lien
nvLien0.appendChild(texteNvLien0); // premier lien
// Création de puces et son insertion avant le texte du lien
// Création élément img
var imgPuce0 = document.createElement("img");
// Création des attributs, adresse et bordure
imgPuce0.setAttribute("src", "https://static.blog4ever.com/2009/10/354722/artfichier_354722_127203_201003303206403.png");
imgPuce0.setAttribute("border", "0");
// Affectation au lien
nvLien0.appendChild(imgPuce0);



Merci
Nathalie


128 appréciations
Hors-ligne
:b1: Nathalie

Je ne vois pas de puce sur tes modules, je ne comprends pas ce que tu veux faire.

Le code que tu as mis est bon sauf il manque la première ligne pour la création du lien :
// création du lien
var nvLien0 = document.createElement("a");

Tout ce code est à mettre pour chaque lien créé dynamiquement et il faut aussi les affecter à un menu ou dans un bloc.
mod0Liste0.appendChild(nvLien0);

Si tu as beaucoup de liens à traiter il faut passer par l'autre méthode HTML+ CSS

Dis moi exactement où tu veux mettre ce code, je regarderai pour voir quelle méthode prendre.

Bonne continuation


21 appréciations
Hors-ligne
:bd: Merci à toi je vais essayer de le faire car c'st aussi un des themes que je cherchais pour mettre en forme mon blog comme j'aimerai

Bon je l'ai fait j'ai copié ça mais ça ne marche pas il faut sûrement faire autre chose avant mais je n'ai pas trouvé....
// création du texte de chaque lien
var texteNvLien0 = document.createTextNode("titre 1"); // premier lien
// création des attributs des liens
nvLien0.href = "adresse de mon article"; // premier lien
// affectation du texte au lien
nvLien0.appendChild(texteNvLien0); // premier lien

// création du texte de chaque lien
var texteNvLien1 = document.createTextNode("titre 2");
// création des attributs des liens
nvLien1.href = "adresse de mon article";
// affectation du texte au lien
nvLien1.appendChild(texteNvLien1);



Dernière modification le dimanche 23 Novembre 2014 à 13:20:58


Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Le labo de Papyclic.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6065 autres membres