Detecting Browser Window Width Dynamically [JavaScript]

Question

Detecting Browser Window Width Dynamically [JavaScript]

I want to create a dynamic variable that updates automatically as the browser window is resized in pixels. I need this variable to change without needing the page to refresh, and I don't want it written in the HTML document as it's used further down in the script.

Here's what I have so far:

window.onload = function() {
  var windowwidth = window.innerWidth;
};

window.onresize = function() {
  var windowwidth = window.innerWidth;
};

console.log(windowwidth);

SOLUTION BELOW

window.onload = function() {
  currentWidth(document.body.clientWidth);
};

window.onresize = function() {
  currentWidth(document.body.clientWidth);
};

function currentWidth(w) {

// Math using w goes here

}

javascript variables resize window-resize window-width

Answer 1

Answer №1

Try out the JS Code below on your website and then adjust the window size. Watch as the variable value changes dynamically based on the window resize event.

var a = Math.random();
console.log (a);
window.onresize = function()
{
    a = Math.random();
    console.log (a);
}

Answer 2

Try out the JS Code below on your website and then adjust the window size. Watch as the variable value changes dynamically based on the window resize event.

var a = Math.random();
console.log (a);
window.onresize = function()
{
    a = Math.random();
    console.log (a);
}

Answer 3

Answer №2

Make sure to execute the function within the callback

window.onload = function() {
  checkWindowWidth(window.innerWidth);
};

window.onresize = function() {
  checkWindowWidth(window.innerWidth);
};

function checkWindowWidth(width) {
  console.log(width)
  console.log(width > 500)
}

Answer 4

Make sure to execute the function within the callback

window.onload = function() {
  checkWindowWidth(window.innerWidth);
};

window.onresize = function() {
  checkWindowWidth(window.innerWidth);
};

function checkWindowWidth(width) {
  console.log(width)
  console.log(width > 500)
}

Detecting Browser Window Width Dynamically [JavaScript]

Answer №1

Answer №2

Similar questions

JavaScript communication between clients and servers

Using JQuery to enable checkbox if another is selected

How to change the state using an object as an argument in the useState hook within a function

Passing events from Vue to child components

What is the best way to transfer the content from a tinyMCE textarea editor to an inner controller using Symfony3 and Ajax

Simulate a failed axios get request resulting in an undefined response

The value retrieved from redux appears to be varying within the component body compared to its representation in the return

Can I exclusively utilize named exports in a NextJS project?

Tips on how to update the styling of an active link

Using jQuery functions on inputs within a Bootstrap Modal

Guide on comparing an object against an array and retrieving a specific output

Checking the conditional styling implemented with Material UI makeStyles: a step-by-step guide

Is there a way to verify the results of a Python script within a PHP webpage?

Search for a DIV element within iMacro on a consistent basis

Creating a unique input box using CSS and HTML

Transferring the link value to an AJAX function when the onclick event is triggered

Merge the outputs of all While loops into one variable

Creating dynamic scroll animations for sidebar navigation in a single-page website with anchor links

Creating subpages using IDs can be accomplished by following these simple steps

Redirecting in AngularJS after a successful login操作