How to script execution on all project pages

[victor789]

Hey Armin,

I am finalising the construction of the following website: https://www.voto-xo.com/home/

I've set up the display of a GIF image on top of all the site content (a sort of ‘double star’ that appears and disappears), in a new random position each time you change page.

However, I'd like to avoid this image being displayed on all my Projects pages (like this one, for example : https://www.voto-xo.com/melitosfex/)
(or, to take the problem in reverse, to display it only for the pages 'home' , 'projects' , 'about' , 'contact' and 'press' )

Do you have any ideas on how to fix my script to do this?

Thanks :)

Here is the script I put in 'Custom <head> content' :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ajaxComplete(function() {
    move();  
  });

  function move() {
    let img = document.getElementById('logo');
    let imgWidth = img.width;
    let imgHeight = img.height;

    let maxX = window.innerWidth - imgWidth;
    let maxY = window.innerHeight - imgHeight;

    img.style.left = Math.floor(Math.random() * maxX) + "px";
    img.style.top = Math.floor(Math.random() * maxY) + "px";
  }

  $(document).ready(function() {
    move();
  });
</script>

And here is the code I put in 'Custom HTML at top' :

<div>
  <img onclick='move()' id='logo' src='https://www.voto-xo.com/wp-content/uploads/2024/02/240226-VOTOXO-Anim-Holding_page-1.gif' />
</div>

[victor789]

Update :
I've changed the script so that the GIF image only changes position each time the site is reloaded (and not each time the page is changed).

Here's the updated script :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  window.onload = function() {
    move();  // Déplace l'image dès que la page est chargée
  }

  function move() {
    let img = document.getElementById('logo');
    let imgWidth = img.width; // Récupère la largeur actuelle de l'image
    let imgHeight = img.height; // Récupère la hauteur actuelle de l'image

    // Calcule les positions aléatoires en tenant compte des dimensions de l'image
    let maxX = window.innerWidth - imgWidth; // Position horizontale maximale
    let maxY = window.innerHeight - imgHeight; // Position verticale maximale

    // Déplace l'image dans un emplacement aléatoire mais dans les limites de la fenêtre
    img.style.left = Math.floor(Math.random() * maxX) + "px";
    img.style.top = Math.floor(Math.random() * maxY) + "px";
  }
</script>

HTML :

<div>
  <img onclick='move()' id='logo' src='http://www.voto-xo.com/wp-content/uploads/2025/01/250122-VOTOXO-Anim-Holding_page-1-LONG_1.gif' />
</div>

That said, I still haven't found a way to prevent it from being displayed on project pages, so f anyone has an idea for this, it would be really helpful for me :)

[ElsaElsa]

Hi @Armin-Unruh @arminunruh
Trying to find a similar code that allows to assign one code for all project pages!

Thanks :)

[arminunruh]

hey please dont insert jquery, its already inserted!,
so remove this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

please read this on how to do something when a new page is loaded:
https://laytheme.com/documentation/custom-javascript.html#newpage-events

we have a custom javascript event window.laytheme.on("newpageshown", function(){

the onload event will only trigger one time, instead of every time you go to another page IF your website doesnt do a hard reload on navigation but instead uses the default ajax way of navigating

your website uses the normal ajax navigation

this is how i would do it. on newpageshown, it checks if the page is a project or not. if it is, it hides the star.
if its not a project it shows the star and moves it.

<script>
  window.laytheme.on("newpageshown", function(){
    if(jQuery('body').attr('data-type') == 'project'){
      jQuery('#logo').hide();
    } else {
      jQuery('#logo').show();
      move();
    }
  })

  function move() {
    let img = document.getElementById('logo');
    let imgWidth = img.width; // Récupère la largeur actuelle de l'image
    let imgHeight = img.height; // Récupère la hauteur actuelle de l'image

    // Calcule les positions aléatoires en tenant compte des dimensions de l'image
    let maxX = window.innerWidth - imgWidth; // Position horizontale maximale
    let maxY = window.innerHeight - imgHeight; // Position verticale maximale

    // Déplace l'image dans un emplacement aléatoire mais dans les limites de la fenêtre
    img.style.left = Math.floor(Math.random() * maxX) + "px";
    img.style.top = Math.floor(Math.random() * maxY) + "px";
  }
</script>

you may also want to use this css

#logo{
pointer-events:none;
}

this way you can click things that are behind the star