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
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 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.
As the title says, is it possible to position an image in the center of the screen rather than the center of the browser?
This means if your browser wasn't open full screen (lets assume the browser is only using 3/4 of your screen), the image would not appear in the middle of the browser window, but rather in the middle of your actual screen. This means the image might be positioned near the right edge of your browser window.
Thank you.
You can get the screen resolution and measure image position depending on this. Look to this
How to detect the screen resolution with JavaScript?
You cannot position anything outside of the viewport unless you open a new window. If your question is referring strictly to an image element only. The answer is No. Anything positioned outside of the browser viewport will cause horizontal scrolling inside the viewport.
On desktop, you can however open a popup window in the middle of the screen the size of your image, with your image in it.
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.
I'm looking for a way to resize the whole window of my webpage to fit the window size.
So, kind of this (look at the background image). But for the whole page?
And I'm not talking about keeping the font the same size, or the images. I'm really talking about resizing everything in the screen. So even the images would resize.