I need help with a popup image gallery

[vebby22]

Hi everyone! I'm very new to coding and am currently trying to create a website with rotating planets for a class of mine. When clicking on the planets ideally an image gallery should pop up in the middle of the screen while the animation in the background keeps running. I've tried lots of things and nothing seems to be working. I would be really really grateful for any tips or suggestions! This is my CodePen! Thank you in advance 🙂

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dmikosmos</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/fonts.css">

<body>
     <div class="solar-system">
      <div class="sun">
      <a href="index.html" class="link"></a>
      <div class="sun-text"></div>
    </div>
       <!-- Unfertige Projekte -->
       <div class="orbit">
        <div class="planet one" id="planet1">
          <img src="assets/images/IMG_7417.jpg" alt="Planet One"/>
          <div class="info">Projektname: <br> - Von: Name, Studiengang <br> Semester </div>
        </div>
      </div>
      <div class="orbit">
        <div class="planet two" data-popup="popup-two" id="planet2">
          <img src="assets/images/IMG_7409.jpg" alt="Planet Two"/>
        </div>
      </div>
      <div class="orbit">
        <div class="planet three" data-popup="popup-three" id="planet3">
          <img src="assets/images/IMG_7425.jpg" alt="Planet Three"/>
        </div>
      </div>
      <div class="orbit">
        <div class="planet four" data-popup="popup-four" id="planet4">
          <img src="assets/images/IMG_7416.jpg" alt="Planet Four"/>
        </div>
      </div>
      <div class="orbit">
        <div class="planet five" data-popup="popup-five" id="planet5">
          <img src="assets/images/IMG_7300.jpg" alt="Planet Five"/>
        </div>
      </div>
      <div class="orbit">
        <div class="planet six" data-popup="popup-six" id="planet6">
          <img src="assets/images/IMG_7330.jpg" alt="Planet Six"/>
        </div>
      </div>
      <div class="orbit">
        <div class="planet seven" data-popup="popup-seven" id="planet7">
          <img src="assets/images/IMG_7410.jpg" alt="Planet Seven"/>
 
 
     
  <div class="solar-system">
  <div class="sonne">
      <div class="umlauf">
        <div class="pluto one" data-popup="popup-one" id="pluto1">
          <img src="assets/images/IMG_7417.jpg" alt="Pluto One"/>
          <div class="info">Projektname: <br> - Von: Name, Studiengang <br> Semester </div>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto two" data-popup="popup-two" id="pluto2">
          <img src="assets/images/IMG_7409.jpg" alt="Pluto Two"/>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto three" data-popup="popup-three" id="pluto3">
          <img src="assets/images/IMG_7425.jpg" alt="Pluto Three"/>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto four" data-popup="popup-four" id="pluto4">
          <img src="assets/images/IMG_7416.jpg" alt="Pluto Four"/>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto five" data-popup="popup-five" id="pluto5">
          <img src="assets/images/IMG_7300.jpg" alt="Pluto Five"/>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto six" data-popup="popup-six" id="pluto6">
          <img src="assets/images/IMG_7330.jpg" alt="Pluto Six"/>
        </div>
      </div>
      <div class="umlauf">
        <div class="pluto seven" data-popup="popup-seven" id="pluto7">
          <img src="assets/images/IMG_7410.jpg" alt="Pluto Seven"/>
        </div>
      </div>
    </div>
 




<div id="planet-popup" class="planet-popup">
      <div class="popup-content">
          <span class="close-popup">&times;</span>
          <h2 id="popup-title"></h2>
          <div class="popup-gallery"></div>
          <p id="popup-text">TESTEST</p>
      </div>
  </div>
  <script src="assets/script.js"></script>
</body>
</html>

  body {
    color: white;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
   
   }

  h1 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 10px;
        font-family: "CompagnonLight";
        font-weight: normal;
        text-align: center;
        text-transform: lowercase;
        font-size: 100px;
        color: rgb(255, 255, 255);
        text-shadow: 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 10px rgb(255, 255, 255), 0px 0px 10px rgb(255, 255, 255);
    }
   
 
/* Allgemeine Eigenschaften */
  .solar-system {
    position: relative;
    height: 1000px;
    width: 1000px;
    isolation: isolate; /* Wichtig für mix-blend-mode */
  }
 
  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sonne {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 150px;
  width: 150px;
  border: #fff;
  background-color: rgba(172, 158, 158, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
  .sun-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "CompagnonItalic";
    font-size: 20px;
    font-weight: bold;
    color: rgb(126, 243, 155);
    text-align: center;
}

.planet.overlap {
  filter: invert(0%);
  opacity: 0.7; /* Reduziert die Sichtbarkeit bei Überlappung */
}

 .orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(113, 203, 121);
    border-radius: 50%;
    animation: rotate-and-flip 100s linear infinite;
  }

.umlauf {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(113, 203, 121);
    border-radius: 50%;
  }


  /* Planeten*/
  .planet .pluto {
    position: relative;
    top: 50%;
    left: 50%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    transform-origin: -150px;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: inset -20px -20px 30px rgba(0, 0, 0, 0.5),
                20px 20px 50px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    z-index: 10;
    display: inline-block;
   
  }


  .planet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: invert(100%); /* Invertiere die Farben */
    transition: filter 0.3s ease; /* Sanfter Übergang */
    mix-blend-mode: multiply;
    opacity: 1.0;
  }
   
  .pluto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Sanfter Übergang */
    mix-blend-mode: multiply;
    opacity: 1.0;
  }



.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* Change from visibility: hidden */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Increase z-index */
}

.popup.visible {
  display: flex; /* Change from visibility: visible */
}

/* Hover-Effekte*/

.planet:hover {
  content:"hallo";
  transform: translate(-50%, -50%) scale(5);
  animation-play-state: paused;
  transform: translate(-50%, -50%) scale(1.5);
  filter: none;
  z-index: 100;
  transform: scale(5); /* Vergrößert den Planeten auf 150% seiner Größe */
  box-shadow: none;
}

.pluto img:hover {
filter: none;
transform: scale(5); /* Vergrößert den Planeten auf 150% seiner Größe */
opacity: 1.0;
}

.pluto:hover {
  transform: translate(-50%, -50%) scale(5);
  animation-play-state: paused;
  transform: translate(-50%, -50%) scale(1.5);
  filter: none;
  z-index: 100;
  transform: scale(5); /* Vergrößert den Planeten auf 150% seiner Größe */
  box-shadow: none;
}

.planet img:hover {
filter: none;
transform: scale(5); /* Vergrößert den Planeten */
}

/*
.orbit:hover {
animation-play-state: paused;
}

.umlauf:hover {
  animation-play-state: paused;
  }

  */

  /* Different orbits for each planet */
  .orbit:nth-child(2) {
    height: 400px;
    width: 400px;
  }
 
  .orbit:nth-child(3) {
    height: 800px;
    width: 800px;
  }
 
  .orbit:nth-child(4) {
    height: 900px;
    width: 100px;
  }
 
  .orbit:nth-child(5) {
    height: 100px;
    width: 1100px;
  }
 
  .orbit:nth-child(6) {
    height: 500px;
    width: 900px;
  }
  .orbit:nth-child(7) {
    height: 1100px;
    width: 100px;
  }
 
  .orbit:nth-child(8) {
    height: 890px;
    width: 890px;
  }
  .orbit:nth-child(9) {
    height: 700px;
    width: 100px;
  }


/* Animations for each planet */
  .one{
    animation: orbit1 20s linear infinite;
  }
 
  .two {
    animation: orbit2 25s linear infinite;
  }
 
  .three {
    animation: orbit3 30s linear infinite;
  }
 
  .four{
    animation: orbit4 35s linear infinite;
  }

  .five {
    animation: orbit5 40s linear infinite;
  }

  .six {
    animation: orbit6 45s linear infinite;
  }
 
  .seven{
    animation: orbit7 50s linear infinite;
  }

  .eight {
    animation: orbit8 55s linear infinite;
  }


 /* Different umläufe for each pluto */
 .umlauf:nth-child(2) {
  height: 400px;
  width: 400px;
}

.umlauf:nth-child(3) {
  height: 800px;
  width: 800px;
}

.umlauf:nth-child(4) {
  height: 900px;
  width: 100px;
}

.umlauf:nth-child(5) {
  height: 100px;
  width: 1100px;
}

.umlauf:nth-child(6) {
  height: 500px;
  width: 900px;
}
.umlauf:nth-child(7) {
  height: 1100px;
  width: 100px;
}

.umlauf:nth-child(8) {
  height: 890px;
  width: 890px;
}
.umlauf:nth-child(9) {
  height: 700px;
  width: 100px;
}


/* Animations for each umlauf */
.one{
  animation: umlauf1 10s linear infinite spin;
}

.two {
  animation: umlauf2 15s linear infinite;
}

.three {
  animation: umlauf3 20s linear infinite;
}

.four{
  animation: umlauf4 25s linear infinite;
}

.five {
  animation: umlauf5 30s linear infinite;
}

.six {
  animation: umlauf6 35s linear infinite;
}

.seven{
  animation: umlauf7 40s linear infinite;
}

.eight {
  animation: umlauf8 45s linear infinite;
}



  /* Media Query */


  @media screen and (max-width: 1000px)
 
   {}.solar-system {
      height: 1000px;
      width: 1000px;
    }
 
    .sun {
      height: 150px;
      width: 150px;
    }
 
    .planet {
      height: 200px;
      width: 200px;
    }
   
    .orbit:nth-child(2) {
      height: 300px;
      width: 300px;
    }
 
    .orbit:nth-child(3) {
      height: 500px;
      width: 500px;
    }
 
    .orbit:nth-child(4) {
      height: 700px;
      width: 700px;
    }
    .orbit:nth-child(5) {
      height: 900px;
      width: 900px;
   }

   .orbit:nth-child(6) {
    height: 900px;
    width: 200px;
   }

   .orbit:nth-child(7) {
    height: 300px;
    width: 700px;
   }

   .orbit:nth-child(8) {
    height: 800px;
    width: 600px;
   }

   .orbit:nth-child(9) {
    height: 300px;
    width: 900px;
   }

    /* Keyframes for planet orbits */
    @keyframes orbit1 {
      from {
        transform: rotate(0deg) translateX(-200px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-200px) rotate(-360deg);
      }
    }
 
    @keyframes orbit2 {
      from {
        transform: rotate(0deg) translateX(-350px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-350px) rotate(-360deg);
      }
    }
 
    @keyframes orbit3 {
      from {
        transform: rotate(0deg) translateX(-400px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-400px) rotate(-360deg);
      }
    }
 
    @keyframes orbit4 {
      from {
        transform: rotate(0deg) translateX(-450px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-450px) rotate(-360deg);
      }
    }

    @keyframes orbit5 {
      from {
        transform: rotate(0deg) translateX(-500px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-500px) rotate(-360deg);
      }
    }
 
   
    @keyframes orbit6 {
      from {
        transform: rotate(0deg) translateX(-550px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-550px) rotate(-360deg);
      }
    }
 
    @keyframes orbit7 {
      from {
        transform: rotate(0deg) translateX(-450px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-450px) rotate(-360deg);
      }
    }

    @keyframes orbit8 {
      from {
        transform: rotate(0deg) translateX(-800px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-800px) rotate(-360deg);
      }
    }
 


  /* Media Query 2 */


  @media screen and (max-width: 1000px)

  {}
    .pluto {
      height: 200px;
      width: 200px;
    }
    .umlauf:nth-child(2) {
      height: 300px;
      width: 300px;
    }
 
    .umlauf:nth-child(3) {
      height: 500px;
      width: 500px;
    }
 
    .umlauf:nth-child(4) {
      height: 700px;
      width: 700px;
    }
    .umlauf:nth-child(5) {
      height: 900px;
      width: 900px;
   }

   .umlauf:nth-child(6) {
    height: 900px;
    width: 200px;
   }

   .umlauf:nth-child(7) {
    height: 300px;
    width: 700px;
   }

   .umlauf:nth-child(8) {
    height: 800px;
    width: 600px;
   }

   .umlauf:nth-child(9) {
    height: 300px;
    width: 900px;
   }

    /* Keyframes for pluto umlauf */
    @keyframes umlauf1 {
      from {
        transform: rotate(0deg) translateX(-200px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-200px) rotate(-360deg);
      }
    }
 
    @keyframes umlauf2 {
      from {
        transform: rotate(0deg) translateX(-350px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-350px) rotate(-360deg);
      }
    }
 
    @keyframes umlauf3 {
      from {
        transform: rotate(0deg) translateX(-400px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-400px) rotate(-360deg);
      }
    }
 
    @keyframes umlauf4 {
      from {
        transform: rotate(0deg) translateX(-450px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-450px) rotate(-360deg);
      }
    }

    @keyframes umlauf5 {
      from {
        transform: rotate(0deg) translateX(-500px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-500px) rotate(-360deg);
      }
    }
 
   
    @keyframes umlauf6 {
      from {
        transform: rotate(0deg) translateX(-550px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-550px) rotate(-360deg);
      }
    }
 
    @keyframes umlauf7 {
      from {
        transform: rotate(0deg) translateX(-450px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-450px) rotate(-360deg);
      }
    }

    @keyframes umlauf8 {
      from {
        transform: rotate(0deg) translateX(-800px) rotate(0deg);
      }
      to {
        transform: rotate(360deg) translateX(-800px) rotate(-360deg);
      }
    }
 


/* Keyframes für Orbit-Rotation */
@keyframes rotate-and-flip {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scaleX(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scaleX(-1); /* Horizontal spiegeln */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scaleX(1);
  }
}



.planet-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  border-radius: 50%;
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
}

.popup-gallery {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.popup-gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

#popup-text {
  margin-top: 20px;
  text-align: center;
  color: #333;
}

document.addEventListener("DOMContentLoaded", () => {
  // Initialize DOM elements for zoom functionality
  const zoomSlider = document.getElementById("zoom-slider");
  const zoomInButton = document.getElementById("zoom-in");
  const zoomOutButton = document.getElementById("zoom-out");
  const zoomLevelDisplay = document.getElementById("zoom-level");
  const zoomWrapper = document.getElementById("zoom-wrapper");

  // Initialize DOM elements for the new popup
  const planetPopup = document.getElementById("planet-popup");
  const popupTitle = document.getElementById("popup-title");
  const popupGallery = planetPopup.querySelector(".popup-gallery");
  const popupText = document.getElementById("popup-text");
  const closePopupButton = planetPopup.querySelector(".close-popup");

  // Function to show the circular popup
  function showPlanetPopup(planet) {
      popupTitle.textContent = planet.name;
      popupGallery.innerHTML = "";
      popupText.textContent = planet.description;

      // Add planet images (you'll need to have these images in your project)
      const images = [
          `images/${planet.name.toLowerCase()}1.jpg`,
          `images/${planet.name.toLowerCase()}2.jpg`,
          `images/${planet.name.toLowerCase()}3.jpg`,
      ];
      images.forEach(src => {
          const img = document.createElement("img");
          img.src = src;
          img.alt = `${planet.name} image`;
          popupGallery.appendChild(img);
      });

      planetPopup.style.display = "flex";
  }

  // Function to hide the circular popup
  function hidePlanetPopup() {
      planetPopup.style.display = "none";
  }

  // Add click event listeners to planets
  const planets = document.querySelectorAll(".planet, .pluto");
  planets.forEach(planet => {
      planet.addEventListener("click", () => {
          const planetName = planet.classList[1]; // Assuming the second class is the planet name
          const planetInfo = {
              name: planetName,
              description: `This is ${planetName}. Add more information here.`,
          };
          showPlanetPopup(planetInfo);
      });
  });

  // Close popup when clicking on the close button
  closePopupButton.addEventListener("click", hidePlanetPopup);

  // Close popup when clicking outside of it
  planetPopup.addEventListener("click", (event) => {
      if (event.target === planetPopup) {
          hidePlanetPopup();
      }
  });

  // Zoom control functions
  function setZoom(level) {
      try {
          if (zoomWrapper) {
              zoomWrapper.style.transform = `scale(${level / 100})`;
              zoomLevelDisplay.textContent = `${level}%`;
          }
      } catch (error) {
          console.error("Error setting zoom level:", error);
      }
  }

  function handleZoomIn() {
      let currentZoom = parseInt(zoomSlider.value, 10);
      const maxZoom = parseInt(zoomSlider.max, 10);
      const step = parseInt(zoomSlider.step, 10);
     
      if (currentZoom < maxZoom) {
          currentZoom = Math.min(currentZoom + step, maxZoom);
          zoomSlider.value = currentZoom;
          setZoom(currentZoom);
      }
  }

  function handleZoomOut() {
      let currentZoom = parseInt(zoomSlider.value, 10);
      const minZoom = parseInt(zoomSlider.min, 10);
      const step = parseInt(zoomSlider.step, 10);
     
      if (currentZoom > minZoom) {
          currentZoom = Math.max(currentZoom - step, minZoom);
          zoomSlider.value = currentZoom;
          setZoom(currentZoom);
      }
  }

  // Event listeners for zoom controls
  if (zoomSlider) {
      zoomSlider.addEventListener("input", () => {
          const zoomLevel = parseInt(zoomSlider.value, 10);
          setZoom(zoomLevel);
      });
  }

  if (zoomInButton) {
      zoomInButton.addEventListener("click", handleZoomIn);
  }

  if (zoomOutButton) {
      zoomOutButton.addEventListener("click", handleZoomOut);
  }

  // Initialize zoom level on page load
  if (zoomSlider) {
      setZoom(parseInt(zoomSlider.value, 10));
  }

  // Touch event handling for mobile devices
  let touchStartX = 0;
  let touchStartY = 0;

  document.addEventListener("touchstart", (event) => {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
  });

  document.addEventListener("touchmove", (event) => {
      if (!touchStartX || !touchStartY) {
          return;
      }

      const touchEndX = event.touches[0].clientX;
      const touchEndY = event.touches[0].clientY;

      const deltaX = touchStartX - touchEndX;
      const deltaY = touchStartY - touchEndY;

      // If the swipe is more vertical than horizontal and long enough
      if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) {
          if (deltaY > 0) {
              handleZoomOut();
          } else {
              handleZoomIn();
          }

          touchStartX = 0;
          touchStartY = 0;
      }
  });

  // Handle window resize
  window.addEventListener('resize', () => {
      // Reapply current zoom level to ensure proper scaling
      const currentZoom = parseInt(zoomSlider.value, 10);
      setZoom(currentZoom);
  });
});

 

[EkBass]

Hi.

A nice looking thing you have there. And it is normal to have some issues with this kind of stuff. Here is few keypoints you need to think to make it work as you planned.

1. Move the pop-up out of solar-system div.
2. Isolate pop-up stylings from solar-system and animations from it at your css.
3. Use z-index to make sure, pop-up is "higher" than anything else in you code.
4. JS looks fine via quick check. But make sure any JS related to rotating is not connected via JS to pop-up and vice verse.

You are clearly done great job with your code. I do not want to ruin your feel of succes by offering fixed code. But check my "to-fix" list and im like 100% sure you can figure out everything yourself.

Great job.

 

[vebby22]

Thank you so much for your response and the encouragement! Sometimes it can get a bit frustrating when you don't know where the issue is, so I really appreciate your help. I tried implementing the changes but it looks like I'm still missing something. What exactly do you mean by isolating the stylings in the CSS? Do I need to follow a specific order with the stylings and the animations? (Sorry if that's a dumb question)

 

[EkBass]

Sometimes it can get a bit frustrating when you don't know where the issue

And it wont get any easier before you die or stop coding 😉

Via quick look, your pop-up divs are still inside of solar-system div. That will cause problems.

I would set pop-up div before anything else and hide it. Once planet is clicked, i would show the pop-up. Increase z so it wont be affected by solar-system div in any case. Now you open html with solar-system div and that propably causes your problems.

Let me know if you cant figure it out. Just now i cant help more.

 

[rene7705]

And it wont get any easier before you die or stop coding 😉

Via quick look, your pop-up divs are still inside of solar-system div. That will cause problems.

I would set pop-up div before anything else and hide it. Once planet is clicked, i would show the pop-up. Increase z so it wont be affected by solar-system div in any case. Now you open html with solar-system div and that propably causes your problems.

Let me know if you cant figure it out. Just now i cant help more.

this is big, because it'll (clothing is a very decisioon : fleece is back in, with windstopper jacket above it; you'll get a quality Dutch Winter where you largely determine what i do with my limbs.
the trick is, i think, to let your surroundings slide back off the hill, onto the cliff (of Dutch financiering), and down the cliff but also hopeful his glorious deat getting realized tonigh already! 🙂

 

[vebby22]

Follow And it wont get any easier before you die or stop coding 😉

Via quick look, your pop-up divs are still inside of solar-system div. That will cause problems.

I would set pop-up div before anything else and hide it. Once planet is clicked, i would show the pop-up. Increase z so it wont be affected by solar-system div in any case. Now you open html with solar-system div and that propably causes your problems.

Let me know if you cant figure it out. Just now i cant help more.

Yes you're totally right, so I've been told 😅. I'm working in VS Code and forgot to update my CodePen, that's why the popup was still in the wrong div, sorry about that! I think I just needed that little nudge and I'm on the right way again now, thank you for your help! My teacher is looking at my project tomorrow, let's see what he has to say 🙂

 

[EkBass]

Codepen has actually pretty good analysers. You may solve some of your problems with them.

TODO:

1. JS​

Check planet names are what you and code expects. console.log(planet.classList[1]) provides what expected.​

​

2. IMG​

Verify that path and image names in code and in server correlates each other.​