128 appréciations
Hors-ligne
|
 à toutes et tous
Suite à mes recherches sur Diztest pour modifier dynamiquement les pages de nos blogs, j'ai réaliser un tuto pour créer une barre flottante comme celle de 2009 mais en employant du Javascript.
J'ai placé ce tuto sur mon blog BRICABRAC pour faire suite à la précédente, en HTML et CSS. A cette occasion j'ai essayé de bien expliquer le cheminement pour bien utiliser ma nouvelle méthode, largement commentée.
Mais finalement il y a que très peu de choses à modifier pour sa personnalisation... sans plus attendre lisez ce tuto [lien] et venez en discuter ici.
J'attends vos réactions et votre avis qui m'intéresse énormément.
:by:
|
|
|
|
128 appréciations
Hors-ligne
|
 Phil
 je suis content de voir que tu as bien assimilé la méthode.
Tu m'as devancé pour le rajout d'un bouton à cette barre. Je pense que tu as mis en application un autre tuto [lien]. Je suis persuadé qu'une fois avoir compris le système, le rajout ou les modifications sont très simples, surtout en respectant la structure du code, que je crois avoir bien commenté. Les commentaires sont très efficaces lors d'interventions en maintenance, il ne faut pas les négliger, ce sont des guides et des aides mémoires très importants.
Voilà je vais mettre un lien vers ton blog, en exemple sur mon tuto.
Bon dimanche 
|
|
|
maniaclic
|
 merci papyclic
pour le lien supplémentaire j'ai juste rajouter les lignes comme sur ton code mais avec un lien,img,barre etc sur 6
par contre tu vois on fait bien de relire et relire ,parce que je cherchais pour mettre la barre verticale ,et je viens de voir comment tu fais
:by:
|
|
|
|
128 appréciations
Hors-ligne
|
Noëlle
Tout d'abord je vais dire comme souvent en les hommes politiques...
"Merci d'avoir posé cette question... il fallait la poser... je vais y répondre avec plaisir... blablabla!!!"
Pendant ce temps là... ils réfléchissent comment contourner le problème posé... pour répondre complétement hors sujet.
Je ne ferai pas la même chose na!!!
Actuellement tu cherches et tu trouves sur Internet des objets, le code est rédigé comment... souvent en Javascript ou en Flash... donc pourquoi pas moi... 
Quelle est la différence entre les deux?
- méthode HTML+CSS... tu écris toi-même le HTML et le CSS, que tu insères dans la page avec l'aide des bordures, tu ne gères pas son emplacement ou très peu par rapport à la nouvelle méthode.
- méthode DOM(Document Object Model)+Javascript... soit du DHTML, programmation dynamique par l'objet, elle permet d'accéder dans toutes les parties d'une page et d'insérer du code HTML ainsi que du CSS. C'est le Javascript qui écrit le HTML pour toi.
C'est pour cette raison que mes recherches s'orientent dans ce sens et je pense qu'à l'avenir ça sera également pour B4E l'ouverture à améliorer, pour encore mieux personnaliser nos blogs avec j'espère, un bon outil confectionné par KL, avec de nouvelles possibilités d'insérer du code, permettre des procédures dont nous n'avons pas accès actuellement
Y a-t-il certaines compatibilités différentes?
Actuellement c'est un choix à faire selon le but à atteindre, je dirai pas compatible dans le fonctionnement actuel, puisque l'on utilise les bordures, en principe on ne peut pas modifier la barre en HTML par la méthode DHTML. C'est une question de chargement de page, le HTML doit être écrit avant l'action du Javascript.
Là est le gros avantage de la nouvelle méthode, tu peux insérer du HTML dans une structure existante.
Comment savoir si l'on doit préférer telle ou telle méthode? Je crois qu'il faut tester et l'employer pour s'en rendre compte. Il me semble, en regardant bien le déroulement du sénario, étape par étape, bien suivre le plan, lire les commentaires, l'utilisation des variables permettant d'avoir que peu de choses à rajouter pour modifier le code, personnaliser certaines valeurs.
Egalement souvent on nous pose la question, "C'est du CSS ou du HTML", là dans le même code permet de créer des éléments HTML(div, p, img, ul, ect...), de mettre du style, rajouter des attributs, à créer des identifiants, etc...
Donc il ne faut pas mélanger les 2 méthodes sur le même objet, mais elles peuvent cohabiter. Tu peux créer une barre flottante nouvelle méthode et garder ton blocdroit en HTML. Mais tu ne peux pas, en principe, insérer un module avec la nouvelle méthode dans ton blocdroit conçu avec l'ancienne méthode, ça sera peut-être possible à l'avenir mais pas actuellement.
Voilà... ai-je bien répondu ?
:by:  
|
|
|
|
128 appréciations
Hors-ligne
|
Simon
Simon, tu as réussi, même en vertical.
Pour les accents de précédente, dans mon code tu copies il y a les caractères spéciaux pour afficher les accents.
J'ai mis un lien sur ton blog où tu as la barre, avec ton avatar, dis-moi si ça te convient. Si tu mets une barre sur ton blog corse je changerai le lien. Peut-être que tu ne veux pas de lien sur ton labo.
Bonne soirée
|
|
3757 appréciations
Hors-ligne
|
re
Je l'ai mise sur "paysages de Corse" [lien]je préfère ce lien car "labo" c'est un peut mon bazar ! http://paysages-corses.blog4ever.com/blog/index-192458.html
Sur IE8 il faut cliquer sur "affichage de compatibilité"
Petite erreur pour le modele 5 tu dis pour le haut :flech: top, alors que c'est head
Pour les accents tu as ça "barreImg1.setAttribute("alt", "Page précédente"); et ça ne marche pas.
Merci en tout cas car tu as fait un sacré boulot.
|
|
128 appréciations
Hors-ligne
|
...
:b2: Simon c'est bon j'ai rectifié le tire pour "page precedente", c'est le nouveau composeur qui met les caractères spéciaux et je n'avais pas vu l'affichage.
Pour top et head également.
Ces petits soucis prouvent encore une fois, que le travail perso à besoin du soutien d'une équipe, surtout en informatique, on peut passer 100 fois sur la même erreur sans la voir.
J'ai changé le lien vers ton blog corse, je pense également que c'est mieux ainsi.
Bonne soirée
|
|
3757 appréciations
Hors-ligne
|
re
Super tout va bien:
En effet les accents posent problème mais ce n'est pas grave:
Il reste: barreImg5.setAttribute("alt", "Envoyer un mail à PapyClic le webmaster de DizTest");
Bonne soirée
|
|
128 appréciations
Hors-ligne
|
...
 :b2: c'est fait.
|
|
|
|
|
|
|
|
|
|
112 appréciations
Hors-ligne
|
Je t'avoue que je préfère la barre à l'horizontale, alors quitte à rajouter une couleur, j'ai essayé de mettre une image en fond, juste pour voir ce que ça donnait, en me disant que si ça cache trop le contenu et que c'est fatiguant, j'améliorerais mes images pour qu'elles se voient mieux.
Donc, j'ai essayé ça dans les bodures de pages sans oublier de fermer le div
et j'ai rajouté ça dans le css
Mais, ça marche pas. En fait, mon image est bien là, mais en bas du menu.
C'est pas bien grave, je voudrais juste comprendre pourquoi ça marche pas, c'est juste pour apprendre un peu plus, sinon pour mes images, je les refais en mettant une bordure foncée et elles devraient ressortir.
Rajout: j'ai enlevé le code, enlevé le #barrenav dans le css, remis le code que j'avais quand je t'ai posé ma première question mais j'ai cette phrase (celle qui débute ton article) dans le menu gauche tout en bas Le code complet est à mettre dans la bordure gauche/droite, où vous modifierez ce qui est en rouge pour le personnaliser. ![]() j'ai aucune idée comment cette phrase peut être là alors que j'ai copié un code qui était bon.
Alors, je vais simplement reprendre mes images pour qu'elles soient plus visibles, mais j'aimerais bien enlever cette phrase. Sais-tu comment je peux faire?
Merci de ta réponse et désolée de te faire perdre du temps ![]()
:c9: Derni?re modification le 26-01-2011 ? 04:47:23
|
|
128 appréciations
Hors-ligne
|
Cat
j'ai aucune idée comment cette phrase peut être là alors que j'ai copié un code qui était bon
Tout simplement tu avais laissé cette phrase dans la bordure, ainsi que des balises Javascript qui ne servaient à rien.
Maintenant c'est bon.
Pour la règle de CSS, c'est normal ça ne peut pas fonctionner de cette façon. Le nouveau code que j'emploie à l'étude actuellement est rajouté après la feuille de style, il faut rentrer le style dans ce code Javascript, comme je fais dans mes tutos, exemple :
barreNavigation.style.background = "transparent";
J'expliquerai ça quand j'aurai avancé dans mes tests, pour montrer comment modifier mon code ou rajouter des lignes de code. Il ne faut pas trop se précipiter, ça deviendrait trop compliquer.
J'espère que ma réponse va te satisfaire car je ne serai dispo que ce soir.
Bonne journée
|
|
|
|
)
j'ai aucune idée comment cette phrase peut être là alors que j'ai copié un code qui était bon.
