The values returned by screen.height and screen.width are not accurate

Question

The values returned by screen.height and screen.width are not accurate

When a user clicks on a button, I want to enable an overlay. However, when the user minimizes the screen, the overlay does not cover the full page and buttons remain clickable. I have tried setting the screen.height and screen.width for the overlay div using the id1, but once the screen is minimized to a certain level, the buttons are visible again.

document.getElementById("id1").style.height=screen.height;
document.getElementById("id1").style.width=screen.width;

My goal is to have the overlay display over the entire web page without any buttons being accessible.

javascript css

Answer 1

Answer №1

Alright, let me walk you through the process of creating Overlays. Firstly, make sure you have a parent div set up like this:

<div class="container">
  <div class="overlay-div"></div>
  <div class="content">
      <!-- Your Content Here -->
  </div>
</div>

Within your HTML code, you will find a container with an overlay-div and content. Now in your CSS file:

.container {
   position: relative;
}
.overlay-div {
   position: absolute;
   right: 0;
   top: 0;
   left: 0;
   bottom: 0;
   background: rgba(0,0,0,0.5);
}

Answer 2

Alright, let me walk you through the process of creating Overlays. Firstly, make sure you have a parent div set up like this:

<div class="container">
  <div class="overlay-div"></div>
  <div class="content">
      <!-- Your Content Here -->
  </div>
</div>

Within your HTML code, you will find a container with an overlay-div and content. Now in your CSS file:

.container {
   position: relative;
}
.overlay-div {
   position: absolute;
   right: 0;
   top: 0;
   left: 0;
   bottom: 0;
   background: rgba(0,0,0,0.5);
}

Answer 3

Answer №2

If you're encountering issues with the accuracy of screen.height, make sure to consult this resource for clarification.

Combining CSS with a touch of JavaScript can help accomplish your task effectively.

Pay close attention to two key units in CSS: vw and vh. For an in-depth understanding, refer to this MDN article.

The following demonstration showcases how CSS and JavaScript work together for event handling.

let trigger = document.getElementById('trigger'),
  triggersClose = document.querySelectorAll('.trigger-close'),
  fullScreen = document.getElementById('fullscreen');

/** Click event listener to display the overlay when button is clicked **/
trigger.addEventListener('click', e => {
  e.preventDefault();
  fullScreen.classList.add('visible'); /** Adding .visible class shows the overlay **/
});

/** Setting click events to hide the overlay for all corresponding buttons **/
triggersClose.forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    fullScreen.classList.remove('visible'); /** Removing .visible class hides the overlay **/
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.overlay {
  display: none; /** Initially hiding the overlay **/
  position: fixed; /** Positioned fixed regardless of scrolling **/
  width: 100vw; /** Viewport width unit responsive to zooming changes **/
  height: 100vh; /** Viewport height unit responsive to zooming changes **/
  top: 0;
  left: 0;
  justify-content: center; /** Center content horizontally **/
  align-items: center; /** Center content vertically **/
  padding: 15px;
  background: rgba(24, 24, 24, .6);
  z-index: 999; /** Topmost layer on screen **/
}

.overlay.visible {
  /** JavaScript-triggered class to show the overlay **/
  display: flex; /** Simplifying layout with flex **/
}

.overlay .overlay-wrapper {
  display: flex;
  flex-direction: column;
  width: 65%;
  max-height: 100%;
  overflow-y: auto; /** Adding scrollbars for excess content **/
  background-color: #fff;
}

.overlay .overlay-wrapper .overlay-header {
  position: relative;
  background-color: #1548a6;
}

.overlay .overlay-wrapper .overlay-header>.text,
.overlay .overlay-wrapper .overlay-body {
  padding: 15px 5px;
}

.overlay .overlay-wrapper .overlay-header>.trigger-close {
  position: absolute;
  width: 45px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 1.1rem;
  font-weight: bold;
  border: 0;
  color: #fff;
  background-color: #dc3545;
  cursor: pointer;
  border-top-right-radius: 4px
}

.overlay .overlay-wrapper .overlay-footer>.trigger-close {
  float: right;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 8px 15px;
  color: #fff;
  background-color: #007bff;
  border: 0;
  border-radius: 4px;
}

<button id="trigger">Click me!</button>

<div id="fullscreen" class="overlay">
  <div class="overlay-wrapper">
    <div class="overlay-header">
      <h3 class="text">Message heading</h3>
      <button class="trigger-close">&times;</button>
    </div>
    <div class="overlay-body">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facere fugiat aperiam officiis debitis voluptas soluta assumenda cumque reiciendis blanditiis nostrum, consequuntur vero corporis doloribus! Expedita voluptatem illum maiores culpa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ex temporibus, possimus commodi, obcaecati nostrum maiores cupiditate voluptas voluptate unde qui quasi accusantium earum dolores pariatur fuga. Optio, officia praesentium.</p>
    </div>
    <div class="overlay-footer"><button class="trigger-close">Close</button></div>
  </div>
</div>

Read up more on flexbox (display: flex) for better insights into layout design.

Hopefully, this information will assist you further in your development journey.

Answer 4

If you're encountering issues with the accuracy of screen.height, make sure to consult this resource for clarification.

Combining CSS with a touch of JavaScript can help accomplish your task effectively.

Pay close attention to two key units in CSS: vw and vh. For an in-depth understanding, refer to this MDN article.

The following demonstration showcases how CSS and JavaScript work together for event handling.

let trigger = document.getElementById('trigger'),
  triggersClose = document.querySelectorAll('.trigger-close'),
  fullScreen = document.getElementById('fullscreen');

/** Click event listener to display the overlay when button is clicked **/
trigger.addEventListener('click', e => {
  e.preventDefault();
  fullScreen.classList.add('visible'); /** Adding .visible class shows the overlay **/
});

/** Setting click events to hide the overlay for all corresponding buttons **/
triggersClose.forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    fullScreen.classList.remove('visible'); /** Removing .visible class hides the overlay **/
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.overlay {
  display: none; /** Initially hiding the overlay **/
  position: fixed; /** Positioned fixed regardless of scrolling **/
  width: 100vw; /** Viewport width unit responsive to zooming changes **/
  height: 100vh; /** Viewport height unit responsive to zooming changes **/
  top: 0;
  left: 0;
  justify-content: center; /** Center content horizontally **/
  align-items: center; /** Center content vertically **/
  padding: 15px;
  background: rgba(24, 24, 24, .6);
  z-index: 999; /** Topmost layer on screen **/
}

.overlay.visible {
  /** JavaScript-triggered class to show the overlay **/
  display: flex; /** Simplifying layout with flex **/
}

.overlay .overlay-wrapper {
  display: flex;
  flex-direction: column;
  width: 65%;
  max-height: 100%;
  overflow-y: auto; /** Adding scrollbars for excess content **/
  background-color: #fff;
}

.overlay .overlay-wrapper .overlay-header {
  position: relative;
  background-color: #1548a6;
}

.overlay .overlay-wrapper .overlay-header>.text,
.overlay .overlay-wrapper .overlay-body {
  padding: 15px 5px;
}

.overlay .overlay-wrapper .overlay-header>.trigger-close {
  position: absolute;
  width: 45px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 1.1rem;
  font-weight: bold;
  border: 0;
  color: #fff;
  background-color: #dc3545;
  cursor: pointer;
  border-top-right-radius: 4px
}

.overlay .overlay-wrapper .overlay-footer>.trigger-close {
  float: right;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 8px 15px;
  color: #fff;
  background-color: #007bff;
  border: 0;
  border-radius: 4px;
}

<button id="trigger">Click me!</button>

<div id="fullscreen" class="overlay">
  <div class="overlay-wrapper">
    <div class="overlay-header">
      <h3 class="text">Message heading</h3>
      <button class="trigger-close">&times;</button>
    </div>
    <div class="overlay-body">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facere fugiat aperiam officiis debitis voluptas soluta assumenda cumque reiciendis blanditiis nostrum, consequuntur vero corporis doloribus! Expedita voluptatem illum maiores culpa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ex temporibus, possimus commodi, obcaecati nostrum maiores cupiditate voluptas voluptate unde qui quasi accusantium earum dolores pariatur fuga. Optio, officia praesentium.</p>
    </div>
    <div class="overlay-footer"><button class="trigger-close">Close</button></div>
  </div>
</div>

Read up more on flexbox (display: flex) for better insights into layout design.

Hopefully, this information will assist you further in your development journey.

The values returned by screen.height and screen.width are not accurate

Answer №1

Answer №2

Similar questions

What is the best way to retrieve all information from GitLab API using Axios?

The virtual method 'android.location.Location' was called in error

Using Node.js setTimeout method

What is the most effective way to exchange data among multiple React applications?

Chrome debug function named "Backbone" triggered

Using a number input with step increments of 0.01 in AngularJS can result in undefined values for specific inputs

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

How can an array of objects be sent as a query string to the endpoint URL in React?

Having trouble with the rendering of the Stripe Element Quickstart example

The initial rendering of the NextJs 13 application is experiencing significant sluggishness when deployed on an EC2

Does Typescript not provide typecasting for webviews?

What is the best way to resize an element such as an image?

Employ material-ui default prop conditionally

Using Redux to Implement Conditional Headers in ReactJS

Customizing Images using a JSON array of images

What steps should be taken to resolve the error message "TypeError: Cannot read properties of undefined (reading 'toLowerCase')?"

Creating a Kendo Grid that mimics the appearance and functionality of an

Adjust the background shade of specific characters within an input text field

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request