We Keep Coding

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); }

Set Child width maximum of Screen width having absolute position

I have 3 drop down menus with dynamic width and position like these
I want to make each drop down width to maximum of Screen width starting from the current position leaving 10px from right side like this.
The drop down list is positioned absolute to its parent container. I want to make a single css class and apply the each drop down list so it can act like the above one which can have maximum of screen width subtracting 10px from it.
By searching SO, I found many questions but could not get it work in my problem. I don't want to do anything with Javascript but with pure CSS only.
Many of SO Questions suggest using vw unit of css but I don't understand how to use vw in this problem. Any help from you experts will be really appreciated. Thanks.
Some suggest this but does not work
width:100vw;
margin-left:100%;
transform: translate(-50vw);
Because above could is good if I want to make drop down in center of screen but here the situation is starting from parent position. I have tried replacing it with margin-right and tried as much I could but no use.

i don't think this can be made with a single class, you should be using a single class for each menu item.
You can first set a fixed width to top menu item, something like 100px. So each item next will be 100px further from the left side of the page.
Now you have to make a calculation of 100% of the viewport with 100vw, and then subtract the pixels from the previous items, if the item menu has 2 items before then it will be 200 pixels.
This substraction can be made with calc like this: width: calc(100vw - 200px);
The result with this technique would be something like this:
`
Here is an example: https://jsfiddle.net/52jab0t9/
I hope this help you, excuse me by my bad english :)
PD: I took the code for the menu from here: http://www.cssscript.com/demo/simple-clean-pure-css3-dropdown-menu/

How to make a repsonsive design so H2 get its maximum font size in a 1-line DIV?

How do I make a headline, H2, to fit into the current width of a DIV.
I want the H2 to get the maximum font size, displaying its full context (without using overflow to cut or hide its content), while not breaking into a second line within the DIV.

There's a few ways - some more complex than others. There's a few JavaScript plugins that can handle this which might serve you best.
A simple but effective CSS-only way would be to use the viewport width (vw) as the value for font-size. Here's an example using white-space: nowrap in conjunction: https://jsfiddle.net/6tueLheq/
HTML:
<h2>
Hello there i don't break to the next line no matter what the width!
</h2>
CSS:
h2 {
white-space: nowrap;
font-size: 3vw;
}
NOTE - this way is not perfect by any means - I'd suggest using something like FitText: http://fittextjs.com/, which is quite powerful.
More info on viewport units: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Js Way :
You can use Javascript based plugins like FitTextJs http://fittextjs.com/. This plugin allows you to have headings that can resize based on the current device width.
CSS Way:
You can provide the font size using vw units. This will scale the font size based on current viewport size.
E.g., 1vw will direct the browser to use the font size as 1% of current viewport width.
But please check if your targeted browsers support this unit before Implementation.
Custom implementation :
I have used following way to design fluid websites, that should align and appear identical in all possible screen resolutions.
If the font size at 320 px is 12px, then the mobile font multiplication factor will be
320px has font size as 12px
Then what should be the font size at 480px
The calculation will be
X = ( 12 * 480) / 320;
Once the font size is dynamically calculated, you can set the font size to body tag and set font sizes for dependent elements in %.
e.g.,
h2 { font-size:110%;}
This method is fun to implement.
But there will be a slight delay before the new calculated font size to be applied on window resize or orientation changes

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.

jQuery or math to subtract pixels off div's using a percentage for width - jSfiddle

http://jsfiddle.net/motocomdigital/7fyvn/1/
Hello, this is a question I'm really struggling to find an answer for.
It may not be necessarily jQuery, it my be a simple bit of css.
I have created jSfiddle here so you can experiment for yourself.
My circumstance is that I have a variable width container, called div#container in fiddle.
And inside this container, I have 2 columns. The column widths are determined by percentage.
Currently I have the left width at 65% and right at 35%, using additional .left & .right classes.
I would have the same problem even if I was using width: 50% on my .column class.
My problem, is that I need a 10px margin between my 2 columns. Currently my column widths add up to a total of 100%, to fill the entire white box.
If I add 10px padding-right to my left column. Then the layout breaks, and the same happens with adding margin-right.
My question is, how can I subtract 5px from each of the column widths using jQuery or javascript? Whilst still keeping the percentage for my widths?
Is this possible in some way or am I dreaming. Is it possible with javascript math? I can envisage it, but I can't think where to start, or what method is the safest and lightest.
It will be used on phone browsers, so when the orientation flips from landscape to portrait, the javascript subtraction needs to stay true whilst allowing the percentage widths to adjust.
Hope this makes sense, don't hesitate to ask me for more info.
UPDATE SOLUTION
See solved fiddle here just using css and an extra div... http://jsfiddle.net/7fyvn/4/
You can adjust the window size and gutter always stays the same, -20px off the left column. See classes .new-div and .text-padding

One possible way would be to add:
$(document).ready(function () { /* standard jQuery document ready */
$("div.white-box").each(function(){ /* not optimal, but allowing for each white box to be a different width on the page */
var width = $(this).width(), /* get the width of the white-box */
left = $(this).find("div.left"), /* find the left column */
right = $(this).find("div.right"); /* find the right column */
left.width((width - 10) * 0.65).css('padding-right','10px'); /* set the left column to 65% of total minus 10 pixels and then pad those pixels back on to provide spacing */
right.width((width - 10) * 0.35); /* set the right column to 35% of what is left after taking 10 pixels away from the total */
});
});