Question

111

How to get height and width after window resize

rated 0 times [ 112] [ 1] / answers: 1 / hits: 33768 / 12 Years ago, wed, september 26, 2012, 12:00:00

I have a scorm module which launches in a new window with resizable = 1 in window.open in my js file:

function OpenScormModuleWindow(scormModuleId, scormModuleUrl, title, width, height) 

{

  _scormModuleId = scormModuleId;

  InitializeUserScormModule();

  scormModuleWindow = window.open(scormModuleUrl, title, width= + width + , height= + height + , resizable = 1);

  scormModuleWindow.focus();

}

in my view I have:

  var myWidth = 0, myHeight = 0;

  if (typeof (window.innerWidth) == 'number')

  {

      myWidth = window.innerWidth;

      myHeight = window.innerHeight;

  }

  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))

  {

      myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;

  }

  else if (document.body && (document.body.clientWidth || document.body.clientHeight))

  {

      myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;

  }

I get height and width but is not correct

the user can now resize, when the window is the correct size, how can I get the height and width please?

I need to get these values so I can save it, next time the window opens it is the correct size.

thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Hide all labels and tooltips in Chart.js and make it very small size

Wed, Apr 8, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

View All

answered 12 Years ago cayden · Accepted Answer

Use an event listener which listens on resize, then you can reset your values:

window.addEventListener('resize', setWindowSize);



function setWindowSize() {

  if (typeof (window.innerWidth) == 'number') {

    myWidth = window.innerWidth;

    myHeight = window.innerHeight;

  } else {

    if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

      myWidth = document.documentElement.clientWidth;

      myHeight = document.documentElement.clientHeight;

    } else {

      if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

        myWidth = document.body.clientWidth;

        myHeight = document.body.clientHeight;

      }

    }

  }

}

If you need a cross browser solution use jQuery ($.on('resize', func)) or see JavaScript window resize event