Develop Reference

Responsive height of slider div

I have a problem with swiper slider and I need your help.
Here is my code: http://jsfiddle.net/2Xt7H/4
I want the comm_image_div div which is the slider div to take the height of the image and not to be fixed (200px) as it is in my example.
I prefer to do this with css, but if this isn't possible then the alternative is javascript.

Try using display: inline-block; and delete the height: 200px; in #comm_image_div
Using display: inline-block; will change the div's height and width(if they are not specified) according to its content.
UPDATE:
I used height: 100%; in #comm_image_div and img.comm_image_big
http://jsfiddle.net/2Xt7H/7/

CSS to span column height to window height?

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.

You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.

I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.

Make external div grows/shrinks when internal div grows/shrinks but keeping a margin between them

The issue that I'm trying to solve:
I have a external div which contains a div.
<div class="external">
<div class="internal">
content
</div>
</div>
The margin between the internal and external div should always be the same.
When the internal div grows/shrinks, the external div will modify its height & width to keep the specified margin with the internal div. Somehow the internal div is controlling the width & height of both divs. When the internal div grows the external div grows too to keep the margin. When the internal div shrinks the external does too to keep the margin.
Anyone? Thanks for reading.

It's a CSS thing by default:
#internal {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
#external {
display: inline-block;
padding: 10px;
background-color: #000;
}
Or you could animate the whole thing like this:
$("#internal").animate({width: "300px", height: "500px"}, {duration: 1000, step: function (now,PlainObject) {
// PlainObject.prop is either 'width' or 'height'
$("#external")[PlainObject.prop](PlainObject.now + 10);
}});
I assumed that the shrinking and growing happens when the inner div is animated? Or do you mean when the content of the inner div is larger / smaller (more/less text in the inner div)?
The inline-block property is just meant for a CSS-only solution. If you go for a dynamic javascript solution, you should set it to display: block;

I'm not sure what's your problem? Could you maybe provide some more detailed code/css? If you're trying following code you will see that the external div will grow/shrink, when you make any size changes on the inner div and the margin: 10px is kept in between.
// jQuery snippet tested in my browser's console:
$(document.body).append($('<div id="external">').append($('<div id="internal">').css({margin: '10px', backgroundColor: '#f00', height: '100px', width: '100px', display: 'inline-block'})).css({backgroundColor: '#000'}));
//resize:
$('#internal').height(200);
$('#internal').width(200);

You should use some padding on your external div without setting a fixed width or height. Let
Something like this: .external { padding: 20px; } You can also set max-width to the outer div if you need it.

Loading page full width and height of screen (or window) with jQuery?

I don't know if this is possible and I already tried searching for a solution, however no luck at all.
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?

I would possibly solve it like this: try demo
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.

Try something like this -> http://jsfiddle.net/3wU6C/5

try to define an element - or append it via js - as first node in the body, e.g.
<div id="load">Please wait</div>
with this style
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when load or DomReady events occur

Auto height on element with only relatively positioned children

As you can see here you need to apply a static height to #wrapper because else the div won't contain its children. (here is the fiddle) This is quite logical. I would want, however, that I can give #wrapper an auto height by which it can contain multiple rows of relatively positioned elements.
I suppose I could add an other wrapper around the individual items and position them staticly? But I would prefer to not add more HTML. If needed a JS/jQuery solution is possible.

There is an float is your child DIV's so you have to clear it's parent & remove height from it. write like this:
#wrapper {
background-color: white;
min-height: 360px;
margin: 50px auto;
overflow: hidden;
padding: 10px;
width: 1008px;
}
Check this http://jsfiddle.net/y5nYN/16/