11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Petit script

Bonjour,
sur mon site, je fais apparaître les div progressivement au scrool. Lorsque l'on se trouve au milieu du site et que, pour une raison ou pour une autre, la page est rechargée, elle apparaît vide, jusqu'à que l'on bouge la souris. Pour le visiteur, ça peut être déroutant, il pense que la page est vide et va aller voir ailleurs.
J'ai créé ce petit script pour régler ce problème, mais il fonctionne une fois sur deux. Quel est le problème.
<script>
	 function showtext-box() {
      document.getElementByClassName(".text-box").style.visibility = "visible";
    }
    setTimeout("showtext-box()", 0);
    </script>

.text-box est le nom des div que je veux voir apparaître. Voici le code ci-dessous.
.text-box {
  	display:inline-block;
  	min-width:70%;
  	max-width:70%;
  	z-index:10;
  	margin:2em 16em 4em 10em;
  	background: linear-gradient(190deg, rgba(248,249,250,1) 0%, rgba(255,255,255,0) 10%);
  transform: skew(0deg, -0deg);
  	box-shadow:26px 26px 26px #000;   
    	opacity:0;
    	transition:opacity 1s ease-in-out;}
.text-box.scrolled {
	opacity:1;}

En rechargeant la page deux fois, les div apparaissent, sans le scrip en fonction et sans bouger la souris, mais je ne peux pas compter sur ça, aucun visiteur rechargera la page une seconde fois pour la visualiser. Il me faut un script qui agit sans intervention.
Modifié par Bongota (10 Mar 2023 - 12:15)
Modérateur
Bonjour,

j'imagine que ton script se lance sur l’événement onscroll et verifie ou se trouve l'element, mais pas sur onload Smiley cligne


Sans exemple concret, ce n'est que supposition.

cdt,
Non, justement, je veux qu'il se lance sur onload, chaque fois que la page est rechargée. Je le dis bien dans le post.
Il manque effectivement quelque chose pour ça dans le script. Comme je ne suis pas encore au top en JS, j'ai oublié ça. Il faut que je place onload quelque part.
J'ai modifié mon code, mais il ne fonctionne toujours pas correctement.
<script>
		  		  function code(){
document.getElementByClassName("text-box").style.visibility = "visible";
}
window.onload=code();
</script>

En prenant soin de mettre 
<body onload="code()">

dans le body, de façon à ne as attendre le chargement complet de la page.
Si j'utilise le même code, mais avec alert :
function code(){
alert(" Le texte s'affiche");
}
window.onload=code();

j'ai pourtant bien l'affichage du texte, le script fonctionne. Mais pas avec l'apparition des div.
J'ai mis le script en ligne et voici le site en question, pour se faire une idée.
https://musiquenvrac.fr
Modifié par Bongota (10 Mar 2023 - 16:13)
Bonsoir,

je viens de suivre le lien indiqué : beaucoup d'erreurs en console (je suis sur firefox).


- Erreur d’analyse de la valeur pour « min-height ».  Déclaration abandonnée. style.css:23:17
- Erreur d’analyse de la valeur pour « -webkit-text-size-adjust ».  Déclaration abandonnée. style.css:134:30
- Règle keyframe ignorée suite à un mauvais sélecteur. style.css:310:19
- Règle keyframe ignorée suite à un mauvais sélecteur. style.css:315:19
- Erreur d’analyse de la valeur pour « text-align ».  Déclaration abandonnée. style.css:363:20
- Propriété « scroll-snap-points-y » inconnue.  Déclaration abandonnée. style.css:423:27
- Propriété « scroll-snap-destination » inconnue.  Déclaration abandonnée. style.css:424:30
- Propriété « min-widh » inconnue.  Déclaration abandonnée. style.css:956:11
- Propriété « scroll-snap-points-y » inconnue.  Déclaration abandonnée. style.css:1042:27
- Propriété « scroll-snap-destination » inconnue.  Déclaration abandonnée. style.css:1043:30
- Propriété « apsect-ratio » inconnue.  Déclaration abandonnée. style.css:1084:18
- Erreur d’analyse de la valeur pour « text-align ».  Déclaration abandonnée. 
- style.css:1175:21
- Uncaught TypeError: document.getElementByClassName is not a function
    code  https://musiquenvrac.fr/:627
 
    <anonymous>  https://musiquenvrac.fr/:630  musiquenvrac.fr:627:10
La ressource à l’adresse «  https://musiquenvrac.fr/satisfy-v11-latin-regular.woff2  »
préchargée avec le préchargement de lien n’a pas été utilisée après quelques secondes. Assurez-vous que tous les attributs de la balise de préchargement sont définis 
correctement.

Modifié par alain_47 (11 Mar 2023 - 20:15)
...
N'y aurait-il pas 2 <body> par hasard ? 

	<head></head>
 	<body>
 	<body onload="code()">
              <main>
              <noscript>
                         Attention, JavaScript n'est pas activé sur votre navigateur, le site apparaîtra
                         imcomplet !  ... => 'incomplet'
               </noscript>
 ...
Merci d'avoir pointé les erreurs de la console.

En effet, j'ai ajouté un autre body pour onload, je ne pensais pas que l'on pouvait le mettre sur le body original. Et bien vu pour incomplet avec un m, les fautes de frappe se glissent partout.

Pour ce qui est des erreurs de la console, j'en connaissais quelques unes, sans pouvoir les corriger, notamment toutes celles qui concernent "scroll-snap", que le validateur m'avait déjà signalé. Par contre, je vais vérifier certaines autres qui m'avaient échappées. Pour @font-face, je ne vois pas, même en lisant les docs. Contrairement à ce que dit le message d'erreur, la police personnelle est bien chargée sur le site.

Et mon script, c'était la question initiale ? J'ai vu l'erreur Javascript sur ton test.
Je crois que je vais adopter une autre solution, il y a déjà pas mal de JavaScrip sur le scroll pour en ajouter encore. L'une est simple, je mets un opacity à .4 au lieu de 0 sur la div en question (text-box). De cette façon, les divs seront toujours légèrement apparentes pour le visiteur.
L'autre solution, qui fonctionne et que j'ai testé, c'est d'utiliser window.scrollTo, de façon à appliquer un léger scroll au rechargement de la page et ainsi faire apparaître la div. Le jeu en vaut-il la chandelle, à voir.
Modifié par Bongota (11 Mar 2023 - 22:03)
Bonsoir,

La moitié des <li> ne comportent pas de balise de fermeture </li>

Plusieurs paragraphes <p> sont fermés par une autre balise <p> au lieu de </p>

Le dernier script en toute fin de fichier HTML, 'getElementByName' manque le 's' => "getElementsByName" : vu qu'il n'y a qu'une classe 'text-box' sur une <div> il me semble preferable de remplacer par "querySelector" : 

<script>
	function code(){
            document.querySelector(".text-box").style.visibility = "visible";
    }
    window.onload=code();
</script>
		    
</body>
</html>


Pour le reste, encore à vérifier.
re,

Je n'ai pas eu de pble d'affichage de "page blanche", la page reste fluide en descendant avec l'ascenseur y compris avec le 'fil d'ariane' en haut de page.

En ce qui concerne le CSS, 2 erreurs "webkit-center" au lieu de "center" + certains elements qui étaient obsoletes ont été retirés :

MDN :

a écrit :

scroll-snap-destination

Obsolète: Cette fonctionnalité a été supprimée des standards du Web.
Bien que quelques navigateurs puissent encore la supporter,
elle est en cours d'éradication.
Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux.
Les pages et applications Web l'utilisant peuvent cesser de
fonctionner à tout moment.


Plus d'erreur en console.


Bonne soirée.
Modifié par alain_47 (12 Mar 2023 - 00:05)
Pour les balises <li> non fermées, c'est un oubli, je ne l'ai pas remarqué car ça n'a pas eu de conséquences directes sur le fonctionnement du site. Hormis le respect des règles bien sûr. Pour les balises <p> non fermées, c'est voulu, sinon, le lecteur audio déborde en largeur sur le texte si je ferme avec </p>. Il y a sans doute une autre solution pour régler ça, mais pour le moment, c'est ce que j'ai trouvé.
Ok pour le "s" de getElementsByName. Et aussi pour querySelector.

Et merci pour les remarques. Demain, je vais corriger les snap.
Bonjour,
j'ai mis résolu, le script fonctionne, que j'utilise opacity, display block ou visible. Merci à alain_47 pour son aide (notamment les erreurs sur la console).
Je ne vais finalement pas l'utiliser sur le site. Recharger une page en JS n'a pas trop de sens et ajoute encore du Javascript en plus. Et aussi, le comportement n'est pas constant, parfois, ça fonctionne, parfois pas. C'est d'ailleurs la même chose sans le script.

Comme je ne m'étais peut-être pas bien exprimé dans mon premier post, je précise. L'apparition des divs contenant le texte et les images (text-box) se fait progressivement avec le scroll, en Javascript. On passe d'une opacité à 0 à celle de 1, en 1 seconde. Le problème venait quand un visiteur tapait de l'extérieur directement l'url vers une ancre de la page (lesite.html/#ancre) par exemple. Dans ce cas, le scroll n'ayant pas fonctionné sur la page, elle ne s'affichait pas, à cause de l'opacité à 0.

J'ai tout simplement mis opacity à .4 sur text-box, dans tous les cas. Quoi qu'il se passe, la page reviendra présente, légèrement floue mais présente. Le visiteur saura qu'il il y quelque chose et le moindre mouvement de la souris mettra la page à opaciy 1.
Prévenir un modérateur
Répondre au sujet
Aller à