For FF and other non-IE browsers, window.opener.outerWidth/Height give me the info I need. For IE, I'm still at a loss, from IE6 to 8. I can't use jquery as the opener's page is beyond my control, so I can't do a window.opener.$(window). This requires the opener to have jquery 'attached' (correct me if I'm wrong).
I googled quite a bit and also searched this site, still can't find a definite neat answer.
To add:
I really need the outer size so that I can do a resizeTo(w, h) for the opened window where w and h are calculated based on a ratio of the opener's size. "resizeTo" ironically sets the outer size for IE and other browsers. I also tried a messy loads of stuff using resizeBy, not good enough.
outerWidth and outerHeight define dimensions of the browser window (including sidebar, window chrome and window [re-]sizing borders/handles). Unfortunately you cannot get these dimensions in IE - only the window viewport dimensions are available (good enough for most applications I've seen). Aka window.innerWidth/window.innerHeight.
jQuery can give you the dimensions of the current window viewport, but not other windows (eg, openers, children, etc). So you'll have to code this yourself. Here is a crude sample:
// get viewport size (without scrolling) of the given window object
function clientSize(win) {
var width, height;
if(win.innerWidth || win.innerHeight) {
width = win.innerWidth;
height = win.innerHeight;
} else {
var doc = win.document;
width = doc.documentElement.clientWidth || doc.body.clientWidth;
height = doc.documentElement.clientHeight || doc.body.clientHeight;
}
return { width:width, height:height }
}
Try it like:
var openerSize = clientSize(window.opener);
// now use openerSize.width, openerSize.height
Also note that you can't read any of these values if the given window has loaded a document from another domain (security measure).
Related
I created a hobby site a few years ago that started as a convenient compact one-line-entry multi-search site. Later, I added various web tools, one-click radio stations, and other enhancements.
At first, I optimized for 1024x768 screens but tried to accommodate 800x600 screens. However, wide screen format is becoming dominant, so I decided it would be better to optimize things a bit by splitting the code, mostly, but not limited to, CSS changes, based on detecting a minimum 960 pixel width.
Screen widths less than 960 pixels wide redirect to a "mini.php" version.
The javascript code below selects the appropriate URL correctly if the web browser is already open. However, when initially opening a browser, the "mini" version is incorrectly selected regardless of the screen width. I tried delaying detection by using setTimeout() without effect.
var myWidth = 981
function vpWidth() {
return( myWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
}
vpWidth(); setTimeout(vpWidth,300);
if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";
Who can provide a solution that always works and not just when the browser is already open?
You're never actually setting myWidth. Also, I replaced your function with how jQuery gets the width internally.
function vpWidth() {
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
}
var myWidth = vpWidth();
if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";
Make your website responsive which will help you to cover more number of visitors to your size, as most of the people use their smartphone to browse websites nowdays.
http://alistapart.com/article/responsive-web-design
Further testing this width error upon browser startup showed that it seems limited to Chromium-based browsers where the target tab is not the active one. In such cases, Google Chrome took its window width results from the non-maximized window size even though the window was actually maximized.
Two detection steps were required on the way to a solution:
(1) is the browser Chromium-based? --> navigator.userAgent.indexOf("Chrome/")>0
(2) is the tab inactive? --> document.webkitVisibilityState == "hidden"
test URL: http://www.gooplusplus.com/chrome-bug.html
my working solution:
<script>
var myWidth = 981
var dde = document.documentElement;
var tabVisible = document.webkitVisibilityState;
if(!document.documentElement) dde = document.body; // fix for IE6 and earlier
myWidth = Math.max(dde.scrollWidth,dde.offsetWidth,dde.clientWidth);
if( ( navigator.userAgent.indexOf("Chrome/")<0 || tabVisible!="hidden" ) && myWidth < 960 )
document.location.href="http://www.gooplusplus.com/mini.php";
</script>
The above technique fixed the problem. Although the #theJoeBiz answer turned out to be irrelevant to the ultimate solution, his code was useful. I based my own new myWidth assignment code on his jQuery Math.max code, while noting that his code failed on my non-jQuery web page due to inclusion of pre-IE7 document.body variables (see fix in code above).
I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:
var bodyHeight = $('body').height();
var screenHeight = $(window).height();
My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).
This is true in
- Firefox
- Chrome 15 (whoa! When did Chrome get to version 15?)
- Safari on iOS5
This is NOT working in:
- Safari on iOS4
- Safari 5.0.4
On the latter two, $(window).height(); always returns the same value as $('body').height()
Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.
Has anyone ran into this and know of a way around this issue?
To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.
I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.
I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.
It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.
Some tests (on iPhone with screen size 320x480, in landscape mode):
// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width
// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight
// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px.
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight
Here is how height is detected:
var getIOSWindowHeight = function() {
// Get zoom level of mobile Safari
// Note, that such zoom detection might not work correctly in other browsers
// We use width, instead of height, because there are no vertical toolbars :)
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
// window.innerHeight returns height of the visible area.
// We multiply it by zoom and get out real height.
return window.innerHeight * zoomLevel;
};
// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();
return tH > 1 ? tH : 0;
};
Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.
One year passed since you asked this question, but anyway hope this helps! :)
I had a similar problem. It had to do with 2 thing:
Box-sizing CSS3 property:
In the .height() jQuery documentation I found this:
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().
This may apply to $('body').height().
Document ready vs Window.load
$(document).ready() is run when the DOM is ready for JS but it's possible that images haven't finished loading yet. Using $(window).load() fixed my problem. Read more.
I hope this helps.
It is 2015, we are at iOS 8 now. iOS 9 is already around the corner. And the issue is still with us. Sigh.
I have implemented a cross-browser solution for the window size in jQuery.documentSize. It stays clear of any kind of browser sniffing and has been heavily unit-tested. Here's how it works:
Call $.windowHeight() for the height of the visual viewport. That is the height of the area you actually see in the viewport at the current zoom level, in CSS pixels.
Call $.windowHeight( { viewport: "layout" } ) for the height of the layout viewport. That is the height which the visible area would have at 1:1 zoom - the "original window height".
Just pick the appropriate viewport for your task, and you are done.
Behind the scenes, the calculation roughly follows the procedure outlined in the answer by #DmitrySemenov. I have written about the steps involved elsewhere on SO. Check it out if you are interested, or have a look at the source code.
Try this :
var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()
A cross browser solution is set that by jQuery
Use this property:
$(window).height()
This return a int value that represents the size of visible screen height of browser in pixels.
We are using Mootools Multibox to display images.
The first time we view it with Chrome and Safari, the images are zoomed in and have scrollbars.
When we reload the page, the images display correctly without scrollbars.
What could be the cause of this?
How can we fix this so that the images are displayed with their correct sizes the first time viewed in Chrome and Safari?
in this block of code:
showContent: function(){
this.box.removeClass('MultiBoxLoading');
this.removeContent();
this.contentContainer = new Element('div', {
'id': 'MultiBoxContentContainer',
'styles': {
opacity: 0,
width: this.contentObj.width,
height: (Number(this.contentObj.height)+this.contentObj.xH)
}
}).inject(this.box,'inside');
it sets with width of the content box to the contentObj.width direct. which is fine if the browser has the image in the cache - at which point it will work but not so fine when it does not.
it uses Asset.js to load an image here:
load: function(element){
this.box.addClass('MultiBoxLoading');
this.getContent(element);
if(this.type == 'image'){
var xH = this.contentObj.xH;
this.contentObj = new Asset.image(element.href,{onload:this.resize.bind(this)});
this.contentObj.xH = xH;
}else{
this.resize();
};
},
the problem is, only after the onload fires does the browser know the actual width and height of the image (available through this.width / this.height if not bonund to class scope). although this will return an image object early (into contentObj), it probably shouldn't just yet and should do it after the onload fires. the onload here should be what injects the image into the container and sets width and height to host it. instead, it applies this.resize(image)
i hope this gives you some ideas as to how to refactor the class to make it work better.
ADDITONALLY: var xH = this.contentObj.xH; and this.contentObj.xH = xH; -> element storage for other elements direct into the object? this pre-dates mootools 1.2 which introduced closure based uid specific storage per element. bad practice, can cause slowness in IE, memory leaks etc.
refactor to this.contentObj.store("xH", something) with this.contentObj.retrieve("xH") to get it back
Mozilla & IE developers seem to have simultaneously changed the implementation of their height elements to represent the Opera implementation... which I previously did not have to worry about.
var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;
When performed on a blank document now returns 0 as the height of the document. My implementation requires knowing the true client viewport to dynamically build on. Chrome and Safari are still acting as they used to.
scrollHeight, and clientHeight are acting exactly the same.
To complicate matters document.height and document.body.offsetHeight are now also taking the full height of the document into account instead of only the viewable area as they used to... I tried an old table spacing method and used a 2000px x 1px transparent andthe document height is set to 2000 now.... naturally Chrome and Safari still work as expected and only give the viewable size.
I am very desperate to fix this issue.
The viewport height is not a property of the document, but of the window viewing it. You get the viewport height from window.innerHeight.
The stuff with document is only needed as a fallback for IE, which doesn't provide the window.inner dimensions. IE (technically incorrectly) makes the document.documentElement represent the viewport, so you can get the height from its clientHeight, unless you're in Quirks Mode which (more incorrectly) makes document.body represent the viewport instead. (document.height is totally non-standard; avoid it.)
So in summary, and assuming you need to support Quirks Mode (let's hope you don't):
var height= (
'innerHeight' in window? window.innerHeight :
document.compatMode!=='BackCompat'? document.documentElement.clientHeight :
document.body.clientHeight
);
I use this, that I got from James Paldosey's site:
function getDocHeight() {
//utility function to find dimensions of page
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)
);
}
Is there any way to set the minimum size of a popup window through JavaScript?
My problem is that when someone makes it as small as he can the content just looks stupid.
When creating pop-ups, you can only set width and height. But since the pop-up was created, it means you can change the height and width of the window when the pop-up loads.
Simply place an onload event inside your pop-up window:
window.onload = function() {
if (document.body.scrollHeight) {
var winWidth = document.body.scrollWidth;
var winHeight = document.body.scrollHeight;
} else if (document.documentElement.scrollHeight) {
var winHeight = document.documentElement.scrollHeight;
var winWidth = document.documentElement.scrollWidth;
} else {
var winHeight = document.documentElement.offsetHeight;
var winWidth = document.documentElement.offsetWidth;
}
window.resizeTo(winWidth, winHeight);
}
edit: Tested in IE7,8, Chrome, Safari 4, Firefox 3. Working, but you might need to take into account the size of menu+address bars and such, as the window size will be the outer size, and this function will find the size of the content. So to be safe you should probably add a couple of pixels, and also turn off scrollbars in the popup to make sure they won't take up any space.
I do not believe that you can set a minimum using the Javascript new window. I know you can set the size and disable the scroll bars and prevent resizing, but that would answer the minimum, but also impose a maximum as well, which you may not be wanting.
Most browsers have a minimum width and height.
Internet Explorer 7
minimum width > 250px
minimum height > 150px
When using windows.open, you can specify the height and width of the window like this:
window.open ("http://www.stackoverflow.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
It is not the minimum size though, as the window will not be bigger when there is more room. You would have to check screen space yourself for that.
http://www.htmlgoodies.com/beyond/javascript/article.php/3471221
As seen in the link, you can set the minimum size. If you want to scale it so it gets bigger you must to that from within the popupwindow.