Trying to achieve some kind of scrollable container with dynamic height - javascript

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

Related

Keep the all the elements at the same place

I'm wondering because I am coding through multiple screen sizes and making a game that requires event.pageX and smaller screen sizes mean squishing everything as well as bigger screen sizes that push everything outwards. Is there a way to keep everything all positioned into one place so if you change screen sizes it is still positioned the same?
There are few css tricks that can helps you with your problem:
You can define body width and height, that will prevent window changes on resize, for example:
body {
width: 800px
height: 800px
}
Avoid using percents in element position defenition
Css position : absolute can make your element behave independently from other elements. position : fixed allows you ignore even user scroll if you need this. (more info)
small jsfiddle with some examples:
https://jsfiddle.net/qc3p2d5h/2/

How do I take the scrollbar into account with viewport width units?

I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:
Link to example
In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.
How can I fix that problem?
I have made an example: Link
In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.
The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:
position:absolute;
right:0;
width:4vw;
In this manner, the arrow always is fixed to right.
The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.
I dont know if you understand what I want to make.
BR.

How to automatically set the div container adaptively towards the content length?

I want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.

Set CSS aspect ratio to the inverse of width?

I'm having trouble with a CSS layout - the key part is that I'd like a box to grow in height as its width decreases.
Now, I've started with the 'fixed aspect ratio' technique on an element - where you set the height to 0, and the padding-top to a percentage, say 50%. The padding value is calculated as 50% of the width of the parent element (not the height, as you might guess), so what you end up with is a box with a fixed 2:1 aspect ratio, but otherwise is fluid in size.
The next step (in my half-baked solution) is to modify the padding percentage so it increases as the width decreases (the width is 100% of the page). I'm pretty sure this can't happen in straight CSS, and I'm happy with a small piece of Javascript to update the value when the window is resized.
Can anyone help me with the formula to adjust that percentage inversely to the width?
A few other notes:
The element is a 'spacer' - it will be invisible, so if it takes two elements, etc. that's OK.
The whole layout is fluid and responsive from 2500+ px wide down to 320px, so there's no 'max value' we can use (I don't think).
Thanks in advance.
Perhaps the jQuery .resize() function might be of assistance? it binds a function to whenever the element (or window) is resized.
For example, if you wanted the area of an element #el to always be 50,000 pixels-squared
$(window).resize(function() {
area = 50000;
width = $('#el').width();
$('#el').height(Math.ceil(area/width));
});
Working Example: http://jsfiddle.net/asifrc/T8HrW/embedded/result/
Example Code: http://jsfiddle.net/asifrc/T8HrW/
jQuery .resize() Documentation: http://api.jquery.com/resize/
Let me know if this is what you were looking for :)

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.

Categories