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.
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.
On my website, some pictures are pretty long (width varies between 400 and 1000px while height >= 3500px). I want to set same width (800px) for all pictures in Lightbox and then scroll down to view them, but don't know how. Where and what exactly should I change in the lightbox.css or lightbox.js?
Problem solved
My Lightbox version is v2.9.0 by Lokesh Dhakar. I solved the problem by commenting out the image fitting part in the lightbox.js. Specifically, in lightbox.js, comment out lines 276-281 and 290-321. This operation will prevent an image from resizing to fit the window and will allow users to scroll down to view a picture if the picture's height exceeds the height of the window.
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.
Part 1: (maybe solved, see part 2)
Using meta viewport width=devicewidth locks you to a fixed page width.
I instead want the users' zoom to control font size, but always adjust the pagewidth to
fit in the zoomed viewport width. When you resize a browser window on desktop, it actually
does this (reflows your paragraphs to the changed width).
But default on tablets/mobiles, is that you pan around a fixed page-width.
Background: On mobile/tablets, I want to fit the contents/paragraphs to the user's viewport, so he doesn't have to 'pan around' the view. But I still want zoom to be useful: I just want it to scale the text. The default behaviour, where zooming to increase font size, also forces you to continously 'pan' left and right to read every paragraph, in my belief is useless. Though I now appear to have achieved it by adapting viewport-content-width continously, by my lack of experience I'm not sure if I've 'just achieved a kludge'.
Part 2: I've figured out a sort of solution myself. So.. are there better/more robust ways to do this/cross-platform?
I added this javascript event listener, to just update the viewport width dynamically, on window resize, and set viewport to same width as 'window.innerWidth':
(it assumes you set id 'theviewport' on your meta viewport tag.)
window.addEventListener( "resize", function(e) {
var mv = document.getElementById('theviewport');
mv.setAttribute('content','width='+window.innerWidth);
});
but is this a reasonable way?
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