I have a window I am opening via window.open. The call to window.open can take some parameters like width, height, scroll bars, etc. In my application, I would like to use window.open to show a screen of varying height. For instance, it may be 200 pixels high or 400 pixels high depending on the user state. The state is unknown at the location of window.open. Is it possible to have the opened window be sized to fit its content? As far as I can tell, you can use window.resizeTo, but this doesn't seem to work in Chrome.
If possible, load the content in the parent page inside a container div, obtain the container div's width and height using Javascript's *.offsetWidth and *.offsetHeight, then use those values in window.open to have the new window fit the content.
Related
I have an idea for a layout. When users first load a page. The content will be display full window height. But when users resize the window, it will add a vertical scroll bar to view the full window height.
To put into another, it is like I want to keep the full height window when users resize the window.
Example, initially the window full height is 1600px, and then when users use a mouse to resize the window to 1000px for example, I want the content still 1600px and a scroll bar is added to help users view the content.
And if users open the window initially at let's say the smaller screen 800px height. I want it first make full height but then when users resize the content will fit the resize window.
Am I confused about my idea but is it possible to do so?
If you mean zoom when you say resize and mouse. You can use
window.resize = function() {
//will be called whenever the window changes size. I.E zooming in or changing the window size manually
}
To pick up that behaviour, but the best approach I believe would be the place the content you wish to have this property into a div wrapper. As that way you can set the size manually.
Hope that helps
Let's do it by steps:
are you using any framework ?, Frameworks generally use the window's resizing base, the percentage of the window used, so it will adapt whenever the user decreases or enlarges the screen, if you want the static screen when resizing, change the css attributes of your framework, or create your layout with pixel or hexadecimal from scratch. To create an adaptive window on the first access and then leave it static, first you have to put your highest value DOM element (html, or window) in css, and the other elements you leave in pixel values, if you need , also use the "position: fixed" attribute.
I'm using Dialog API. To determine dialog's height I need to get the size of visible area of the screen (i.e. window.innerHeight). I tried accessing innerHeight property from within function file or dialog file, but got 0 in both cases. I'm guessing that it's due to dialog running in an iframe, but is it possible to get visible screen's area in some other way?
UPDATE: the requirement that I have is to prevent vertical scrollbar in the dialog. I am creating controls dynamically and adding them to the dialog. Thus I need to resize the dialog to fit the controls preventing the vertical scrollbar and extra whitespace at the bottom.
So the window I am opening, does so as below:
test
The page opens a login page which requires a minimum width of 800 and height of 600 in order to see all the content.
However once they have logged in, it then takes them to a information page, but the aspect ratio needs to stay the same as the original window that it was opened in (600,640).
Is there a way I can get javascript to resize the window, but keep the original aspect ratio, as long as its bigger than 800x600, if not resize to a ratio just over that dimension? (I dont want to specify the original launch size, as i want to use this code globally across this type of popup on the site).
Thanks.
This is usually something you fix with a proper template/stylesheet.
Can you change the template so that it allows any aspect ratio?
Use margin: auto to center divs horizontally.
This should take away all window-size requirements.
When I open a popup window with large content in IE, the popup window comes with a scrollbar to fit the content. But when I maximize the page in that case it also remains the same. It is a page with frameset and frames. So is it possible the resize the frame?
Check the below link. its very useful your question
Resizing an iframe based on content
Here Frame Resize the depends upon the content. Then you can make it
window.onresize
The popup is shown wanted size. May be you feel complex to give particular size of window.
Try to make resize same time of frame resizing.
I Hope its helps to you
When you do a window.open() you can specify the size of the new window. well depending on a lot of things (like browser, toolbars, etc.) the viewport can vary in size.
For example if I have an image that is 500x400 in size, and I want to open a new window to show exactly that image with no access white space, and no need for scrolling. the window size will vary to make this always true.
So is there a way to specify the viewport size of a new window, instead of the window size?
Thanks!
You'll need to calculate the viewport size and tweak your window size accordingly.
Only the windowsize but you can calculate the viewport