Blog d'aide de Blog4ever

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

: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

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

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:

: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

: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...



- 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


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.

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:

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

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

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.

...

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

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:

...

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

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

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

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

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

: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

:b0: Cat


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:

:bd:

Merci beaucoup! :ct:



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: