In html head:
<script type="text/javascript">
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;
}
</script>
In html body:
<script type="text/javascript">
document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>
It works good. The question is: how can I have it to display the width/height values while resizing the browser? Like here http://quirktools.com/screenfly/ at bottom left corner.
Many thanks!
I like gilly3's solution, but it would be useful to have the full code (for those in a hurry!)
<script>
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>
Bind to window.onresize. Don't use document.write(). Put the <p> in your HTML and give it an id. Then just set the innerHTML of the element directly:
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
Or, if you're already using jquery, you can use .resize(handler) to capture the resize event and .resize() without any parameters to trigger the initial event when the window is done loading.
Like this:
$(window).resize(function() {
// your size calculation code here
$("#dimensions").html(myWidth);
}).resize();
Demo in Fiddle
<!DOCTYPE html>
<html>
<head>
<title>How to get width of screen when window is resizing?</title>
</head>
<body>
<script>
window.onresize=function()
{
document.body.innerHTML=window.innerWidth;
}
</script>
</body>
</html>
To learn the meaning of the each line of the code - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html
Related
I have a jquery script that i want to convert in javascript.
Jquery:
<script type="text/javascript">
$(document).ready( function() {
addCssTransform();
$( window ).resize(function() {
addCssTransform();
});
function addCssTransform() {
var docWid = $(document).width();
var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
var actualWidth = w - (w - docWid);
var zoom = actualWidth / 1280;
var zoomRatio = zoom *100;
console.log(zoomRatio);
if(actualWidth > 1280) {
$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
}
}
});
</script>
I have tried and here is the output. But it is not working and giving error in console.
javascript:
<script type="text/javascript">
addCssTransform();
window.addEventListener('resize', function(event){
addCssTransform();
});
function addCssTransform() {
var docWid = document.body.clientWidth;
var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
var actualWidth = w - (w - docWid);
var zoom = actualWidth / 1280;
var zoomRatio = zoom *100;
console.log(zoomRatio);
if(actualWidth > 1280) {
document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
//$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
}
};
</script>
It seems there is an error in line:
document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
getElementsByTagName returns an array-like NodeList object, not an element. You can't set style on it. You have to loop over it and set the style on each member (which will be elements) of it in turn.
<script type="text/javascript">
// Add 'DOMContentLoaded' event
document.addEventListener('DOMContentLoaded', function () {
addCssTransform();
// NOTE: Just reference the function. Don't create new one unless needed
window.addEventListener('resize', addCssTransform, false);
function addCssTransform() {
var docWid = document.body.clientWidth;
var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
var actualWidth = w - (w - docWid);
var zoom = actualWidth / 1280;
var zoomRatio = zoom *100;
console.log(zoomRatio);
if(actualWidth > 1280) {
// If you are adding styles to 'html' element, use available 'document.documentElement' property
document.documentElement.style.fontSize = zoomRatio + '%';
//$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
}
}
}, false);
</script>
Add DOMContentLoaded event and place your JavaScript inside it.
Reference the function.
You can write the below code
window.addEventListener('resize', function (event) {
addCssTransform();
}, false);
as
window.addEventListener('resize', addCssTransform, false);
Use document.documentElement to access 'html' element
You are calling the addCSSTransform function before it is defined. Move the call to after the function declaration, i.e:
window.addEventListener('resize', function(event){
addCssTransform();
});
function addCssTransform() {
var docWid = document.body.clientWidth;
var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
var actualWidth = w - (w - docWid);
var zoom = actualWidth / 1280;
var zoomRatio = zoom *100;
console.log(zoomRatio);
if(actualWidth > 1280) {
document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
//$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
}
};
addCssTransform();
as suggested by Vigneswaran, you may wish to bind the call to a DOMContentLoaded event (equivalent to $(document).ready) as follows:
document.addEventListener('DOMContentLoaded', addCssTransform);
The suggestions above regarding nodeLists returned from getElementsByTagName are also correct (the clue's in the name - getElementsByTagName). There will (or should!) only ever be one html element, so you can safely replace document.getElementsByTagName("html").style with document.getElementsByTagName("html")[0].style
getElementsByTagName returns an nodeList over which you would need to loop.
An alternative would be to use querySelector which returns a single element instead:
document.querySelector('html');
I have a problem with resizing iframe content in IE7.
I have an external iframe
<IFRAME id=fl_game src="my_iframe_page" frameBorder=0 allowTransparency scrolling=no></IFRAME>
with width=100%, height=93%
and add my page into it. Here is a page body
<div id="container">
<div id="game-box">
<div id="flashcontent">
</div>
</div>
</div>
<script type="text/javascript">
swfobject.embedSWF("<%=application.getContextPath()%>/flash/<%= request.getParameter(PARAM_GAME) %>/game.swf", "flashcontent", gameWidth, gameHeight, "10.1", "/flash/expressInstall.swf", flashvars, params);
</script>
On my page I add resize events.
if (window.addEventListener) {
window.addEventListener("load", resizeGame, false);
window.addEventListener("resize", resizeGame, false);
} else if (window.attachEvent) {
window.attachEvent("onload", resizeGame);
window.attachEvent("onresize", resizeGame);
} else {
window.onload = function() {resizeGame();};
window.onresize = function() {resizeGame();}
}
Here is my resizeGame function
function resizeGame(isIEResize) {
var flash = document.getElementById('flashcontent');
var screen = screenSize();
var width = screen.width;
var height = screen.height;
var left = 0;
var top = 0;
if (height * 1.5 > width) {
height = width / 1.5
} else {
width = height * 1.5;
}
flash.width = width;
flash.height = height;
document.getElementById('flashcontent').style.width = width + 'px';
document.getElementById('flashcontent').style.height = height + 'px';
document.getElementById('flashcontent').style.top = '50%';
document.getElementById('flashcontent').style.left = '50%';
if (width < screen.width) {
left = (screen.width - width) / 2 + left;
}
if (height < screen.height) {
top = (screen.height - height) / 2;
}
document.getElementById('game-box').style.top = top + 'px';
document.getElementById('game-box').style.left = left + 'px';
}
function screenSize() {
var w, h;
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return {width:w, height:h};
}
And here is a question:
In IE7 function screenSize() gives me wrong height on load. Under other browsers and IE>7 function screenSize() gives me correct height. That's why I can't resize my content properly.
And when I explicitly resize a window, function screenSize() starts to give correct height.
Here some screens before explicit resizing and after it.
screenSize() gives strange height ONLY in IE7.
I am ready to add any extra information to find a reason of this situation.
I hope someone can help me to find out how to define iframe height in IE7. Any help will be useful.
Trying to get my application to fit into the browser window both width and height keeping proportions.
I have included a JS fiddle of an example: http://jsfiddle.net/4Mjtr/3/
Was sliced in photoshop so the way the html is output is each div class has its own css e.g
//HTML//
<div class="id1462-Select-Pattern">
<img src="http://www.travel-master.co.uk/coach-hire-minibus-images/email-quote.jpg"width="183" height="45" alt="" />
</div>
//CSS//
div.id1462-Select-Pattern {
position:absolute;
left:80px;
top:723px;
width:183px;
height:45px;
}
I have tried media queries but the canvas and images dont seem to resize also i read that with text you have to manually change the font size but the images are not resizing properly
Remove the Height from the image, setting only the width will resize the image and keep proportions as well.
You can use javascript function to get the browser's Width & Height, would be something like:
function getBrowserWindowSize() {
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var currWindow = new Array();
currWindow[0] = myWidth;
currWindow[1] = myHeight;
return currWindow;
}
And you can manage your desired elements width & height with the resize and load events by calling this function again.
I need a Js / JQuery Script , which return me browser's available width and height excluding menu bar and toolbar size , i am using one script but it seems to be returning width / height including toolbar ect...
below is script i have used..
<script type="text/javascript" >
var winWidth = 0, winHeight = 0;
if (typeof (window.innerWidth) == 'number') {
//Non-IE
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
winWidth = document.body.clientWidth;
winHeight = document.body.clientHeight;
}
</script>
Any body have any clue on this?
Thanks
Meghana
Using jQuery , you can have the following :
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Your code should return the usable size of your browser window. In my case, on a 1920x1200 display, I get 1920x1106. My taskbar is 40 pixels tall, so that leaves 54px for the titlebar of the window.
try:
<input type='button' id='btn1' value='test'/>
$('#btn1').click(function(){
alert($(window).width());
});
See http://jsfiddle.net/Pu2Ej/
I am looking for a code snippet to get the height of the viewable area within a browser window.
I had this code, however it is somewhat bugged as if the the body doesn't exceed the height the of the window then it comes back short.
document.body.clientHeight;
I have tried a couple of other things but they either return NaN or the same height as the above.
Does anyone know how to get the real height of the browsing window?
You'll want something like this, taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
So that's innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.
Try using jquery:
window_size = $(window).height();
You can use the window.innerHeight
The way that I like to do it is like this with a ternary assignment.
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.
Works on IE and other browsers as far as I know (I have only tested it on IE11).
Super clean and, if I am not mistaken, efficient.
There's a simpler way than a whole bunch of if statements. Use the or (||) operator.
function getBrowserDimensions() {
return {
width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
};
}
var browser_dims = getBrowserDimensions();
alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);
This should works too. First create an absolute <div> element with absolute position and 100% height:
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
Then, get the window height from that element via offsetHeight
var winHeight = document.getElementById('h').offsetHeight;
Update:
function getBrowserSize() {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.width = '100%';
div.style.height = '100%';
document.documentElement.appendChild(div);
var results = {
width: div.offsetWidth,
height: div.offsetHeight
};
div.parentNode.removeChild(div); // remove the `div`
return results;
}
console.log(getBrowserSize());
var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);
With JQuery you can try this $(window).innerHeight() (Works for me on Chrome, FF and IE). With bootstrap modal I used something like the following;
$('#YourModal').on('show.bs.modal', function () {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
I prefer the way I just figured out... No JS... 100% HTML & CSS:
(Will center it perfectly in the middle, regardless of the content size.
HTML FILE
<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>
CSS FILE
#container{
border:0;
width:100%;
height:100%;
}
#centerpiece{
vertical-align:middle;
text-align:center;
}
for centering images / div's held within the td, you may wish to try margin:auto; and specify a div dimension instead. -Though, saying that... the 'text-align' property will align much more than just a simple text element.
JavaScript version in case if jQuery is not an option:
window.screen.availHeight