We Keep Coding

Can't get height of div to adjust

I'm in a pickle.
I'm working on a layout, and I need the main div to adjust to the window size, mainly to get that middle div to make a scrollbar upon resizing. It's acting as a table cell currently, which is why it's forcing itself to simply become taller instead of using a scrollbar. It's in a containing div in the efforts to keep from doing this though.
<div id="ALL">
<div id="VOLTRON">
<div id="MAINSIDEBAR">ok</div>
<div id="CONTENT">
<div id="TICKER">please</div>
<div class="WRAP">
<div id="POSTSGOHERE">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div id="RIGHTSIDEBAR">WELL THEN.</div>
</div>
</div>
</div>
</div>
I resorted to Jquery, and though I found a code for this very thing, it's not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
});
});
</script>
I've tried setting a max height, I've tried setting it to vh instead of percent, I've tried containing it, and I feel like I've exhausted a pretty decent amount of time on this conundrum myself to finally get help.
Here is the entire code, in case that also helps. I'm certain that the way I'm doing this is the reason it's not working.
So, any idea for a fix for this? And why what I'm trying isn't working?
EDIT: I need to specify this again: I want the entire "table" to only fit the window, but the purple div is the one that should scroll. The problem is, though I've set it to overflow-y: scroll; it just changes the size of the entire container. The entire table just grows past the window to compensate for the overflow.

Your code looks good, you just don't see it as it takes the exact size of the window. You would see it better if you subtracted a little off of it and added the overflow-y:scroll to #ALL instead of the container:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
overflow-y: scroll;
}
$(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
});
});
HERE IS A DEMO
EDITED: Following your edit, and I know this would threw off your layout completely, but the only thing that worked for me, if you wanted the purple one to move only, was to remove the table-cell display and set the height to the container instead of ALL, and adding the scroll only to that:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
}
#POSTSGOHERE {
background-color: purple;
max-height: inherit;
overflow-y: scroll;
}
$(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
});
});
I updated the demo

Keep the max-height and set
overflow:scroll;
This should do the trick.
PS: Also try adding it to the Wrap class.

You think to display the #all div as an iframe style in fullscreen?
like here:
You can check it here
You were just missed one line of CSS.
#all
overflow: scroll
SASS syntax
NOTE: pls use small letter div selectors dont use capital ones, thanks ;)

This might work better
Place the window height in a var
so the div can read it, and rewrite the var when the user resizes
$(document).ready(function(e) {
var heightt = $(window).height();
$('#ALL').css('height',heightt);
$(window).resize(function(){
var heightt = $(window).height();
$('#ALL').css('height',heightt);
});
});

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

Many draggable images freely in the screen

I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?
I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.
In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.
Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr
Thanks!

Well, I just made this up, it's kinda buggy, but you can play around with it.
<html>
<head>
<style>
#mydiv{
width: 100px;
height: 100px;
border: solid black 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
<script>
var mousedown = false;
function ismousedown(tf){
if(tf == 1){
mousedown = true;
}
else{
mousedown = false;
}
}
function mousemove(event){
if(mousedown){
document.getElementById("mydiv").style.left=event.pageX;
document.getElementById("mydiv").style.top=event.pageY;
}
}
</script>
</body>

You can use kineticjs for this. Check this!
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
This is more relevant,
http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs

Click link, div slides out, linked div slides in, click to close and reload first div

I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.

EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.

Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}