Develop Reference

Unable to make a smooth transition in background color when scroll event is triggered

I am trying to to create a fixed header for one of my projects using react. The background color of the Header should be transparent when the web page is opened but on scrolling it down, it should change its color to black. I have managed to make the transition smooth while changing the background color from transparent to black (when I scroll down) however, I am unable to make the transition smooth when the background color changes from black to transparent (when I scroll back up).
Here is my Code :
import React from 'react';
import Navbar from '../Navbar/Navbar.js';
import logo from '../images/nsut_logo.png';
class Header extends React.Component {
constructor() {
super();
this.state = {
header: false
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount(){
window.addEventListener("scroll", this.handleScroll);
}
handleScroll(event) {
if (window.pageYOffset > 0) {
this.setState({ header: true });
}
else{
this.setState({ header: false });
}
}
render() {
return (
<header onScroll={this.handleScroll}>
<div className={this.state.header ? "Header-Site-Title-Active" : "Header-Site-Title"}>
<img className = "Header-logo" src={logo} />
<div className="Department-Name">
<h1 >
<b>Department Of Computer Science And Engineering</b>
<br/>
</h1>
<h3>
Netaji Subhas University of Technology
</h3>
</div>
<Navbar />
</div>
</header>
);
}
}
export default Header;
Here is my CSS File:
header{
top: 0;
padding-bottom: 1%;
position: fixed;
z-index: 5;
height: 17vh;
}
#keyframes bgChangeDown {
0% {background-color: none;}
100% {background-color: black;}
}
#keyframes bgChangeUp {
0% {background-color: inherit;}
100% {background-color: none;}
}
.Handle-Site-Title {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeUp;
animation-duration: 2s;
animation-iteration-count: 1;
transition: ease-in 1.5s;
animation-fill-mode: forwards;
}
.Header-Site-Title-Active {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeDown;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition: ease-in 1.5s;
}
.Header-logo{
height:100px;
padding: 5px 10px 0 5px;
margin: 0;
display: inline;
float: left;
}
.Department-Name{
margin: 0;
margin-bottom: 5px;
height: 100px;
float: left;
display: inline;
color: white;
}
.Department-Name h3{
margin-bottom: 15px;
margin-top: -17px
}
.hamburger{
position: fixed;
cursor: pointer;
margin: 5px;
right: 5%;
top: 5%;
}
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav-active {
height: 100%; /* 100% Full-height */
width: 250px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a, .sidenav-active a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
I am still learning React so feel free to suggest a new approach as well.

The classes that you're applying in your React component are Header-Site-Title-Active and Header-Site-Title but in your CSS your bgChangeUp animation is assigned to the Handle-Site-Title class, not Header-Site-Title:
.Handle-Site-Title {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeUp;
animation-duration: 2s;
animation-iteration-count: 1;
transition: ease-in 1.5s;
animation-fill-mode: forwards;
}
.Header-Site-Title-Active {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeDown;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition: ease-in 1.5s;
}
Further to this, this effect may be more easily achieved using CSS transitions:
.Header-Site-Title {
...
background-color: transparent;
transition: background-color ease-in 1.5s;
...
}
.Header-Site-Title-Active {
...
background-color: rgba(0,0,0,black);
...
}

Jumping dots animation

So let's say I have three dots as spans inside a parent element.
I need to create a parent hover animation that will make the dots jump one by one with delay. I accomplished this without hover but I need the animation to work when I hover the parent element. At the moment when I hover the parent element no delay is applied to the children.
.dots-cont {
position: absolute;
right: 0px;
bottom: 0px;
}
.dot {
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>

You just need to add the animation property to .dot base instead of the :hover version. This way, you will get the same behavior no matter what. You can add any properties you want to the hover class, like changing the color.
.dots {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/5/
EDIT: To prevent animation on dot hover.
.dots-cont:hover > .dot {
animation: none;
}
https://jsfiddle.net/3gampq0b/6/
EDIT: Only animate on parent hover.
You can also add padding to the .dots-cont so the hover surface area is greater.
.dots-cont:hover > * {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/7/

By Using "animation: jump 1s infinite;" directly, you are overriding the animation-delay property for .dot elements.
Try Below snippet, see if this is what you are trying to do:
.dots-cont{
position: absolute;
left: 100px;
top: 100px;
}
.dot{
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation-name: jump;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
from {bottom: 0px}
to {bottom: 20px}
}
#-webkit-keyframes jump {
from {bottom: 0px}
to {bottom: 10px}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>

I changed
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
to
.anim .dot {...}
Then i add and remove anim class with jQuery.

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");

Pop out automatically disappear after some seconds

I found this on how to make a popout on click in Javascript, however I am trying to alter it a bit so when it's clicked on it should automatically disappear again after some seconds... But i can't get it to work, i tried to set the animation to
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
It dissapears but it still comes back again... why is that?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

I think you need to set the default state of .popup .show to opacity: 0 because after the animation runs it will return to the default state you define.
.popup .show {
opacity: 0; /* add this */
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Your fade in should be:
#keyframes fadeIn {
0% {opacity: 0;}
100%{opacity: 1;}
}
By setting it back to 0 at 100% like you do, it does a fadeIn / fadeOut animation
EDIT: Sorry I got the question wrong

Detect height change and adjust position of a div?

Is there a way you can code javascript to be able to detect the height of your browser and then move a div accordingly to the bottom of that browsers height?
Im wanting to get a footer to stay at the bottom of the page constantly as when I do this with CSS there tends to be a large space of nothing when heading to phone and tablet sizes.
Thanks in advance.
Edit:
Here is a fiddle. If you make the browser smaller you will see space beneath the footer http://jsfiddle.net/4RvWY/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<aside class="socialfade"> <img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</aside>
<!--close socialfade!-->
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<aside class="logofade">
<img src="images/logo.png" />
</aside>
<!--close logofade-->
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<aside class="menufade">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</aside>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
#charset"utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family:'Roboto', sans-serif;
color:#CCC;
}
a {
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper {
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header {
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333;
-webkit-box-shadow: 0px 10px 20px 0px #333;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo {
position: absolute;
min-width:60px;
top:4%;
}
.logo img {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social {
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img {
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu {
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li {
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a {
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt {
width:100%;
text-align: center;
background:#070707;
font-family:'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade {
animation: logofadein 3s;
-moz-animation: logofadein 3s;
/* Firefox */
-webkit-animation: logofadein 3s;
/* Safari and Chrome */
-o-animation: logofadein 3s;
/* Opera */
}
}
#keyframes logofadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes logofadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes logofadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes logofadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- menu Fader ----------------------------*/
.menufade {
opacity:0;
animation: menufadein forwards 3s 1s;
;
-moz-animation: menufadein forwards 3s 1s;
/* Firefox */
-webkit-animation: menufadein forwards 3s 1s;
/* Safari and Chrome */
-o-animation: menufadein forwards 3s 1s;
/* Opera */
}
}
#keyframes menufadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes menufadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes menufadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes menufadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- social Fader ----------------------------*/
.socialfade {
opacity:0;
animation: socialfadein forwards 3s 0.5s;
;
-moz-animation: socialfadein forwards 3s 0.5s;
/* Firefox */
-webkit-animation: socialfadein forwards 3s 0.5s;
/* Safari and Chrome */
-o-animation: socialfadein forwards 3s 0.5s;
/* Opera */
}
}
#keyframes socialfadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes socialfadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes socialfadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes socialfadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#charset"utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt {
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap {
margin-top:100px;
width:100%;
text-align: center;
/* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content:"";
display: table;
clear: both;
}
.infotxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block;
/* make it possible to use text-align */
width: 15%;
min-width: 180px;
/* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img {
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%;
/*bring back if needed*/
height: auto;
/*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2 {
position:absolute;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s;
/* Firefox */
-webkit-animation: fadein 5s;
/* Safari and Chrome */
-o-animation: fadein 5s;
/* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}

Here is the CSS table layout solution. Just add the below style into your stylesheet.
In table layout, by default table row/rows will auto expand to maximum height available of the entire table. And if we set all the containers to height:100%, that allows the bottom row to be always stay at the bottom of the page.
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.headerwrap, .toptxt, .detailwrap, .footerwrap2 {
display: table-row;
}
.detailwrap {
height: 100%; /*push other rows to their minimal height*/
}
Note, must remove .footerwrap2{position:absolute;} and relevant styles.
Updated - http://jsfiddle.net/4RvWY/17/

CSS should be sufficient here. Did you try position: absolute; bottom: 0px? (Dont forget to set position: relative; on parent element

The window.innerHeight property gives the available window height. That is, the space top to bottom, minus toolbars etc.
Then use element.style.top = innerHeight value to set the div to the appropriate position. Minus an amount from the innerHeight value to give some space from the bottom of the window.

If I've got your idea right this should help:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
width: 300px;
margin: 0 auto;
}
.content {
display: table-row;
height: 100%;
background-color: yellow;
}
.footer {
height: 50px;
background-color: red;
}
.header {
height: 50px;
background-color: lightblue;
}
JSFiddle - try to resize window.