I'm opening a new window from javascript using this code
window.open('index.htm', 'myWindow', 'width=1020,height=400');
However the window seems to be opening 10px too wide when measuring from outter border to outer border, I've only tested this on IE7 and IE8 so far. Does anyone know what could be causing this?
See the IE Blog for details on how Microsoft changed their window dimensions in IE7 (and beyond)
IE Blog: Why Does IE Resize My Dialogs?
Quotes:
IE6 gives web developers control over the frame size of dialogs (also known as the ‘chrome’). The frame includes visual elements such as the title bar, status bar, borders, etc. This is a problem for web developers because the dialog’s frame size varies according to whatever windows theme is applied (this is bad)...
In Windows XP Service Pack 2, IE’s security improvements added window restrictions that forced the status bar onto windows and dialogs (in certain security zones); developers adapted by subtracting the height of the status bar from their dialogs...
Before the guesswork for sizing the content area gets any worse for developers, we felt it was time to set things right by focusing on delivering HTML content area instead of total frame size.
Here’s how we changed it. In IE7, the meaning of window.dialogHeight and dialogWidth now refers to the content area. Essentially, the area (height/width) that you specify is what we try to deliver in the content area of the dialog (barring window restrictions on scriptable minimum sizes: 250px wide x 150px high*). It will no longer be necessary to calculate the area lost by components of a dialog’s frame.
Figure 3
window.onload=setTimeout(function(){window.open('http://www.w3schools.com', 'myWindow', 'width=920,height=400');},1000);
Related
So the definition of innerWidth according to W3C is:
The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
Does this mean that if something inside the document generates overflow then window.innerWidth can be affected? I have this very simple sandbox (which is only a div causing overflow) and this seems to be true when using the sandbox preview with Chrome device tools (Chromium 84) and in mobile (I only tested Android), but in desktop browsers the value doesn't seem to be affected. Why? Is this the intended behavior?.
Note in the image that the width in the tools don't match the logged width:
No, overflowed content cannot affect window.innerWidth. What you are seeing is an issue with chrome dev tools. The window is still 1600px even though chrome is artificially resizing to a mobile device size.
I have made a simple chrome app which should only need to be 50px wide for my purposes.
But currently I have not figured out how to make window really narrower than about 140px which the window will come.
Even if I set the width and maxWidth properties to 50px. And when window is narrow as possible, it contains the minimize, maximize and close button. So maybe they are because Windows need them to be?
I tried to make it borderless (/frameless), but same problem with the width still occurs.
Is it possible to remove the minimize and maximize buttons? Or is it even possible to make the chrome app so narrow?
Currently have only tested this on Windows 7
Since you already tried frameless, there's likely nothing you can do. I tested it on Windows 10, same result.
Seems like for frameless windows Chrome creates a normal window (constrained in size by displaying those controls in Windows) and just overrides how it's painted.
It seems to be a reported bug with not much activity. With Chrome Apps being deprecated on Windows, I don't see this getting fixed.
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.