We Keep Coding

HTML block element overflowing its parent

I'm encountering a weird (maybe not) behaviour that I want to avoid because the end result is a horrible user experience. To help you understand the problem I put together the code snippet below.
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 11;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:800px;
display:none;
margin: 100px 100px 0 100px;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>
The code snippet is pretty simple, all the javascript does is to display a child element (#daddyLongLegs) after ten seconds. Make the "problem" more visual colored the parent element (div.container-element) different to the child element.
Problem
Now, when the child element (#daddyLongLegs) is displayed after 10 seconds, it doesn't seem to "stretch" the parent element (div.container-element). This is not the behaviour I'd like to achieve. I would like the parent element to re-adjust its height when its contents change. However, it is important that the height of the parent element ALWAYS cover the whole document
Question
How can I make the parent readjust its height once the content has changed? Is there a pure css solution to this?

.container-element has a defined height of 100%
If you remove that, or set it to auto, it should calculate the height based on its content.
Or you could change from height to min-height, which would calculate the height based on its content, but no shorter than 100% of its parent's height.

As described on MDN, you can use min-height attribute instead of height so whenever your <div>'s child rises, it will extend parent as well
so from my comment:
use min-height: 100% instead of height: 100% on your
.page-wrapper

Change height to 100% and margin to 0;
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 5;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:100%;
display:none;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>

Overlay Displaying Before Button Is pressed

I have a Web Page that contains a button which toggles the function toggleOverlay which displays an overlay, as well as can close the overlay. The overlay is a div. Inside the div, I have nested an iFrame which references another local html file I have and displays it. However, the only way I could make it so that the iFrame would display the local html file was if in the CSS I took out the attribute display:none. But the function depends on that attribute to determine wether the overlay is displayed or not. How can I get around this, because as of currently the overlay div is displayed when the page is first loaded.
Currently
The Overlay is Displayed when the page first loads
display:none has been taken out of the css to allow the iFrame to actually display the local html file
Goals
Make it so that the iframe continues to be able to display the local html file
modify the function so that the overlay does not show up when the page is first loaded but rather when the button is pressed.
HTML
<div id="specialBox">
<iframe src="SlideOne.html" width="100%" height="100%"></iframe>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
CSS
div#specialBox {
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
Javascript
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}

DIV cover/overlap other element

I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.

You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!

Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}

Is there a javascript to check if another script has been activated?

I have been building a pop out menu for a website with HTML and Javascript, and I've managed to get a button to create a pop out div container with a button inside that closes it. Eventually there will be more buttons and all kinds of things, but I'm keeping it simple for now. Let me say that Javascript is not my strong suit. The problem I am having now that I've got all the buttons working properly and hiding the div, is that while the div disapears when I push the "close" button, the elements within it do not. I'm hoping I can make an if else script that will either hide or remove the elements within the pop out div when the "menu" button (which causes the pop out div to appear) is activated. To even start figuring out that, I'll need a script that can detect if the script that runs when the menu button is pushed is active. My apologies if I'm explaining this poorly, but the relevant code is pasted in below, hopefully that will help. Is there a script that can detect if another script is running that can then activate an if else script? As a bonus, does anyone have any ideas about a script that can hide (or remove) elements conditionally? Both together would be lovely :)
Here is the code:
HTML and Javascript-
<div>
<script>
function sidebar() {
x = document.getElementById("sbb")
x.style.width = "0";
x.style.position = "relative";
x = document.getElementById("sba")
x.style.width = "200px";
x.style.top = "0px";
x.style.bottom = "0px";
x.style.position = "absolute";
}
</script>
<script>
function closesb() {
x = document.getElementById("sba")
x.style.width = "0";
x.style.position = "relative";
}
</script>
<div style="width:100%; height:100; z-index:3">
<button type="button" onclick="sidebar()">MENU</button>
</div>
<div class="sidebar">
<div class="sba" id="sba">
<button type="button" onclick="closesb()">CLOSE</button>yellow</div>
<div class="sbb" id="sbb">yellow</div>
</div>
</div>
CSS-
.sidebar{
position: absolute;
z-index: 2;
margin: 0;
padding: 0;
border: 0;
}
.sba{
width:200px;
top:0px;
bottom:0px;
background-color:#787878;
opacity:.75;
position:absolute;
height:10em;
}
.sbb{
top:0px;
bottom:0px;
right:0px;
width:100%;
margin-left:200px;
height:100%;
position:absolute;
}
NOTE:
1- the word "yellow" in divs "sba" and "sbb" is just to determine the location of the divs on the page, as the pop out menu is done in layers.
2- the button scripts are the only scripts running on the page, and the whole website.
3- I am only interested in answers in Javascript and HTML, and that work on all browsers, or nearly all, right now, please.

http://jsfiddle.net/jpEqt/1/
function sidebar() {
x = document.getElementById("sba")
x.style.display = "block";
}
function closesb() {
x = document.getElementById("sba");
x.style.display = "none";
}
<div class="sba" id="sba" style="display:none">

Vertically centering child div in parent container with JavaScript on page load is not setting position?

I am using JavaScript to vertically center a child div within a fluid container. I essentially accomplish this by calculating the height of the parent container and the height of the child div. I then absolutely positon the child div in the center of the parent div based on the height. The issue I am experiencing is that when the page loads, it does not set the position of the child div. I created a function out of this and call it when the window is resized so that when the viewport changes it recalculates dynamically. How would I go about initially setting this position on page load?
<div class="lead">
<div class="message"></div>
</div>
var homepageLead = function () {
var lead = $('.lead'),
message = $('.message'),
lead_height = lead.height(),
message_height = message.height(),
lead_center = .5 * lead_height,
message_center = .5 * message_height,
center = (lead_center - message_center);
message.css('bottom',center);
}
homepageLead();
$(window).resize(function () {
homepageLead();
});

Try this fiddle: http://jsfiddle.net/nRRn6/
used css:
html, body {
height:100%;
}
.lead {
width:100%;
height:100%;
background:red;
position:relative;
}
.message {
width:120px;
height:200px;
background:yellow;
position:absolute; /* <---required*/
left:0; /* <---required*/
bottom:0; /* <---required*/
}
used html:
<div class="lead">
<div class="message"></div>
</div>
used jQuery:
var homepageLead = function () {
var lead = $('.lead'),
message = $('.message'),
lead_height = lead.height(),
message_height = message.height(),
lead_center = .5 * lead_height,
message_center = .5 * message_height,
center = (lead_center - message_center);
return message.css('bottom', center);
};
$(function () {
$(window).resize(function () {
homepageLead();
}).resize();
});