Ajouter une couleur spécial à l’entête sur la page d’accueil [Résolu], Html, css, javascript |
Bienvenue invité ( Connexion | Inscription )
Ajouter une couleur spécial à l’entête sur la page d’accueil [Résolu], Html, css, javascript |
29 Jul 2019, 00:59
Message
#1
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Bonjour,
Actuellement je développe un site, et j'ai quelques petits problèmes sur l’header (l'entête principal). Le site : " monveloelectrique.store " Quelqu'un a t'il un tuto pour ajouter une couleur spécial à la police de l'entête afin qu'elle soit blanche sur l'index (page principal), et noire sur les autres pages ? Aussi, et si vous savez résoudre ce problème je saurais m'en rappeler Sur l'header (l'en-tete), j'ai un bouton " up " (une flèche qui monte, et qui me permet (quand je clic dessus) de revenir en haut de la page avec un défilement en douceur. Ce bouton fonctionne, et je n'ai pas de message d'erreur, mais... Il devrait être invisible lorsqu'on se trouve déjà tout en haut de la page. Or quand j'actualise la page je le vois tout en haut, c'est seulement quand je descend et je remonte tout en haut qu'il disparaît, et devient normal. Je ne comprends pas pourquoi le bouton up apparaît tout en haut, car je ne vois pas d'anomalie sur mon code. Voilà mon code si êtes d'accord pour m'aider s'il vous plait, ça m'arrangerait beaucoup HTML <li id="btn-up" class="btn-icone"> <a href="#haut"><button> <img src="https://cdn.shopify.com/s/files/1/0057/4986/6567/files/up.png?6952" style="height:30px"></button></a></li> JAVASCRIPT Code $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() == 0) { $('#btn-up').fadeOut("slow"); } else { if ($('#btn-up').length == 0) { $('body').append('<div id="btn-up">'); } $('#btn-up').fadeIn("slow"); } }); $('body').on('click', '#btn-up a', function(event) { event.preventDefault(); $('html,body').animate({ scrollTop: 0 }, 'slow'); }); }); |
|
|
29 Jul 2019, 12:17
Message
#2
|
|
Macbidouilleur de bronze ! Groupe : Membres Messages : 403 Inscrit : 29 Aug 2006 Lieu : France Membre no 66 917 |
Bonjour,
ce code fonctionne pour moi Dans la feuille CSS, pour information Code #topBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: #44aabb; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } et le script qui va avec Code // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("topBtn").style.display = "block"; } else { document.getElementById("topBtn").style.display = "none"; } } Ce message a été modifié par luc1en - 29 Jul 2019, 12:20. -------------------- Quelques très vieux Mac stockés ici et là.
Et enfin un ordi moderne… sous Linux. |
|
|
29 Jul 2019, 15:32
Message
#3
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Bonjour, ce code fonctionne pour moi Dans la feuille CSS, pour information Code #topBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: #44aabb; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } et le script qui va avec Code // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("topBtn").style.display = "block"; } else { document.getElementById("topBtn").style.display = "none"; } } Merci beaucoup pour ta réponse Alors voilà, j'ai remplacé mon code Javascript par celui que tu m'as donné, mais bizarrement pour moi ça ne fonctionne toujours pas. Mon code actuel : Sur HTML, j'ai une image bouton avec un "href" qui scroll en haut de la page, une "class" qui appelle CSS afin de positionner mon bouton au bonne endroit, une "id" qui appelle mon code Javascript pour l'effet de défilement. HTML <li id="btn-up" class="btn-icone"> <a href="#haut"><button> <img src="https://cdn.shopify.com/s/files/1/0057/4986/6567/files/up.png?6952" style="height:30px"></button></a></li> Sur CSS, j'ai le code qui positionne mon bouton Code .btn-menu { float:left; height: auto; width: auto; border-right: 30px solid transparent; text-align: center; top: 0px; left: 20px;; position: relative;} Sur Javascript, j'intègre ton code qui affiche le bouton si je scroll en dessous des 20px Code function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById('#btn-down').style.display = "block"; } else { document.getElementById('#btn-down').style.display = "none"; } } $('body').on('click', '#btn-up a', function(event) { event.preventDefault(); $('html,body').animate({ scrollTop: 0 }, 'slow'); }); Mais ça n'a aucun effet sur le site, il y a toujours l'effet de défilement (donc le code javascript n'est pas entièrement rejeté), mais en revanche il apparaît toujours au dessus des 20px Ce message a été modifié par Marshall45 - 29 Jul 2019, 15:48. |
|
|
29 Jul 2019, 22:14
Message
#4
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Au temps pour moi ça fonctionne je te remercie beaucoup
|
|
|
30 Jul 2019, 20:05
Message
#5
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Bonsoir à tous
Concernant le changement de couleur de l’entête j'ai l’impression d’être à 2 doigts du résultat, mais j'ai l'impression qu'il me manque un truc. La police de l'entête doit être rouge sur la page d'accueil et bleu sur les autres pages Code if (document.body.template = 'index' || document.documentElement.template = 'index') { document.getElementById("btn-menu").style.color = 'red'; } else { document.getElementById("btn-menu").style.color = 'bleu'; } J'ai l'impression que l'erreur vient de cette partie, mais je ne sais pas quoi mettre à la place. Code (document.body.template = 'index' || document.documentElement.template = 'index') Quelqu'un à t'il de par son expérience la clef qui me manque ? Merci encore ! Ce message a été modifié par Marshall45 - 30 Jul 2019, 20:07. |
|
|
30 Jul 2019, 20:49
Message
#6
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 828 Inscrit : 1 Jul 2010 Membre no 156 073 |
Ton CMS semble appliquer à body une classe qui correspond au template utilisé par les pages.
Dans le cas de la page d’accueil c’est la classe « template-index », pour une fiche technique c’est « template-page ». Tu n’as qu’une règle CSS à ajouter. Code /* par défaut */
#btn-menu { color: blue; } /* pour la page d’accueil */ .template-index #btn-menu { color: red; } -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
31 Jul 2019, 00:25
Message
#7
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Ton CMS semble appliquer à body une classe qui correspond au template utilisé par les pages. Dans le cas de la page d’accueil c’est la classe « template-index », pour une fiche technique c’est « template-page ». Tu n’as qu’une règle CSS à ajouter. Code /* par défaut */ #btn-menu { color: blue; } /* pour la page d’accueil */ .template-index #btn-menu { color: red; } Merci infiniment grâce à toi je viens de terminer mon entête ça fait plusieurs jours j'étais dessus je ne sais pas comment vous remercier tous MacBidouille meilleur forum de développent web y a rien à dire Force à vous Ce message a été modifié par Marshall45 - 31 Jul 2019, 00:42. |
|
|
Nous sommes le : 26th April 2024 - 04:33 |