Problème de cohabitation de 2 scripts sur une page

Version imprimable

22/12/2023, 18h36
jeanl35

Problème de cohabitation de 2 scripts sur une page

Bonjour à tous
Je suis en train de faire un site et je découvre l'univers des codes je n'ai aucune formation
Donc en fonction de mon besoin je cherche les codes sur les sites dédiés et j'arrive jusqu'à maintenant (après plusieurs heures de boulot) à réaliser mon bonheur
Cela fait plusieurs jour que je bute sur une nouvelle idée
Je veux à l'aide de deux images faire la fonction haut et bas de page, les boutons apparaissent en fonction de la position du scroll
Je fais ça avec du java du ccs et du JS
Si je prends indépendamment un seul scénario haut ou le bas de page ça fonctionne mais quand je mets les deux en même temps ça plante j'ai juste le haut de page qui fonctionne
la page qui me sert de test seule la flèche du haut de page apparait, il faut descendre dans la page pour la voir apparaitre ICI
Les fichiers JS et ccs
- le haut de page ccs
- le bas de page ccs
- le js du scrool down
- le js du scrool top

Pouvez vous m'aider à résoudre ce problème j'ai essayé pas mal de chose de regrouper en un seul fichier JS ou CSS les infos mais je n'y arrive pas?
Le code de la page qui appelle les différentes fonctions
<html>
<head>
<title></title>

<link href="bas-page1.css" rel="stylesheet">


<link href="haut-page1.css" rel="stylesheet">

</head>
<body>

<button onclick="topFunction()" id="scrollToTopButton" title="Haut de page">
<img src="images/mise-en-page/flechehaute.gif"></i></button><br>
<button onclick="downFunction()" id="scrollTodownButton" title="Haut de page">
<img src="images/mise-en-page/flechebasse.gif"></i></button>
<script src="scrolltodown1.js" type="text/javascript"></script>
<script src="scrolltotop1.js" type="text/javascript"></script>
<br>

Salut, ton code a deux problèmes majeurs :

1) Tes deux fonctions portent le même nom. Même si elles sont dans des fichiers séparés, elles ne peuvent cohabiter, l'une prenant la place de l'autre.
2) Dans ton code CSS, tu positionnes tes deux boutons au même endroit, au pixel près, ils apparaîtront donc l'un sur l'autre.

Pour régler ton premier problème, je te propose de ne créer qu'une seule et unique fonction qui va gérer tes deux boutons :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 addEventListener('scroll', scrollFunction); function scrollFunction(){ const boutonHaut = document.getElementById("scrollToTopButton"); const boutonBas = document.getElementById("scrollTodownButton"); if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) { boutonHaut.style.opacity = 1; boutonHaut.style.visibility = "visible"; boutonBas.style.opacity = 1; boutonBas.style.visibility = "visible"; } else { boutonHaut.style.opacity = 0; boutonHaut.style.visibility = "hidden"; boutonBas.style.opacity = 0; boutonBas.style.visibility = "hidden"; } }
Pour ton problème CSS, essaie de mettre les boutons l'un sous l'autre. Par exemple, dans bas-page1.css, remplace la position verticale de ton bouton :

Code:

bottom: 320px;

Enfin, je ne peux que trop te conseiller de prendre le temps de te former sur CSS et JavaScript. Tu trouveras plein de formations et tutos gratuits sur internet. Un autre conseil : essaie de mettre tout ton code CSS dans un seul fichier, et fais pareil pour le Javascript. Tu pourras séparer ton code en plusieurs fichiers s'il devient vraiment très gros, mais là pour moins de 100 lignes, séparer en plusieurs fichiers va augmenter le temps de chargement de ta page, surtout sur les serveurs de Free, qui font le job gratuitement certes, mais ne valent pas une solution payante en terme de temps de réponse.

24/12/2023, 09h19
jeanl35

Bonjour à tous
Merci de m'avoir répondu et de me proposer une solution que je vais testé dès que possible :D
Je me rends compte du chemin qu'il me reste à parcourir avant de pouvoir me faire un propre script 8O
Après pour mon site je n'ai pas trop besoin de grand chose non plus il se veut avant tout "amateur" et vise simplement à proposer aux jeepeurs des tutos et autres infos, il me faut juste mettre en ligne des photos et quelques liens vers des vidéos, si je peux améliorer la visualisation c'est encore mieux d'où la raison de ma venu ici, et puis apprendre même à mon age c'est toujours intéressant.
je sais pas si j'ai bien compris, je peux créer un seul fichier css et js pour gérer toutes les fonctions d'une page c'est bien ça?
Il me suffirait de faire un copier coller de tous les JS que j'ai mis en place dans un seul fichier et idem pour le css
Mais quid des pages qui vont être chargées qui n'auront pas forcément besoin de certaines fonctions js ou css, ne va t'il pas y avoir des erreurs ou autres?
24/12/2023, 11h06
jeanl35

Après quelques essais et ajout de quelques lignes de scripts ça fonctionne parfaitement sur mozilla mais pas edge????
24/12/2023, 11h47
jeanl35

Bon finalement un problème de rafraichissement de pages
J'ai quand même un PB quand j'actionne le script en cliquant sur une flèche l'ascenseur revient comme une balle en haut ou en bas
J'ai pourtant ajouter ces infos dans les css qui sont censés régler le PB
html
{
scroll-behavior: smooth;
}
Et là pas d'action je l'ai mis en début du css et je me suis dit qu'il fallait peut être le positionner en fin de script
J'ai donc fait ça sur un css et j'ai rien compris (encore une fois)
Le scénario modifié ne fonctionne plus, la flèche n'est plus visible par contre l'autre fonctionne et l'ascenseur bouge plus lentement
peut être que quand je modifie le script je le fais mal ?
AVANT
<style>

/* style.css */
html
{
scroll-behavior: smooth;
}
#scrollTodownButton {
display: block;
z-index: 99;
transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
opacity: 0;
visibility: hidden;
position: fixed;
border: none;
bottom: 400px; /* positionne la fleche en hauteur */
right: 20px; /* positionne la fleche à partir du bord droit */
border-radius: 4px;
outline: none;
width: 50px;
height: 50px;
padding: 8px;
background-color: #000000; /* couleur de fond du bouton ici noir */
}
#scrollTodownButton i {
color: white;
}
#scrollTodownButton:hover,
#scrollTodownButton:focus,
#scrollTodownButton:focus-within {
cursor: pointer;
background-color: #FF00FF; /* couleur de fond du bouton ici violet */

}

</style>

APRES modification

<style>

/* style.css */

#scrollTodownButton {
display: block;
z-index: 99;
transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
opacity: 0;
visibility: hidden;
position: fixed;
border: none;
bottom: 400px; /* positionne la fleche en hauteur */
right: 20px; /* positionne la fleche à partir du bord droit */
border-radius: 4px;
outline: none;
width: 50px;
height: 50px;
padding: 8px;
background-color: #000000; /* couleur de fond du bouton ici noir */
}
#scrollTodownButton i {
color: white;
}
#scrollTodownButton:hover,
#scrollTodownButton:focus,
#scrollTodownButton:focus-within {
cursor: pointer;
background-color: #FF00FF; /* couleur de fond du bouton ici violet */

}
/* style.css */
html
{
scroll-behavior: smooth;
}
</style>
24/12/2023, 13h37
jeanl35

Bon finalement j'ai trouvé
il fallait que je supprime les balises "style"
J'ai certaines pages qui sont très longues et il a fallu pour que le scroll descende jusqu'au bas de la page que je modifie cette partie en augmentant la valeur à 60 000

// When the user clicks on the button, scroll to the down of the document
function downFunction() {
document.body.scrollTop = 60000;
document.documentElement.scrollTop =60000;

Encore merci à shiftcode de m'avoir mis sur la bonne piste c'est cool :mrgreen:
25/12/2023, 10h43
jeanl35

Voilà je pense que j'ai terminé avec ce script
Pour voir le résultat c'est ICI j'ai encore modifié 2 trois trucs, l'apparition des flèches est différentes pour la montée et la descente et la couleur du survol par le mulot est aussi différente.
Le lien vers le fichier JS ICI
Les liens des fichiers Css ICI le haut et ICI le bas
Pour la page web à placer
Dans le
<head>

<link href="../js/haut-page.css" rel="stylesheet">
<link href="../js/bas-page.css" rel="stylesheet">

</head>
Et enfin dans le
<body>

<button onclick="topFunction()" id="scrollToTopButton" title="Haut de page">
<img src="../images/flechehaute.gif"></i></button><br>
<button onclick="downFunction()" id="scrollTodownButton" title="Bas de page">
<img src="../images/flechebasse.gif"></i></button>
<script src="../js/scrollto.js" type="text/javascript"></script>

</body>
Voilà vous avez tout bonne utilisation et encore merci à shiftcode pour son aide :hola:
25/12/2023, 11h56
shiftcode
Citation:

Envoyé par jeanl35

et puis apprendre même à mon age c'est toujours intéressant.

Il n'y a pas d'âge pour apprendre. Monter des projets, les imaginer, les mettre en place, réfléchir, résoudre des problèmes, c'est là tout le sel d'une vie qui sinon serait triste et morne (il s'agit là d'un avis personnel)
Dans mes connaissances, j'ai une personne qui s'est mise à apprendre le piano à 50 ans. Aujourd'hui, elle n'est pas toute jeune (la bienséance m'interdit de lui demander son âge), mais elle enseigne le piano et est très appréciée de ses élèves, de tous âges qui plus est.

Pour revenir à la question de mettre tout le code javascript dans une page, il est tout à fait possible de partir sur l'approche suivante :
- mettre toutes les fonctions dans un seul fichier
- incorporer dans les pages juste un petit bout de code qui va appeler ces fonctions lorsqu'on en a besoin.

Pour reprendre l'exemple, il est possible de mettre ces lignes dans la page HTML pour appeler la fonction scrollFunction qui elle serait dans un fichier .js
Code:

1 2 3 4 <script> addEventListener('scroll', scrollFunction); </script>
L'avantage est que le navigateur va charger une fois pour toutes le fichier contenant les fonctions, puis le conserver en cache pour les autres pages du site.

Bien entendu, il est aussi possible de "ranger" les fonctions dans différents fichiers en fonction d'une "thématique". Exemple : toutes les fonctions gérant le scrolling dans un fichier, les fonctions s'occupant des images dans un autre, les fonctions permettant de commenter et d'afficher les commentaires dans un troisième, etc... Il n'y a pas une façon de faire unique, l'objectif étant d'avoir des pages rapides (donc pas trop lourdes) à charger.

Bonne continuation pour ce projet qui, je le devine, est un projet passion ;-)
25/12/2023, 22h16
jeanl35

Citation:

Envoyé par shiftcode

Bonne continuation pour ce projet qui, je le devine, est un projet passion ;-)

Tu as tout compris j'adore partager les infos sur ce que j'arrive à faire et d'ailleurs je pense faire un page qui va regrouper tous les script qui sont utiliser sur mon site
Car entre deux coups de clés ou entre deux soudures pourquoi pas faire une page web et la mettre à disposition de tous