We Keep Coding

Margin issue with jquery load()

I am loading html page inside a div with jquery. It does work fine.
var loginBtn = $("#loginBtn");
var loginPage = $("#login");
var submitBtn = $("#submitBtn");
var submitPage = $("#submit");
var checkBtn = $("#checkBtn");
var checkPage = $("#check");
loginPage.load( "login.html" );
submitPage.load( "submitPoints.html" );
checkPage.load( "checkPoints.html" );
body {
margin: 0 !important;
padding: 0 !important;
background-color: white;
}
#mainFrame {
width: 100%;
height: 300px;
background-color:cadetblue;
padding-top: 0;
margin-top: 0px;
position: relative;
}
<div id="mainFrame">
<div id="login"></div>
<div id="check"></div>
<div id="submit"></div>
</div>
My issue is that if the loaded html has no content, the margin between the parent document body (white) and the top of the loaded html (green) is none (that's what I want, it's ok).
However as soon as I add content to the loaded html, a gap is generated at the top of the page :\
I thought it was all about setting some line-height prop in the css but it seems helpless.
Any ideas what I am doing wrong ?

What you are seeing is the top margin of the first piece of content overflowing its container (also known more commonly as margin collapsing):
body {
background:yellow;
}
#container {
background:green;
height:300px;
}
<div id="container">
<h1>I have a top margin of 1em by default that is overflowing into the body.</h1>
</div>
If you give your container element a padding of that same amount, the margin space of the body won't be used and the element will be pushed down in the green area.
body {
background:yellow;
}
#container {
background:green;
height:300px;
padding:1em;
}
<div id="container">
<h1>I have a top margin of 1em by default that is now contained within my parent.</h1>
</div>
Or, you could set the top margin of the first piece of content to zero:
body {
background:yellow;
}
#container {
background:green;
height:300px;
}
#container > h1:first-child { margin-top:0; }
<div id="container">
<h1>My top margin has been set to zero.</h1>
</div>
Finally, you could set the overflow of the content area to auto but (although this seems to be the popular answer), I don't prefer this approach as you run the risk of unintended fitting of the content as the content changes and/or the container size changes. You give up a bit of sizing control:
body {
background:yellow;
}
#container {
background:green;
height:300px;
overflow:auto;
}
<div id="container">
<h1>The content area has had its overflow set to auto.</h1>
</div>

When you load new content it gets rendered in the document and those new elements might have properties. In this case, most probably the Login has a margin value. Another option is that it has a class or some selector that is being picked up by a CSS file which appends the margin to it.
Easiet way would be to right-click on the Login element, choose inspect, and analyze the style of the element with web-dev / style.

If you want to keep the margin on the inner content, you should set an overflow. Look what happens when we remove the overflow: auto line from .content > div (try clicking the box after running the code sample below).
This is because of margin collapsing. The margin on the inner content is combined with the margin on the outer element and applied on the outer element, i.e. two margins of the two elements are collapsed into a single margin.
document.querySelector('.content').addEventListener('click', (e) => {
e.target.classList.toggle('overflow');
});
html,
body {
margin: 0;
padding: 0;
}
.outer {
width: 200px;
background: red;
}
.content > div {
width: 100%;
height: 300px;
background: cadetblue;
cursor: pointer;
}
.content > div.overflow {
overflow: auto;
}
.test {
margin: 10px;
display: block;
}
<div class="outer">
<div class="content">
<div><span class="test">Test</span></div>
</div>
</div>

Make Div fixed bottom & scrollable

I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.

From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/

First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.

Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}

You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.

Slide content in from the left, overlay existing content and push across sidebar

I'm currently building a responsive site and i need to have a hidden div which will slide in from the left after clicking a button in the the left side bar. Once this button has been pressed the side bar will be pushed across from the sliding content (Sliding from the left) and overlay the existing content or push across the content in the right hand side.
This is where the problem lies as it's a responsive site. I would like the sidebar in the 'siteInnerLeft' div to be pushed to the right hand side of the page when the new div slides in. So after the content has sliden in the previous content is no longer visible until the sliding content has slid back out.
Here is a my JSFiddle - http://jsfiddle.net/76xvB/2/
Hopefuly you can see what i'm trying to acheive. I've manaed to get it working until a point but the issue I have is the content sliding in is fixed and I don't want it to be fixed as there is more content to view and this removes the users ability to scroll.
I understand that 'position fixed' takes the element out of the document flow. So is this going to stop me acheiving what I want? If so, is there another way of doing it.
NOTE: The real site will have percentages not pixels because of it being responsive, this is a broken down version.
My current code:
HTML
<div id="siteWrapper">
<div id="siteInnerLeft">
<div id="homeNavLink">
<p>Click me</p>
</div>
</div>
<div id="siteInnerRight">
<div class="pushmenu-push">
<p>Current page content</p>
</div>
<div class="pushmenu pushmenu-left">
<p>Content to slide in from the left</p>
</div>
<div id="footer">
<p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
</div>
</div>
</div>
CSS
#siteWrapper{
max-width:500px;
margin:0 auto;
width:100%;
}
#siteInnerLeft{
background-color:green;
width:100px;
float:left;
position:fixed; /* Sidebar that needs to be fixed*/
}
#siteInnerRight{
width: 400px;
background-color:yellow;
float:left;
margin-left: 100px; /*Compensates for fixed header width */
}
.pushmenu {
background: #e9e8e0;
font-family: georgia,times news roman, times, serif;
position: fixed;
width:400px;
height: 100%;
top: 0;
z-index: 1000;
}
.pushmenu-push{
left: 0;
overflow-x: hidden;
position: relative;
width: 100%;
}
.pushmenu-left{
left:-400px;
}
.pushmenu-left.pushmenu-open {
left: 0px;
/* box-shadow: 5px 5px 5px #d9d8d0;*/
}
.pushmenu, .pushmenu-push {
transition: all 0.3s ease 0s;
}
#footer{
width:100%;
clear:both;
background-color:red;
}
jQuery
$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
Any suggestions would be most appreciated.
Thanks.

On completion of the transition, change the position of the sidebar so that it is not longer fixed. The answer on the following link breaks it down pretty well and has quality references:
Callback when CSS3 transition finishes

If the side-bar is fixed, you could create a scroll-bar inside for the content, so the text can be viewable; you could do this by adding overflow-y: auto; in the .pushmenucss class.
Another way would be to set the sidebar as position: absolute; and then dynamically change the top property from javascript when the user hits the sidebar's bottom.

expanding a div to reveal overflow on click

I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:
<div class="product-description">
<div class="desc-wrap" itemprop="description">
<p>Material: wool
<br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
<br>Size: One size only
<br>Recommended for size SMALL
<br>It has been noted by customers that these skirts are short.
<br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
</p>
<p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
<p>WORLDWIDE SHIPPING!
</p>
</div>
<div class="desc-fade"></div>
<div class="open-link" style="display: block;">Expand Full Description</div>
</div>
I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?

Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/
css:
.product-description {
height:150px;
overflow: hidden;
position:relative;
}
.product-description.open {
height:auto;
overflow: hidden;
position:relative;
}
.desc-fade {
width: 200%;
margin-left: -50%;
height: 30px;
background: #fff;
z-index: 1;
position: absolute;
-webkit-box-shadow: 0 0 20px 30px #fff;
-moz-box-shadow: 0 0 20px 30px #fff;
box-shadow: 0 0 20px 30px #fff;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 250ms, 1s;
-moz-transition: opacity 250ms, 1s;
-o-transition: opacity 250ms, 1s;
transition: opacity 250ms, 1s;
}
.open-link {
position:absolute;
bottom: 15px;
z-index:2;
}
jquery:
$(function () {
var wrapHeight = $(".product-description .desc-wrap").height();
var descHeight = $(".product-description").height();
if (wrapHeight <= descHeight) {
$(".product-description .desc-fade").hide();
$(".product-description .open-link").hide();
}
$(".product-description .open-link").click(function () {
$(this).hide();
$(".product-description .desc-fade").hide();
$(".product-description").animate({
height: wrapHeight
}, 1000);
});
});

Does this works for you?
JSFIDDLE Demo
HTML
<div class="div-wrapper">
<div class="hider">
<p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
</div>
Show all
</div>
CSS
/* this first one is not necesary */
.div-wrapper {
width:300px;
border:solid 1px #000;
}
.div-wrapper>.hider {
height: 100px;
transition: ease-in-out all 0.2s;
overflow:hidden;
}
JQUERY
$(document).ready(function(e) {
$('.open-link').click(function(e) {
var $wrapper = $(this).parent().find('.hider');
$wrapper.css('height',$wrapper.find('p').height());
$(this).remove();
})
});
let me know if it's useful.

Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.
However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start
http://jsfiddle.net/2SMF2/2/
$('.expand').click(function () {
$('#test').removeClass('collapsed', 'fast')
$(this).remove();
});

How about this:
http://jsfiddle.net/VvBRh/
What I have done:
$('.open-link a').click(function(){
if($(".desc-wrap").css("height") == "60px") {
//Find auto height of div and save it
$('.desc-wrap').css('height', 'auto');
var autoHeight = $('.desc-wrap').height();
//Revert back to 2 lines
$('.desc-wrap').css('height', '60px');
//Animate to the saved autoHeight
$(".desc-wrap").animate({height: autoHeight}, 1000);
} else {
//Shrink back to 2 lines (you can remove this if you want)
$(".desc-wrap").animate({height: "60px"}, 1000);
}
return false;
});
You will also need to add a little css to get inital settings:
.desc-wrap { height: 60px; overflow: hidden }
I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)

Here is the complete code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 110)? innerHeight : "110px")
}, 500);
return false;
});
});
</script>
<style>
.view{
overflow:hidden;
height: 110px;
}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>

Fully cover an overflow div with another div

This is a hard one to explain so bear with me (or just skip straight to the jsfiddle)
I have a Div with a max-height defined and overlow-x set to scroll. Within this Div there are a bunch of list items (in this instance, addresses). Naturally there can be many of these and they can overflow, which works fine. What I want is a 'cover' div that indicates that this panel is disabled. I have done this by putting an absolutely positioned div within the main div, like so.
<div style="max-height:150px;overflow:auto;position:relative">
<ul>
<li>Church Walk, Access To Foxholes Farm, DT2 9HG
</li>
<li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
</li>
<li>Little Bride, Access To Foxholes Farm, DT2 9HG
</li>
...etc
</ul>
<div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
This then appears when the user does something, overlaying the content and making it appear disabled. Great! The problem occurs when my list items overflow. When the overlay div appears it only covers the current visible portion of the parent div, meaning that if I scroll down the div it appears 'uncovered' as the cover div only spans the height of the parent, not including its overflow.
This is really hard to explain so please go to my jsfiddle and click one of the addresses. You'll see that the div gets covered. If you then scroll down that div you will see that the items at the bottom of the list are uncovered.
This also works in reverse so if you click the 'Hide the overlay div' button to get rid of the cover and then click one of the addresses at the bottom of the list, you'll see that the 'cover' still only covers the top part of the div.
Any ideas on how you go about making that cover div extend the entire height of its parent, including the overflow? Other alternative solutions are welcomed and encouraged. Bear in mind that I don't necessarily need the 'Searching' text that gets overlaid on top, just the 'cover' would be enough.

3 divs instead of 2 works well:
http://jsfiddle.net/JhGCn/2/
html:
<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
<div id="insideDiv">
<ul ...
</ul>
<div id="overlayDiv" style="display:none;">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
</div>
css:
#insideDiv {
width: 100%;
height: 100%;
position: relative;
}
#overlayDiv {
background-color: white;
position: absolute;
top: 0px;
opacity: 0.8;
height: 100%;
width: 100%;
}

this works fine too:
http://jsfiddle.net/JhGCn/3/
var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
height += $(this).height();
$('#overlayDiv').css("height", height + "px");
etc..

I would take the overlay out of the parent, set a z-index and position it over the address picker with negative margin.
http://jsfiddle.net/JhGCn/1/
#overlayDiv{
background-color: white;
opacity: 0.8;
height: 100%;
width:100%;
position:absolute;
z-index:9999;
margin-top:-150px;
height:150px;
}

This a pattern I've seen before as well: http://jsfiddle.net/6oa6grn9/
#overlayDiv {
background-color: white;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}