We Keep Coding

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

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

HTML div with absolute position tries to wrap the text. Can I avoid it, without using white space

I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.

Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/

If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit

Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.

I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas

Keeping height of div static with an ajax call that inserts html

I have an Ajax call that inserts a div with several p elements with text. The problem is whenever I click the button to make the Ajax get, the height of the whole container will change because I haven't set a static height (I have set a specific width though) for the container in my css stylesheet.
Whenever I click the button to load the Ajax info, there will be a brief instant where you can see the container gets really small because I'm just replacing the text in the container with other text. Is there a simple css solution for this?

You could consider using the CSS min-height property, which would prevent the container from shrinking to a size too short (http://www.w3schools.com/cssref/pr_dim_min-height.asp). For instance,
#myContainer {
min-height: 600px;
}

Use
min-height:400px;//Whatever height you want it to not get smaller than
height:400px;//Whatever height you want the div to be
so that it doesn't gets small and use
overflow:auto;
so that it doesn't get big instead becomes scrollable when more content received than expected. Using overflow:auto will only show the scrollbars when the content overflows. i.e, when needed.
In case you want the scrollbars no matter what use
overflow:scroll;//Scrollbars will appear by default, even if not needed.

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!