Can I get the original size of the browser even if it is minimized?
This code isn't working - perhaps it grabs the current size, not the original size.
var original_size = $(window).width();
var original_size2 = window.innerHeight;
var original_size3 = $(window).width() || window.innerHeight;
I think you're searching for:
window.screen.availHeight
window.screen.availWidth
console.log("Available Height: " + window.screen.availHeight);
console.log("Available Width: " + window.screen.availWidth);
Related
Is this possible? Use of jQuery is also available.
You've said "browser height" both in the question and, when asked to clarify, in the comments on the question.
The answer is: No, it isn't possible to find out the height of the browser window. But then, 99.99999% of the time, you don't care.
You can find out:
The height of the displayed area of the page (the viewport) via $(window).height(); more
The height of the document as a whole (which can be shorter or taller than the viewport) via $(document).height() (same link)
And usually even the height of the user's screen (via window.screen.height)
None of these gives you the height of the browser window, though.
The following code sets the variables winW and winH to the inner width and height of the browser window, and outputs the width and height values. If the user has a very old browser, then winW and winH are set to 630 and 460, respectively.
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln('Window width = '+winW);
document.writeln('Window height = '+winH);
taken from here
You can ofcourse substract/add/multiply/whatever you want before printing the values.
You either need:
$(window).height();//viewport
OR
$(document).height();//complete document
OR
window.screen.height;//screen resolution height
It returns an integer value, so you can do calculations on it
alert( $(window).height() - 100 );
height() is what you are looking for..
http://api.jquery.com/height/
var heght= $(window).height(); //this gives you the height of the window
alert(heght - 50);
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
You may also use:
document.body.clientHeight
You should look for height function of Jquery like this
$(window).height() or $(document).height()
and for subtracting pixels just use $(window).height()-5
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
) - mynumber ;
}
If the actual document’s body height is less than the viewport height then it will return the viewport height instead.
And jQuery Method:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
alert( $.getDocHeight() - mynumber);
Is there a jQuery plugin or a way using straight JavaScript to detect browser size.
I'd prefer it is the results were 'live', so if the width or height changes, so would the results.
JavaScript
function jsUpdateSize(){
// Get the dimensions of the viewport
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var height = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
document.getElementById('jsWidth').innerHTML = width; // Display the width
document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize; // When the page first loads
window.onresize = jsUpdateSize; // When the browser changes size
jQuery
function jqUpdateSize(){
// Get the dimensions of the viewport
var width = $(window).width();
var height = $(window).height();
$('#jqWidth').html(width); // Display the width
$('#jqHeight').html(height); // Display the height
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // When the browser changes size
jsfiddle demo
Edit: Updated the JavaScript code to support IE8 and earlier.
you can use
function onresize (){
var h = $(window).height(), w= $(window).width();
$('#resultboxid').html('height= ' + h + ' width: ' w);
}
$(window).resize(onresize );
onresize ();// first time;
html:
<span id=resultboxid></span>
This should return the visible area:
document.body.offsetWidth
document.body.offsetHeight
I guess this is always equal to the browser size?
use width and height variable anywhere you want... when ever browser size change it will change variable value too..
$(window).resize(function() {
width = $(this).width());
height = $(this).height());
});
Do you mean something like this window.innerHeight; window.innerWidth $(window).height(); $(window).width()
You can try adding even listener on re-size like
window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize()
{
var ResX= document.body.offsetHeight;
var ResY= document.body.offsetWidth;
}
If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}
You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/
You should take a look to tha background-size properties, especially at the cover values
Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!
I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
How do I get the browser window height so I can find the center position?
I only need the window height, not the web page height.
I tried $(window).height() / 2 but it only works if the browser has focus from the top of the page. If I scroll down I get the wrong center.
To get the y value of the center of the current viewable area, use:
$(window).scrollTop() + $(window).height() / 2
I tried it on this page, by opening up the Web Inspector and entering:
$('<p>').text('test').appendTo('body').css({position: 'absolute', top: $(window).scrollTop() + $(window).height() / 2});
I think that the body's height needs to be in brackets for it to work properly:
var center = $("body").scrollTop() + ($("body").height() / 2);
However, if you're making a popup dialog, it's better to detect if the user is not on a mobile device then use the CSS "position: fixed". You detect for mobile devices because Mobile Safari doesn't understand fixed positioning in iOS versions before 5. Use this code for the detection:
var isMobile = navigator.appVersion.indexOf("Mobile/") != -1;
Ad#m
Try window.outerHeight and window.outerWidth, which works in FF5 (and possibly earlier versions) and Chrome, but not in IE9. From googling it seems that this bit of info is not easy to get by in IE.
Also see this other question dealing with IE.
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="' + src + '" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var w = 700;
var h = 600;
var leftCenter = window.innerWidth / 2;
var leftWindowMargin = leftCenter - (w / 2);
var topCenter = window.innerHeight / 2;
var topWindowMargin = topCenter - (h / 2);
var win = window.open("", "", "width=" + w + ",height=" + h + ",resizable=no,top=" + topWindowMargin + ",left=" + leftWindowMargin + ";");
win.document.write(iframe);
now i get the image's width and height when onload function of img . my problem is, the image original width = 500px but document.getElementId(id).offsetWidth gives only 300px and also for height. Please help me how can i get original width and height of image
At least Gecko- (Firefox) and WebKit-based (Safari, Chrome) browsers should implement properties naturalWidth and naturalHeight for image elements:
var image = document.getElementById("imageid");
if (image.naturalHeight === undefined) {
alert("Your browser doesn't support this example!");
} else {
var message = "The original size of the image:";
message += "\n height: " + image.naturalHeight + "px";
message += "\n width: " + image.naturalWidth + "px";
alert(message);
}
sorry my browser doesn't support with naturalHeight and naturalWidth..