Prevent resizable elements from expanding to 100% of the screen's height and width

Is there a way to create a condition for when a script is executed? I want the script to be disabled if a window in the browser reaches 100% width and 100% height.

The script in question can be found here: 

element = document.getElementById("window");

let heightPercentage = Math.round(
 (element.clientHeight / window.innerHeight) * 100
);

let widthPercentage = Math.round(
 (element.clientWidth / window.innerWidth) * 100
);

if (heightPercentage < 100 && widthPercentage < 100) {
  makeResizable(element, 400, 225, 10);
}

function makeResizable(element, minW = 100, minH = 100, size = 20) { ...

I have attempted to implement this by changing the type of the script upon pressing a button. However, setting it to type="application/JSON" as advised in this post: , did not yield any results.

javascriptmacosconditional-statementswindowresize

Answer №1

I believe utilizing computed values is the most reliable approach as it provides the actual size displayed on the screen...

measure();


function measure() {
  let compStyles = window.getComputedStyle(document.body);
  let w = compStyles.getPropertyValue('width');
  let h = compStyles.getPropertyValue('height');
  document.querySelector('#bodyValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));

  compStyles = window.getComputedStyle(document.querySelector('.container'));
  w = compStyles.getPropertyValue('width');
  h = compStyles.getPropertyValue('height');
  document.querySelector('#containerValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));
}
body {
  background-color: #3b404e;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: red;
}
<div class="container">
  <button id="plus">+</button>
  <div id="bodyValues"></div>
  <div id="containerValues"></div>
</div>

You can now accurately compare the element's size with the body's size by extracting computed style widths in pixel values, and converting them using parseFloat or parseInt to remove the px unit.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with CSS loading due to div in Visual Studio MVC

Currently, I am working with Visual Studio 2013 MVC and have a situation regarding the styling of my navbar in _Layout. The navbar includes a messages dropdown menu that utilizes CSS and JS extensively. Interestingly, when I load the messages as a partial ...

javascriptjquerycssrazormodel-view-controller

Determining when a function is triggered from the JavaScript console

Is there a way to conceal a function in JavaScript console so that it's inaccessible for calling? Let me give you some context - let's say I have a JavaScript function that adds records to a database using Ajax. The issue is, anyone can call thi ...

javascriptajaxfunctionconsolehide

Sending an array of complex data to a controller method in ASP.net MVC

Currently, I am in the process of migrating an ASP.net Web Forms application to MVC. This application makes use of AJAX through an Ajax-enabled WCF Web service and asp:ScriptManager. I have been sending an array of objects to the service, and it has been ...

javascriptasp.netasp.net-mvcajax

Use regular expressions in JavaScript to replace text patterns

Is there a way to paste formatted text from Word or a web page into an HTML5 textarea without the formatting, but still keeping the line breaks? I attempted to extract the raw text and then use regex and Javascript's replace method to add line breaks ...

javascriptjqueryhtml

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Issue with dropdown element not triggering JavaScript onchange event

I am in the process of developing an application that involves searching a database and enabling users to compare the results. To achieve this, I require multiple dependent drop-down menus. While I have some understanding of HTML and PHP, my coding experti ...

javascriptphpjqueryajax

Stopping a Javascript function from running when an asp.net webform is loaded

Here is the code I wrote to display my position on the map: <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize(x, y) { alert(x); alert(y); var mapProp ...

javascriptjqueryasp.net

The issue of jQuery pop-up not functioning properly on a web page that has infinite scrolling

Currently, I am working on a website that showcases various products with images. When you hover over these images, a pop-up appears displaying details about the product along with a "buy now" button. Everything was functioning perfectly until the infinit ...

javascriptjqueryhtmlshopifyinfinite-scroll

Managing JavaScript promise rejections

What is the best approach to managing an error, such as the one labeled "new error" in the code snippet below, that occurs outside of a promise? function testError() { throw new Error("new error") // How can this error be properly handled? var p ...

javascriptpromisees6-promiserequest-promise

Issues presenting themselves with Material UI Icons

I need some help with a problem I'm having. I'm trying to integrate my React app into an Angular app, and everything is working fine except for the material-ui/icons. They appear, but they are not displaying correctly! I have made sure to use th ...

javascriptreactjsiconsmaterial-ui

How can jQuery be used to style a single selected option with a unique color?

I have a dropdown menu with a default placeholder ("ex. Crawler Excavator") displayed in lightgray. I want only this placeholder to be in lightgray when selected, while all other labels should be black. Currently, I am able to color the selected item light ...

javascriptjquerycss

What methods can I use to ensure precision in my raycasting while maneuvering the mouse over various sections of a LineSegment?

I have created a demonstration for drawing a LineSegment using three.js. I have implemented vertexColors in the material and assigned colors to the vertices. When hovering over different parts of the LineSegment, I change the color of the selected vertex ( ...

javascriptthree.js

Animating SVG elements with the rotation property in SVG.js

Currently, I am utilizing Javascript, Jquery, SVG, and SVG.js in my project. My goal is to rotate a circle around its origin while it's animating. The issue arises when the animation keeps restarting abruptly, causing a jittery motion. Here is the ini ...

javascriptjqueryanimationsvgsvg.js

Configuring a port binding for Node.js application on Heroku

It seems like Heroku is throwing this error Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch In my opinion, the issue might not be related to the port. However, many resources suggest that a timeout error is ...

javascriptnode.jsheroku

Using jQuery to verify the presence of an element, especially one that may have been dynamically inserted via AJAX

I have a good understanding of how to verify elements that are present when the document is loaded: jQuery.fn.exists = function () { return jQuery(this).length > 0; } However, this approach does not detect elements that are dynamically added via A ...

javascriptjqueryajaxdomexists

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Storing data locally in Angular applications within the client-side environment

As I delve into Angular and TypeScript, I've encountered a perplexing issue. Let's say I have two classes - Employee and Department. On the server-side, I've established a Many-To-One relationship between these entities using Sequelize: db. ...

javascriptangulartypescript

How to disable form submission using ENTER key in jQuery when alerts are present?

My form contains a text input field. To prevent the form from being submitted when ENTER key is pressed, I used this code snippet: jQuery("#inputTags").keydown(function(event) { if (event.keyCode == '13') { event.preventDefault() ...

javascriptjqueryformsevents

Removing JSON data with JavaScript

Currently, I am working on developing a custom discord bot for a server that I share with some friends. The bot includes a warn system and level system, and I have successfully implemented JavaScript to write data to an external JSON file. { "othe ...

javascriptjsondiscord.js

This text is about the settings that can be easily seen and

I'm looking to create a hidden section in my HTML (like a navigation bar) that becomes visible only when I hover over a specific area on the page. Once triggered, I want the navigation bar to pop up and remain visible so I can access its items without ...

javascripthtmlcssvisible