Importer jQuerry d'un fichier en même temps que le HTML ?

Bonjour !

J’essaye de faire une barre de navigation pour un site (inutile au possible, juste un prétexte pour m’exercer.) La navbar fonctionne : J’ai pris le parti d’utiliser une flexbox, plutôt qu’une liste sans puce comme j’ai pu lire dans beaucoup de tutoriels. Pour avoir testé les 2, je trouve Les propriété de la flexbox plus intéressantes :

• pour occuper tous l’espace, plutôt que d’avoir 5 boutons collés les uns aux autres à droite de l’écran;
• Pour mettre des dropdown (mon css me semble moins sale). Comme j’ai la flemme de copier coller ma navbar à chaque page… Enfin c’est surtout que j’ai la flemme de devoir la modifier sur chaque page… Elle se trouve dans un fichier à part : 0_common.html (qui contient aussi le pied de page), puis elle est importée dans chaque page html grâce à jQuerry dans body / header.

Il est maintenant l’heure de me concentrer sur l’esthétique de ma navbar, et c’est complicado.

• La première chose que j’ai voulu faire, c’est la fixer en haut, et l’afficher en permanence même en scrollant. Facile :

...
  position: fixed;
  top: 0;
...

Mais j’ai eu un pépin, la navbar masque le haut du contenu de body / main. J’ai une solution approximative : Commencer mon main avec cette navbar, à laquelle je colle style="visibility: hidden". Elle est ivisible, mais occupe l’espace, pile à la bonne taille automatiquement ! Mais je charge la barre 2 fois en faisant cela, il n’y a pas une meilleure méthode ???

Mon second problème, c’est quand j’ai intégré un logo dans la navbar, cliquable, MAIS quand il est survolé, le logo change (2 images avec un color swap). Le changement se fait grâce jQuerry encore, et un setAttribute de l’image. Malheureusement, ça se complique avec l’import. Quand je suis sur la page 0_common.html, où la navbar et le script sont écrits, tout fonctionne. Mais dès que je retourne sur la page d’accueil, où la navbar est importée, ça ne marche plus ! J’ai essayé de donner un id aux balises <script> dans 0_common.html pour l’importer de la même manière, mais rien à faire. Pouvez-vous m’aider ? Il n’y a pas d’autre solution que de copier/coller la navbar et le script à chaque page ??

Merci

Salut,

Le problème d’un fichier chargé en JS est qu’il n’est potentiellement pas référencé ou en tout cas pas aussi bien que le reste, voire qu’il peut ne pas être chargé (par exemple si le JS est désactivé ou bloqué côté utilisateur, ou qu’une erreur quelconque arrive).

Le plus simple pour ce genre de cas est de passer par un langage serveur (PHP, Python…) pour importer ton menu dans tes pages, ou d’utiliser un générateur de site statique (Jekyll, Hugo…).

Quant à ton problème de positionnement, position: fixed sort l’élément complètement du flow de calcul et il n’a donc plus d’impact sur ta page.

Le plus simple pour compenser est d’appliquer une marge de la taille de ton menu à l’élément que tu souhaites décaler, par exemple via un margin sur ton #main ou un padding sur body.

Pour ton problème de logo, le plus simple est d’utiliser du CSS pour changer le background-image plutôt que d’utiliser une image HTML.

Au passage, jQuery n’a plus un grand intérêt en 2022, les navigateurs ont comblé à peu près tous les trous qui ont poussé à sa création… en 2005.

Coucou,

Le problème d’un fichier chargé en JS est qu’il n’est potentiellement pas référencé ou en tout cas pas aussi bien que le reste, voire qu’il peut ne pas être chargé (par exemple si le JS est désactivé ou bloqué côté utilisateur, ou qu’une erreur quelconque arrive).

Le plus simple pour ce genre de cas est de passer par un langage serveur (PHP, Python…) pour importer ton menu dans tes pages, ou d’utiliser un générateur de site statique (Jekyll, Hugo…).

Je comprend le problème. J’ai appris la programmation serveur à l’école en C, et pas du tout pour des sites web, donc je ne vais pas y toucher tout de suite pour ne pas m’emmêler les pinceaux. Je vais faire du html/css encore 2 ou 3 semaines pour être plus à l’aise.

Quant à ton problème de positionnement, position: fixed sort l’élément complètement du flow de calcul et il n’a donc plus d’impact sur ta page.

J’ai vu la sortie du flux en lisant la doc de fixed justement, j’ai reconnu le même "problème" que j’avais avec les float, d’où l’envie d’en mettre un clone invisible dans le calcul "normal" pour occuper le même espace. Je peux mettre une marge, mais comme la navbar a une épaisseur qui change quand la largeur du navigateur est trop réduite, il me faut une marge variable. Je peux utiliser les variables CSS ? Je ne sais pas si c’est une bonne pratique. :/

Pour ton problème de logo, le plus simple est d’utiliser du CSS pour changer le background-image plutôt que d’utiliser une image HTML.

Justement, je l’utilise ! En fait mon logo est une une image blanche, avec arrière plan transparent. J’ai le même avec du rouge à la place du blanc. La bannière est rouge. Quand je survole le logo, je change justement background-color en blanc (juste pour le logo) et je met le logo rouge. Le color swap se fait entre les 2 couleurs du logo et de la navbar. Comme c’est blanc, j’ai essayé de chercher des méthodes pour ce cas particulier, mais rien qui puisse me donner mon rouge exact (qui n’est pas du #FF0000 )

Au passage, jQuery n’a plus un grand intérêt en 2022, les navigateurs ont comblé à peu près tous les trous qui ont poussé à sa création… en 2005.

Oups ! Voilà quelque chose que je ne savais pas ! Je vais chercher comment faire en JS pur ce pourquoi j’utilisais jQuery alors. Merci

Si tu ne contrôles pas la hauteur de ta barre de navigation, alors difficile de faire autrement puisque tu ne connais pas à l’avance tes dimensions précises…

Sauf peut-être avec position: sticky qui pourrait faire à peu près le même job dans le cas présent ?

J’ai du mal à comprendre pour ton logo… tu n’as pas le code hexadécimal du rouge ?

Je parle bien de définir ton logo comme image de fond de l’élément, sans besoin de l’élément <img>… Ton code ressemble à quoi actuellement ?

J’ai le code hexa du rouge, mais les méthodes que je trouve sont à base de filtre sepia puis de filtre hue rotate… Tomber sur la couleur voulue avec cette méthode demanderai beaucoup d’effort pour un truc pas intéressant.

Le code ? J’ai pas mon PC à disposition là, donc je l’ai pas en tpete exactement, mais ça doit être quelque chose comme ça :

    <a href="accueil.html" class="bouton_accueil"><img src="../images/logo_rouge_transparent_carre.png" alt="accueil" id="logo"class="logo_bouton_accueil"></a>

Pour le css je m’en souviens pas, faudra le relire demain.

Est-ce que tu parles de mettre le logo d’une couleur en background de la balise a, et de mettre le logo avec le color swap dans la balise img avec visibilité hidden ?

Je n’ai malheureusement pas de svg. Je me suis rendu compte qu’un fichier svg était décrit en html seulement en commençant le html il y a quelques jours, mon image a été faite en matriciel il y a quelque années. De plus, mettons que j’ai un SVG, ça retarderai le problème à plus tard, sur un projet où je n’aurai pas de svg à disposition.

Je viens de chercher sur google "technique du sprite". Tu parle bien de ça et ça ? Ca m’a l’air terriblement efficace et plus simple que mes eventlistener  ! Je vais évidemment en abuse ! Je suppose que ça m’épargner cet horrible clignotement que je vois sur le logo à chaque fois que je passe dessus ?

C’est bien une des techniques classiques pour faire ça quand on a que des images matricielles à disposition. Il existe des outils qui les génèrent automatiquement d’ailleurs (y compris sur beaucoup plus que deux images !). On utilise cette technique sur Zeste de Savoir, notre sprite étant là, si tu es curieux·se¹.

Et oui, comme l’image contenant toutes les versions n’aura pas à être rechargée au survol (vu que tout est chargé d’un coup), ça évite le clignotement !

Une autre manière de l’éviter est de faire comme tu sembles avoir fait, mais en indiquant au navigateur de précharger l’image avec une balise <meta />. Dans ton cas, un sprite reste plus adapté (ou idéalement un SVG), mais je trouve bon à savoir qu’on peut aussi faire ça (ça marche avec beaucoup de ressources différentes, d’ailleurs, pas que des images).

It works ! it works ! Mais comme je suis un peu débile, mon logo est en 3000*3000. Utiliser back-ground-size pour afficher le logo en entier me mène à avori un logo pixelisé. Bon ce n’est pas un site qui sera diffusé, donc je ne vais pas d’avantage me prendre la tête avec ça. Pour des projets plus sérieux, je le saurai. Merci à vous deux.

Ça fait une énorme image 3000px de large !

N’hésite pas à redimensionner en fonction des besoins réels d’affichage, ça peut sauver pas mal de bande passante (qui est parfois facturée voire chère, surtout sur mobile et/ou à l’étranger)