Scrollable div show content outside of window? - javascript

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!

Related

How to get the new size of a dynamically sized div?

I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps

Write text to the bottom of the page depending on window size

Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.

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 :)

Set initial height of div based on how much space is left inside of parent div

I have 3 divs:
.main_content, .content_top, .content_bottom
.main_content is set to 100% but 100% is not the size of the browser window, it's inside the middle of my page.
.content_top is set at 60% height.
I want to set the height of .content_bottom to the rest of the space available inside .main_content via javascript.
For example, if .main_content was 800px high, and .content_top was 600px high, I want to set .content_bottom to 200px.
This is a simplified example, my situation is not as easy as specifying 40% or leaving the browser to decide. For one, there's currently 46px of padding on .content_top. I'm doing a split screen like interface between .content_top and .content_bottom dragging a bar to resize both. This is mostly working, just having trouble with the bottom portion. Being able to set .content_bottom to a specific height(i.e. 198px) would solve all of my current problems. Happy to elaborate on this example, as well as dig into some actual code, but was hoping there was an easy method for calculating this and was having trouble finding a good example that worked cross-browser, thanks!
Assuming you're using vanilla JavaScript (and not a library), I'd suggest:
​var cBs = ​document.getElementsByClassName('content_bottom');
for (var i=0,len=cBs.length; i<len; i++){
var p = cBs[i].parentNode;
cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px';
}​​​​​​​​​​
JS Fiddle demo.
Simple jQuery solution:
$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());

Categories