How To Get Height And Width After Window Resize
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, he
Solution 1:
Use an event listener which listens on resize, then you can reset your values:
window.addEventListener('resize', setWindowSize);
functionsetWindowSize() {
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
Solution 2:
Hope This Example Will Help You...
HTML Code:
<!DOCTYPE html><html><head><metacharset=utf-8 /><title>Window Size : height and width</title></head><!-- Resize the window (here output panel) and see the result !--><bodyonload="getSize()"onresize="getSize()"><divid="wh"><!-- Place height and width size here! --></div><body></body></html>JavaScript Code:
functiongetSize()
{
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// put the result into a h1 tagdocument.getElementById('wh').innerHTML = "<h1>Width: " + w + " Height: " + h + "</h1>";
}
Or You Can Also Use Jquery Code For Resize:
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
var height = $(window).height();
var width = $(window).width();
console.log("height"+height);
console.log("width"+width);
});
Solution 3:
This is the best way as far as I can see;
functionresizeCanvas() {
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
WIDTH = canvas.width;
HEIGHT = canvas.height;
}
Post a Comment for "How To Get Height And Width After Window Resize"