Floating box remains fixed at the top of the screen

Question

Floating box remains fixed at the top of the screen

While exploring the web, I stumbled upon a hotspot/popup that I added to my page. Unfortunately, I lost the link to the website where I found it. Somehow, after making some changes, the popup now appears at the top of the image rather than aligned with the pins on the left and right sides. When viewing the image, the popup should be near the red pin for Wk6. I'm puzzled about what caused this misalignment. The website in question is located at

Your assistance would be greatly appreciated.

HTML:

<!DOCTYPE html>
  <html>
    <head>
      <title>Second Air Force</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/styles.css?v=<?php echo time(); ?>">
    </head>
    <body>
      .... (Content here)
    </body>
  </html>

CSS:

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #112349;
}

h1{
  font-size: 6rem;
}
... (CSS continues)

javascript html css

Answer 1

Answer №1

When the window's content is fully loaded, the event listener <quot;DOMContentLoaded"

isn't quite getting the job done. It seems to be running about 50ms late, causing the top pins to display correctly while the lower pins remain stuck at the top of the page.

Insight:

To troubleshoot this issue using DevTools, navigate to the Sources tab and open Booth.php. Click on line number 232 in the left margin to set a breakpoint there. Upon refreshing the page with Ctrl F5 (keeping DevTools open), you'll notice that all pins are aligned at the top of the page when JavaScript captures their positions, resulting in popups appearing at the page's top.

If you place the breakpoint at line 237 instead, let the script pause at that point, remove the breakpoint by clicking again, and hit the |> (play) button in the right-side panel, you'll observe all pins settling into their correct positions on the page as the JavaScript forEach loop logs their accurate coordinates for future reference.

Resolution:

Enclose your invocation of the contentPosition() function within a setTimeout or devise a new function to handle this task. One potential approach involves:

window.addEventListener("DOMContentLoaded", waitThenDo);

function waitThenDo(){
   setTimeout( () => {
      contentPosition();
   }, 500);
}

The provided solution introduces a half-second delay (500ms) before executing the contentPosition() function. Experimenting with this timing may yield optimal results, potentially reducing the delay below 100ms - not that anyone would discern a noticeable lag even if it extended to 2000ms...

Answer 2

When the window's content is fully loaded, the event listener <quot;DOMContentLoaded"

isn't quite getting the job done. It seems to be running about 50ms late, causing the top pins to display correctly while the lower pins remain stuck at the top of the page.

Insight:

To troubleshoot this issue using DevTools, navigate to the Sources tab and open Booth.php. Click on line number 232 in the left margin to set a breakpoint there. Upon refreshing the page with Ctrl F5 (keeping DevTools open), you'll notice that all pins are aligned at the top of the page when JavaScript captures their positions, resulting in popups appearing at the page's top.

If you place the breakpoint at line 237 instead, let the script pause at that point, remove the breakpoint by clicking again, and hit the |> (play) button in the right-side panel, you'll observe all pins settling into their correct positions on the page as the JavaScript forEach loop logs their accurate coordinates for future reference.

Resolution:

Enclose your invocation of the contentPosition() function within a setTimeout or devise a new function to handle this task. One potential approach involves:

window.addEventListener("DOMContentLoaded", waitThenDo);

function waitThenDo(){
   setTimeout( () => {
      contentPosition();
   }, 500);
}

The provided solution introduces a half-second delay (500ms) before executing the contentPosition() function. Experimenting with this timing may yield optimal results, potentially reducing the delay below 100ms - not that anyone would discern a noticeable lag even if it extended to 2000ms...

Floating box remains fixed at the top of the screen

Answer №1

Similar questions

It is not possible to modify the appearance of visited :before pseudo-elements

The JAWR generator is having trouble locating the jawr_generator.css file when using Less to compile it

Having trouble uploading a file in PDF format (*.pdf)

Error in jQuery: Unexpected token ILLEGAL during Asp.Net page loading

Guide on toggling the button by clicking on the icon to turn it on or off

Can a .obj file be loaded with colors even without an .mtl file?

Struggling with certain aspects while learning Nodejs and ES6 technologies

Tooltip not appearing when user hovers over it

Adjusting the object-fit property to "contain" and combining it with border-radius or exploring other alternatives can enhance

Move the width from left to right with animation

Node.js HTTP requests

The fetch API is being restricted, however, AJAX and XHR are still operational

Unable to click on element at coordinates (x,y) with Protractor due to ng-change event

Guide on how to retrieve a button background image from another website in PHP using the style attribute

The CSS 'top' attribute is without impact

What are the time-saving benefits of utilizing semantic X/HTML in CSS development?

The table borders in IE 11 do not display properly when using Html5 and CSS

Is it necessary to use Hapi.js on the client side in order to establish a websocket connection using the Hapi.js protocol?

Tips for properly utilizing "require" in application.css with the Skeleton framework

storing HTML elements in Chrome's cache