Full height window on load and scroll when window resizes - javascript

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.

Related

How to open a window with window.open that fits its contents?

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.

Icon And texts stay the same size on mobile focus in

I am developing a widget for mobile web - that contains several elements, like images icons and texts.
I am looking for a way to assure all stay in the same size when screen is in focus.
is there a way to tell have 20px icon have the same relative size on every zoom in?
You could use window.onresize, recalculate the target elements dimensions when the window dimensions change
JavaScript window resize event

Horizontally Scrolling Responsive Website

Does anyone know if it is possible to create a website that scrolls across five panels horizontally yet still remains responsive? I can make it work for a specific viewport size by creating an outer div that contains a div with the five different screens extended across. I use javascript to set the max-width of the viewport div and the width of each section, but if the browser is resized, or the device orientation is changed, it doesn't 'respond', you would have to reload the page. Does anyone have any insight on this?
You can adjust the resizing function on window resize instead of on load...
this is assumed to be placed in the window load event, however you choose to set that. ($(document).ready() for example)
function resize(){
//do whatever you do on resize here
}
//set the listener and call the function initially
$(window).on('resize', resize);
resize();

Javascript resize window to original aspect ratio

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.

how to drive a div's position with a browser scrollbar (as shown in Paranorman website)

I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.

Categories