I’m creating a parallax website (using an older standard of jQuery to perform the sliding animation from the nav bar) and I’m having an issue setting the first “slide” to be max height regardless of resolution.
Here’s my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Heritage Holdings</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname &&
this.hash.replace(/#/, '')) {
var $targetId = $(this.hash),
$targetAnchor = $('[name=' + this.hash.slice(1) + ']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$("#nav li a").removeClass("active");
$(this).addClass("active");
$("html, body").animate({
scrollTop: targetOffset
}, 1000);
return false;
})
}
}
});
});
</script>
</head>
<body>
<!-- Begin Header -->
<header id="header">
<div class="content">
<div id="logo">
<a>Heritage Holdings</a>
</div>
<nav id="nav">
<ul>
<li><a href="#home" class="active" title="Home">Home</a></li>
<li><a href="#properties" title="Properties">Properties</a></li>
<li><a href="#partners" title="Partners">Partners</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- End Header -->
<!-- Begin Slides/Pages -->
<!-- Home Page -->
<div id="home">
<div class="content">
<div id="heritage"></div>
<div id="texas1"></div>
<div id="texas2"></div>
<h2>Heritage</h2>
<h1>Holdings</h1>
</div>
<div>
<!-- End Home Page -->
<!-- Properties Page -->
<div id="properties">
<div class="content">
<p>This is the properties page.</p>
</div>
</div>
<!-- End Properties Page -->
<!-- Partners Page -->
<div id="partners">
<div class="content">
<p>Partners go here!</p>
</div>
</div>
<!-- End Partners Page -->
<!-- Contact Page -->
<div id="contact">
<div id="content">
<p>Contact form goes here</p>
</div>
</div>
<!-- End Contact Page -->
<!-- End Slides/Page -->
</body>
</html>
And here is my CSS:
body {
background-color:gray;
margin:0;
padding:0;
width:100%;
font-family:tahoma;
}
h1 {
font-family:tahoma;
font-weight:normal;
text-align:center;
font-size:55px;
color:#fff;
margin:0;
padding:0;
}
h2 {
font-family:tahoma;
font-weight:normal;
font-size:40px;
text-align:center;
color:#fff;
margin:0;
padding:0;
}
.center {
margin:0 auto;
}
.content {
margin:0 auto;
width:960px;
}
.clear {
clear:both;
}
#header {
width:100%;
background: url(images/header.png);
height:80px;
position:fixed;
margin-top:30px;
}
#nav{
width:410px;
float:right;
margin-top:20px;
}
#logo a {
color:#fff;
text-decoration:none;
font-family:open sans condensed, sans-serif;
float:left;
font-size:30px;
margin-top:20px;
font-weight:bold;
}
#nav ul {
list-style:none;
display:block;
margin:0 auto;
}
#nav li {
margin-top:9px;
float:left;
padding-left:21px;
}
#nav li a {
color:#fff;
opacity:0.6;
text-decoration:none;
}
#nav li a.active {
color:#fff;
opacity:1;
border-bottom: 2px solid #fff;
}
#nav li a:hover {
color:red;
opacity:1;
}
#heritage {
background:url(images/hh-logo1.gif) no-repeat height:50px width:50px;
margin:0 auto;
position:relative;
}
#texas1 {
background:url(images/texas.gif) no-repeat;
width:50px;
height:50px;
margin:0 auto;
display:block;
position:relative;
bottom:-102px;
left:-103px;
}
#texas2 {
background:url(images/texas.gif) no-repeat;
width:50px;
height:50px;
margin:0 auto;
display:block;
position:relative;
bottom:-54px;
right:-102px;
}
/* Pages */
#home, #properties, #partners, #contact {
width:100%;
}
#home {
background:url(images/lot.jpg) 50% 0 no-repeat fixed;
color:#fff;
min-height:100%;
margin:0;
padding:200px 0 260px 0;
background-size:cover;
}
#properties {
background-color:#fff;
color:#333;
height:300px;
margin:0 auto;
overflow:hidden;
padding:200px 0;
}
#partners {
background:url(images/nebula.jpg) 50% 0 no-repeat fixed;
color:#fff;
height:600px;
padding:170px 0 0 0;
background-size:cover;
}
#contact {
background-color:#333;
min-height:600px;
height:100%;
padding:200px 0;
}
