Problème de JS effet de parallaxe

[Snow White]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : https://anomaly.forumactif.com/

Description du problème

Bonjour,

J'ai un petit problème de JS sur ma bannière, il doit entrer en conflit avec un autre JS, le JS faisant bugguer les autres (notamment celui du fond des catégories) et ne s'appliquant pas nous l'avons désactivé et mis en brut, il fonctionne sur les pages HTML comme ici : https://anomaly.forumactif.com/h2-banniere cependant si je la met en iframe je n'ai pas la redirection sur le forum mais à l'intérieur de l'iframe, ce qui n'est pas le résultat voulu. J'ai donc mis le code de l'html dans mon overall_header cependant le JS ne s'applique toujours pas :/ la bannière est toujours fixe : https://anomaly.forumactif.com/ quelqu'un saurait me dire quoi faire ou au moins avec quel JS il entre en conflit ? Voici le code de la page html :

Code:

<style>#landing-content {
  overflow: hidden;
  background-image: url(https://i.imgur.com/vN2kQGt.png);
  width: 455px;
  background-size: 105%;
  background-repeat: no-repeat;
  height: 390px;
  z-index: 0;
  position: absolute;
  border: 10px solid #3b4468;
}
#slider {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/cOkW0nv.png);
  position: absolute;
 background-size: cover;
  height: 390px;
  width: 100%;
  z-index: 3;
  background-repeat: no-repeat;
}
#chara2 {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/n46CSLU.png);
  position: absolute;
  background-size: cover;
 height: 390px;
  width: 103%;
  z-index: 5;
  background-repeat: no-repeat;
}
#star1 {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/GLYONjA.png);
  position: absolute;
  background-size: 101%;
 height: 390px;
  width: 100%;
  z-index: 6;
  background-repeat: no-repeat;
}
</style><a href="https://anomaly.forumactif.com/"></a>
<div id="landing-content">
   <a href="https://anomaly.forumactif.com/"> </a>
   <div style="" id="chara2">
      
      <div id="star1">
         <section id="slider">
         </section>
      </div>
       
   </div><a href="https://anomaly.forumactif.com/"></a> <script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;

e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})</script>
</div>

Merci d'avance

[Toryudo]

Bonjour !

C'est un problème de "compression" : en fonction d'où vous postez, certains codes sont "compressés", c'est à dire qu'automatiquement, forumactif optimise le code en enlevant les retours à la ligne, parfois les espaces inutiles, etc. Il y a plein d'optimisations possibles comme ça pour gagner de l'espace et permettre aux documents de se télécharger plus facilement.

Quand je regarde le code des deux pages, c'est ce qui change.
Celui qui fonctionne est écrit comme ceci :

Code:

<script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})</script>

Alors que celui qui ne fonctionne pas est écrit comme ceci :

Code:

<script type="text/javascript">document.getElementById("landing-content").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 80;var y = -(e.pageY + this.offsetTop) / 80;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("chara2").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 35;var y = -(e.pageY + this.offsetTop) / 35;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("slider").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 10;var y = -(e.pageY + this.offsetTop) / 10;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("star1").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 25;var y = -(e.pageY + this.offsetTop) / 25;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})</script>

Ce n'est pas forcément visible comme ça, mais l'explication est simple : une commande se termine toujours par ;
Ceci est une commande :

Code:

document.getElementById("slider").addEventListener('mousemove', function(e) { blabla });

Elle doit donc se terminer par ; également, sinon, elle peut gêner la suite ! Et c'est le cas sur le deuxième exemple : l'interpréteur se retrouve avec (...)+ y + 'px';})document.getElementById(...) et il ne comprend pas ce qu'on lui demande, parce qu'il ne voit pas de caractère de fin d'instruction et essaye d'enchainer !

Le bon code, à utiliser dans les deux cas, c'est donc le suivant :

Code:

<script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});</script>

Donc à priori, si ça fonctionne dans le cas n°1, c'est parce que le navigateur accepterait le caractère "retour à la ligne" comme étant une fin d’instruction... mais ça me parait un peu hasardeux de faire comme ça, mieux vaut toujours mettre un ; pour terminer une instruction.

[Snow White]

Bonsoir,

Merci pour votre réponse si rapide ! J'ai tenté de mettre le code donné aussi bien dans le template que dans ma page de code JS, le fond des catégories ne bug plus cependant le code ne s'applique toujours pas, ma bannière est toujours fixe.

Merci d'avance ! Bonne soirée !

[Toryudo]

Bonjour !
Alors oui, effectivement... Cette fois, le rendu du code est le suivant :

Code:

//Call in document load eventdocument.getElementById("landing-content").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 80;var y = -(e.pageY + this.offsetTop) / 80;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("chara2").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 35;var y = -(e.pageY + this.offsetTop) / 35;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("slider").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 10;var y = -(e.pageY + this.offsetTop) / 10;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("star1").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 25;var y = -(e.pageY + this.offsetTop) / 25;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});

Commencer par le commentaire //Call in document load event, alors que tous les retours à la ligne sont supprimés, ça transforme tout votre code en code commenté non exécuté. Du coup, en retirant juste le commentaire, ça devrait être bon !

[Snow White]

En effet c'est nickel ! Merci beaucoup pour votre aide !