We Keep Coding

Full height window on load and scroll when window resizes

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.

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.

Making jQuery Popbox visible outside of its parent

Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.

I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip

Popup window to always appear fixed to top edge BUT scrolls with entire page if content larger than screen height?

Let me try and make sense. I have a search page that returns lots of search results just like Google. Each of those search results have a trigger (via an icon using onmouseover) to access more info in a popup window that pops up to the right of all the search results, just like google. Here is what I want from the popup window:
No matter if I am looking at the first search result at the top of the page, or the last search result way down at the bottom of the page, I want the popup window to align itself with the top edge of the screen, regardless of where I am vertically on the page (similar to fixed)
BUT, if the popup window happens to contain more data then the vertical screen height allows, instead of the popup window creating scrollbars internally, I want the popup window to scroll right along with everything else on the page (similar to absolute)
The problem is that fixed chops off data that goes below the bottom of the visible browser window height making it inaccesible without internal scrollbars. With absolute, the popup scrolls along with all the other stuff on the page which is great and what I want, but it always appears at the very top of the page, even when I am at the bottom of the page, making it invisible to the user if the results list is very long.
Its like I am trying to combine the two methods in a way. So to summarize:
When I trigger a popup via onmouseover, the popup window should affix itself to top edge always no matter where I am vertically, but if its content is vertically taller than the screen allows, I should be able to scroll the entire page down to see the rest of it. I should not have to use internal scrollbars within the popup window like fixed.
Is this possible and how should I go about it? Thanks!

You're going to need JavaScript.
First, make set the popup divs to position: absolute. This will act like fixed in that it can go anywhere on the page easily through left and top, but it still scrolls with the page.
On link hover, make the JS detect the browser's scroll position (through window.offsetY or $(window).scrollTop() in jQuery). Apply this offset to the popup:
$('.link').on('click', function () {
$('.preview').css('top', $(window).scrollTop());
});
Remember also to tweak the other CSS properties of the popup to suit your needs - however, most of that can be done in CSS; the only JS you really need is for the top property.
Fiddle: http://jsfiddle.net/GWvNx/

Position a modal window

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.