Develop Reference

Why is there a large gap formed beneath my div element when I display it using a JS toggle()?

I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.

You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.

change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.

I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});

problems positioning a jquery.draggable() div for printing with #media print

I have a web application that has a draggable div I need to print when the user selects print from the web browser.
The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for #media print like so:
#media print {
body * {
visibility: hidden;
}
#plotArea, #plotArea * {
visibility: visible;
}
#plotArea {
/* this positioning ignores .draggable() divs */
position: absolute;
left: 0;
top: 0;
}
}
However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css
//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});
/* css */
#plotArea {
background-color: #FFFFFF;
width: 42em;
height: 54.5em;
float:left;
font-size: 12pt;
overflow:hidden;
}

So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?
What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.
For example;
#media print {
#plotArea {
left: auto !important;
top: auto !important;
}
}

Full Screen Map Beneath NavBar

I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:

You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}

You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.

How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?

I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.
The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.
This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.
Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.

I suppose I'll post this, since it seems to work:
div#header-div {
height: 90px;
background-color: lime;
margin: 0;
}
div#fixed-div {
position: fixed;
left: 0;
top: 0; /* <<< No offset */
bottom: 0; /* <<< Pull to the bottom for height */
margin: 120px 0 0; /* <<< Give it the 120px top */
width: 260px;
background-color: silver;
overflow-y: scroll;
}
http://jsbin.com/iqibew/13/

if you want your div to be sized as you like , i have an option for you
//Add this to <head> section , i thought you haven't one in the sample
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
function _resizeTDiv()
{
var p = $("#header-div");
var position = p.position();
var realheight = p.position().top+p.height();
$("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
_resizeTDiv();
//Resize our div on window resize?
$(window).resize(function() {
_resizeTDiv();
});
});
</script>

stick footer at the bottom of the page

please see this site in firefox:
http://www.imageworkz.asia/microtel
the footer does not stick at the bottom of the page like how it is with stackoverflow's footer. I tried several techniques as shown in some reference sites but still, no luck.
I need some css experts out there to help me out with this. Thank you!

There are mare ways to make sticky footers. A basic trick for a footer with fixed height
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 150px; /* .push must be the same height as .footer */
}
or
you can check this post (and many others) with the title "sticky footer"

add position:fixed; bottom:0; left:0 to footer and it will fix it in place. If you then add #container {padding-bottom:120px} (or something around that amount) your content won't be hidden by the footer when viewing the bottom of the page

Make it fixed position with bottom 0 value:
footer {
position: fixed;
bottom: 0;
}

<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>