Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Nouvelle méthode pour créer une barre de navigation...

128 appréciations
Hors-ligne
:b1: à 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:
maniaclic

:b0: et bon dimanche
merci beaucoup les explications sont nickel ,je viens de faire mumuse une partie de la nuit (je savais pas quoi foutre :ptdr: :ptdr: ),pour bien comprendre ton code ,j'avoue que je me suis pris un peu la tête pour ajouter un lien de plus sur la barre ,mais comme toujours en informatique le problème viens souvent de ce qui se trouve entre l'écran et le fauteuil
c'est vrai que cela donne un plus autant pratique que esthétique au blog

merci pour le travail et a :by: pour de prochaine aventure

128 appréciations
Hors-ligne
:b0: 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 :pp:



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:

1 appréciations
Hors-ligne
:bd:

, tu nous offres une avalanche de trésors depuis les fêtes!
Je peux te poser une question concernant les deux méthodes pour créer une barre, la méthode html et la javascript? Quelle est la différence entre les deux? Y a-t-il certaines compatibilités différentes? Comment savoir si l'on doit préférer telle ou telle méthode?
Perso je travaille avec l'ancienne (moi pas trop comprendre javascript lol), et il me semble qu'elle est plus courte et simple. Qu'est-ce que tu en penses?



Derni?re modification le 23-01-2011 ? 14:19:21


128 appréciations
Hors-ligne
:b0: 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:


4050 appréciations
Hors-ligne
:b1:

J'ai testé et ça fonctionne très bien !

J'ai changé une image et gardé les autres (que j'héberge chez moi :sol: )

L'écriture en survol ne supporte pas les accents comme "page précédente" que j'ai écrit "page precedente"

Le lien sur mon labo:

[lien]

Je l'ai mise en verticale !
:b2: :pp:


128 appréciations
Hors-ligne
:b1: 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 :pp:


4050 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 :pp:


4050 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 :pp:



128 appréciations
Hors-ligne
...

:ok1: :b2: c'est fait. :pp:


112 appréciations
Hors-ligne
:b1:

J'ai testé ton code et il est super!! Tout fonctionne bien et je suis très contente :ct:

Seulement, dans ma barre flottante, je n'ai pas voulu mettre le lien pour le courriel, mais par contre j'aimerais rajouter un lien pour mettre en plein écran... sauf que je ne sais pas quel attribut lui donner pour que quand on clique sur mon image ça devienne en plein écran ?

Merci de ta réponse et de la facilité avec laquelle tu expliques tes tutoriels, c'est très agréable à expérimenter :c9:

128 appréciations
Hors-ligne
:b1: Cat

:b2: pour tes appréciations.

Je regarderai demain pour le plein écran, je n'ai pas testé encore dans cette nouvelle méthode.
C'est un événement onclick qui lance une fonction.

On ne vois pas très bien les images, mets la barre en vertical pour voir si elle est plus visible.
Regarde j'ai expliqué pour mettre en vertical.

Bonne continuation :pp:

112 appréciations
Hors-ligne
:b1: ,

Voilà je l'ai mis en vertical, tu les vois mieux? Sinon, je pense que je devrais modifier les images pour qu'elles se voient mieux et qu'elles soient moins tons sur tons, c'est dommage:(

Bonne soirée :c9:

128 appréciations
Hors-ligne
:b1: Cat

Oui c'est mieux, mais tu peux également mettre un fond à la barre, selon tes images ça peux arranger la visualisation.

Il faut modifier le background, mettre un code couleur à la place de transparent.

// Style du bloc barre de navigation
// pas de fond à cette barre
barreNavigation.style.background = "transparent";

Il faudra peut-être agrandir la barre avec des marges internes (padding) on verra après.

Bonne soirée :pp:

112 appréciations
Hors-ligne
:b1:

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
#barrenav
{
background : #;
background-image : url(https://static.blog4ever.com/2009/09/353919/artfichier_353919_203781_201101251414253.gif);
background-repeat : none;
width : 450px;
height : 80px;
}


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
:b0: 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 :pp:




112 appréciations
Hors-ligne
:bd:

Merci beaucoup! :ct:

Il ne faut pas trop se précipiter, ça deviendrait trop compliquer.


Je suis bien d'accord avec toi!
Pour l'instant, j'apprend les div et j'aime beaucoup les possibilités que ça donne

Quand tu auras rajouté le code pour le plein écran, je le rajouterai.

Merci encore pour tout ce travail! :b2: :c9:
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 6062 autres membres