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
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.
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.
We built a broadcast player that pops-up with the window.open script:
onclick="window.open('Media-player.html','player','scrollbars=0,width=360,height=655')"
The problem is, when someone zooms into the the player (or the parent frame for that matter) the pop-up window does not resize with it and the player overlaps within the window and some parts become hidden.
Is there any way to resize the window to fit it's contents when users zoom in? Would like to avoid enabling the scroll bars or just making the dimensions bigger. Thanks.
There is no way to know if a user has zoomed the browser, but there are some tricks to try to detect it.
See this thread: Catch browser's "zoom" event in JavaScript
I have a web page with a long list of products. Next to each product there is a link to view details about the product. The details are displayed in a modal window.
The goal is to get the same behavior you can experience when looking at pictures on facebook:
the modal window is displayed on ~50px from the top
if the modal window height is greater than the viewport height than the user can scroll down (the scroll bar is now working toward the modal window NOT the page which is in the background)
when the modal window is closed the user is at the same position in the list of products as it was before it opened the modal window.
I am almost there, expect for the last requirement. The way I have implemented this is by simply opening the modal window with JS and then use:
var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top', winH+"px");
to position the modal window.
Feel free to suggest a better approach.
Thanks for any help.
The solution turns out to be more complex than I thought:
create the modal window inside a div that has the same width and height as the body element
store the scroll offset before showing the modal window
show the modal window with JS (note that the modal window div now cover the all viewport)
with JS set the scroll css value of the body element to hidden (this will remove the scroll bars from the page)
set the overflow value of the element that contains the modal window to scroll (this can be done in the css file), this will now create scroll bars if the model window is bigger than the viewport
ENJOY your awesome modal window and scroller!
once the window is closed reset the scroll offsets using JS
Isaac Schlueter over at FooHack.com has put together a great example of a CSS Modal Dialog Box that exactly fits your requirements:
http://foohack.com/2007/11/css-modal-dialog-that-works-right/
From the article:
Interaction with the contents of the parent window should be impossible until the modal is dealt with. Scroll-mouse should not scroll the background page, clicking should not click the background page, tabbing should not get you there, etc.
When you dismiss the modal, the parent window should be exactly how you left it.
The parent window should be dimmed, or there should be some other indicator that it is currently not available for interaction. This has the corollary effect of making the modal “pop” a bit more.
In a web page, a modal should be constrained within the viewport. Opening a new window just to show a dialog box is ugly as a bucket of slugs.
The modal should be placed consistently. If it is not movable, then it should be centered vertically and horizontally. This positioning should be consistent if the parent window is resized or moved.
The modal should be smaller than the parent window. If the viewport is resized smaller than the modal, then scrollbars should appear that allow the user to see the rest of the modal.
If the page's scroll bar is being altered because of user's scrolling on the modal window, you can save the page scroll position while opening the modal bar and than on closing the modal window you can set the page scroll position to the position you have saved.