We Keep Coding

Proportional Scaling with CSS and JavaScript

I am trying to make a webpage that resizes based on the size of the window and the code below seems to be the solution.
var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );
Could Somebody Tell me why this works and what exactly are we doing with this?
Plz refer this for More Info.

The code you posted is taking the percentage ratio between the width of a certain component and the width of the whole page and the height of the same component with the height of the whole page, but it only gets the smaller proportion between the two calculated to consider whether the page is in landscape or portrait layout.
Apparently this number resulting from this line you posted is to be used for you to be able to calculate the value you want to get given the change in the default screen you used to draw. Assuming the canvas you are drawing the default layout on is 1024px by 768px, we would do it like this:
var scale = Math.min(
availableWidth / /*1024px*/
contentWidth, /*500px => (100 / 2048) = 48.82% of available height */
availableHeight / /*768px/*
contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/
);
In this case your line would bring 19.02%, because the Math.min method brings the smallest of the array. So you would use the height of this object as a reference to determine its width too, in order to try to maintain the aspect ratio of the page. But the ideal thing, in my opinion, is that you learn to deal with flex layout, maybe even with bootstrap, to build responsive grids with less work, since the CSS will scale for you according to the screen size natively , without the need for calculations.
;D

I think this code is trying calculate the scale proportion that it should adjust the content based on the different window.size.
For example, you design the website at the window of size 1600* 960px , but some of the content could not fully showed when you go to a window at 300*200, so you need to have a proportion to scale to make the content could be shown in the right style
The availableHeight and availableWidth is the size of the window.
The contentWidth and contentHeight is the size of a specific content (div in the doc)
You divide the size of window to the size of content and get the smaller one of them using Math.min() will make sure you use the most space of the window, but won't make the content oversize or doesn't follow the effect you want.

Trying to achieve some kind of scrollable container with dynamic height

I have <div> with some dynamic content inside - sometimes it is table, sometimes it is text. I'm trying to setup some kind of container which would be scrollable on y-axis if its contents are too big for the screen.
Some googling suggests that its simple to do if you hardcode height of the div, but what should I do if I want to avoid specifying exact pixel sizes anywhere?
From what I understand, I'll have to calculate remaining vertical visible screen space first, then set it as div height. This seems like a fairly common task, yet I can't find any components(don't care if they are jquery dependent or not) that would accomplish this.
Any suggestions? Already existing solution(plugin, library, etc) is preferred.

If you would like the container height to start scrolling when it matches the viewport height, you can just give it height or max-height equal to 100vh (100% viewport height).
In case there are other elements outside of the container and it shouldn't take the full screen height you can use calc() to limit it:
.container { max-height: calc(100vh - 100px); }

getViewportHeight() resulting in only a piece of the viewport

I have the following code fragment in Javascript:
slider.viewport.height(getViewportHeight())
It resizes the height of a slider. I would like to resize to stay with 100px unless in bottom. I've tried using something like:
slider.viewport.height(getViewportHeight()-100px);
But it doesn't work.
What I need is that the slider to resize and occupies only a fixed height of the viewport with a spare in the bottom.

If the getViewportHeight() works.. then you just have to remove the px measures. After the math operation is completed, you add it.
slider.viewport.height((getViewportHeight()-100) + 'px');
In case your getViewportHeight() doesn't work, here you have some good ways to get your viewport height: Get the browser viewport dimensions with JavaScript

Javascript mobile - calculate element dimensions in pixels based on screen dimensions

I want to calculate the dimensions of certain elements (img, ul, div, etc.) based on screen size. I can't to use percent values. I need pixel values. I also don't want to 'hardcode' everything using media queries and a new set of images for every resolution or screen size.
I thought about making this using screen size. I only need width calculation. So I add the initial width of my images and some initial space between them -> total width, and I then get scaling factor using: screenwidth / totalwidth
Now I scale all of my images and also the space between with this factor.
It's a very simple layout, only a few images and HTML elements. So this scaling should not be expensive.
It would work if the devices gave me reliable width measure for the screen. But depending of the device, I get a different meaning of this value. I'm using screen.width
In some cases screen.width is what the currently width is - in portrait it's a small value, in landscape a large one. But in other ones, width is always the same - the value which is defined as device's width.
So how do I scale my layout according to what's currently screen width in a consistent way with rotation, and without CSS % values? Is this an acceptable way to do layout scaling or am doing no-go?
Edit: I have to add more details after trying Jasper's solution. The images are used in a slider. The slider is basically an UL and each LI contains an image with float:left - so all the images are appended horizontally one after the other. With overflow hidden and stuff only the current slide is visible. Now, the official width of the UL is the sum of the width of all contained LIs. And this means, at least with my current state of knowledge, that I can't use percentage size for the LI elements, because if I did, this will be % of this total width of the UL, which is very large, and I end with immense LI elements/images.
Isn't there any reliable way to get current screen width for all devices ? I already have working code, I only need that the value of screen width is correct.
New update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011 "One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....

This is most likely accomplish-able with CSS alone (which is usually good for performance):
img {
width : 100%;
height : auto;
}
That will keep all the image's aspect ratios but re-size them to 100% width. Now that width is set based on the image's parent element(s) width. If you are using jQuery Mobile then the data-role="content" elements have a 15px padding, so to remove that you can just add a container to the image elements that removes the padding:
HTML --
<div class="remove-page-margins">
<img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
</div>
CSS --
.remove-page-margins {
margin : 0 -15px;
}​
And walaa, you've got responsive images without loads of code or overhead.
Here is a demo using a container and not using a container: http://jsfiddle.net/EVF4w/

Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.

Scrollable div show content outside of window?

I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )

You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.

The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)

OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!