3 replies [Last post]
DamnShaneIsThatU
DamnShaneIsThatU's picture
Offline
newbie
Last seen: 9 years 13 weeks ago
Timezone: GMT-5
Joined: 2011-05-03
Posts: 4
Points: 6

Hi all,

I've got most everything in place, but the trouble I've run into is getting each DIV (Landing Page, About, Reels and Contact) to be 100% height with an anchor so that it's centered vertically within the browser.

Can anyone provide any insight on how I might be able to achieve this?

Here's what it looks like currently- http://shaneermitano.com/jmp/

I've provided my code below. Thanks in advance!

-S

The HTML:

<!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>John-Michael Powell — Filmmaker — Los Angeles</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="jquery.js"></script>
        <script src="jquery_002.js" type="text/javascript"></script>
        <script src="jquery_003.js" type="text/javascript"></script>
<script type="text/javascript">
			$(document).ready(function () {
				$.localScroll.defaults.axis = 'y';
				$.localScroll();
			});
		</script>
</head>
<body>
	<div id="mainContainer">
 
		<div id="nameBkgrd"></div>
 
		<div id="divMenu">
			<ul id="menu">
				<li id="home1"><a href="#home"><span>Home</span></a></li>
				<li id="about1"><a href="#about"><span>About</span></a></li>
				<li id="reels1"><a href="#reels"><span>Reels</span></a></li>
				<li id="blog1"><a href="http://johnmichaelpowell.tumblr.com" target="_blank"><span>Blog</span></a></li>
				<li id="contact1"><a href="#contact"><span>Contact</span></a></li>
			</ul>
		</div>
 
		<div id="divFilmmaker">
			<a name="home" id="home" class="anchor"></a>
			<h2 class="headerHide">John-Michael Powell - Filmmaker</h2>
		</div>
 
		<div id="divAbout">
			<a name="about" id="about" class="anchor">
			<h2 class="headerHide">About JM</h2>
			<br /><br />
			<div id="divAboutCopy">
				<p>John-Michael Powell is an award winning editor from Los Angeles, California. He earned a B.S. in Radio-Television-Film from TCU, in Fort Worth, Texas. He spent two years as the lead Editor for National Banana, where he cut with Jerry Zucker (Airplane!, Ghost, First Knight) on the TV series Already in Progress as well as a series of PSAs featured on CNN called Attack at the Pump.'
					<br />
					<br />
					<br />
					In early 2009, John-Michael opened his own post-production house called Red Revolver Post at Santa Monica Studios. Recently he has cut the feature film Obselidia, winner of the Alfred P. Sloan Prize, the Excellence in Cinematography Award, and nominated for the Grand Jury Prize in the dramatic category at Sundance 2010.
					<br />
					<br />
					<br />
					John-Michael Powell is an award winning editor from Los Angeles, California. He earned a B.S. in Radio-Television-Film from TCU, in Fort Worth, Texas. He spent two years as the lead Editor for National Banana, where he cut with Jerry Zucker (Airplane!, Ghost, First Knight) on the TV series Already in Progress as well as a series of PSAs featured on CNN called Attack at the Pump.'
					<br />
					<br />
					<br />
					In early 2009, John-Michael opened his own post-production house called Red Revolver Post at Santa Monica Studios. Recently he has cut the feature film Obselidia, winner of the Alfred P. Sloan Prize, the Excellence in Cinematography Award, and nominated for the Grand Jury Prize in the dramatic category at Sundance 2010.
				</p>
			</div>
		</div>
 
		<div id="divReels">
			<a name="reels" id="reels" class="anchor"></a>
			<h2 class="headerHide">Reels</h2>
			<div id="divReelsCopy">
                	<div id="tubepress_embedded_object_1000916705">
					<center><iframe src="http://player.vimeo.com/video/18883798" width="600" height="338" frameborder="0"></iframe></center>
                    </div>
                    <a href="http://player.vimeo.com/video/18882888" id="tubepress_embedded_object_1000916705" rel="tubepress_vimeo_normal_1000916705">Clicking</a>
			</div>
		</div>
 
		<div id="divContact">
			<h2 class="headerHide">Contact JM</h2>
			<a name="contact" id="contact" class="anchor">
			<br /><br /><br /><br /><br />
			<div id="divContactCopy">
				<p>
					<i>e:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">john@johnmichaelpowell.com</a><br />
					<br />
					<i>p:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;818.203.6577<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://facebook.com/johnmichaelpowell" target="_blank">facebook</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/#!/JM_Powell" target="_blank">twitter</a><br />
					<br />
					<br />
					<br />
					<i>management:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dan defillipo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dave marken&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;patrick woods<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">dan@pipeline-talent.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a>
				</p>
			</div>
		</div>
 
	</div>
</body>
</html>

The CSS:

html {
	background: url(images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height:100%;
}
body {
	color:#666;
	font-size:13px;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin:0 auto;
	padding:0;
	height:100%;
}
a {
	color: #362f2d;
	/*padding: 0 5px;*/
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
}
a:visited {
	color: #362f2d;/*padding: 0 5px;*/
}
a:hover {
	color: 362f2d;/*padding: 0 5px;*/
}
h1 {
	width: 600px;
	border: none;
	padding: 35px 0 0 0;
}
h2 {
	font-size: 24px;
	font-family: verdana, helvetica, arial, sans-serif;
	color:#444444;
	font-weight: 400;
	padding: 0 0 10px;
}
h3 {
	font-size:14px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color:#362f2d;
	font-weight: 700;
	text-transform:uppercase;
	margin:0;
	padding:8px 0 8px 0;
}
p {
	color:#362f2d;
	font-size: 13px;
	line-height: 18px;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 0 0 10px;
	margin: 20px 0 10px 0;
}
img {
	border:none;
}
.clear {
	clear: both;
}
 
#menu {
	background: url(images/JMP-Filmmaker-Nav.png) no-repeat;
	width: 500px;
	height: 34px;
	margin: 25px auto;
	padding: 0;
	position: fixed;
	left: 0;
	right: 0;
	top:0;
	z-index: 500;
}
#menu span {
	display: none;
}
#menu li, #menu a {
	height: 34px;
	display: block;
}
#menu li {
	float: left;
	list-style: none;
	display: inline;
}
 
#home1 {
	width: 100px;
}
#about1 {
	width: 86px;
}
#reels1 {
	width: 97px;
}
#blog1 {
	width: 74px;
}
#contact1 {
	width: 143px;
}
#home1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) 0px -34px no-repeat;
	outline: none;
}
#about1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -100px -34px no-repeat;
	outline: none;
}
#reels1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -186px -34px no-repeat;
	outline: none;
}
#blog1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -283px -34px no-repeat;
	outline: none;
}
#contact1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -357px -34px no-repeat;
	outline: none;
}
 
/*******************************************************************************************************************/
#mainContainer{
	margin:0 auto;
	width:600px;
	/*border:solid 1px #ffffff;
	padding-bottom:20px;*/
	height:100%;
	/*border:solid 1px #ff0000;*/
}
#nameBkgrd {
	width: 918px;
	height:129px;
	top:40%;
	margin-left:-159px;
	position:fixed;
	padding: 0;
	background: url('images/name.png') no-repeat center center;
	/*border:solid 1px #ff0000;*/
}
#divFilmmaker {
	width: 600px;
	height:100%;
	min-height:442px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Landing.png) no-repeat center top;
	margin: 0 auto;
	margin-top:70px;	/*border:solid 1px #ff0000;*/
}
#divAbout {
	width: 600px;
	height:100%;
	min-height:433px;	/*css file for IE6 should have height:433px instead */
	background:url(images/JPM-Filmmaker-About.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ff0000;*/
}
#divAboutCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divReels {
	width: 600px;
	height:100%;
	min-height:482px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Reels.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ff0000;*/
}
#divReelsCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divBlog {
	width: 600px;
	height:100%;
	min-height:433px;	/*css file for IE6 should have height:433px instead*/
	background:url(images/JPM-Filmmaker-Blog.png) no-repeat center top;
	margin: 0 auto;
	/*margin-top:100px;*/
	/*border:solid 1px #ffabf0;*/
}
#divBlogCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divContact {
	width: 600px;
	height:100%;
	min-height:442px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Contact.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ffde00;*/
}
#divContactCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff9000;*/
}
.anchor{
	padding-top:70px;
}
.headerHide  {
	position:absolute;
	left:-4000px;
}

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 9 years 13 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Try this...

Nice website.

You should give your paragraph tags (p) a margin-bottom of the distance you'd like rather than using a lot of break tags (br).

But, now to your problem, Smile.

I've not tried this on a scrolling website such as yours, but what I am providing you with works (as you will see if you copy and paste the given HTML as an example) and should require only minimal modification to fit into your scrolling script. The code below is the XHTML of my test page with the jQuery code you need (which will need to be placed in your scrolling script as a callback on the click's scrolling function, similar to what is below).

I will provide you with test XHTML so you can see how it works and determine where the jQuery within should fit into your scrolling script.

<!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>
    <title>Vertical centering test | Vashin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript">
        var paragraphCount = 0;
 
        $(function () {
            $("ul#menu li a").click(function () {
                var getWindowHeight = $(window).height();
                var idealHeight = getWindowHeight / 2;
                var thisID = $(this).attr("id");
 
                $("p", $("#div" + thisID)).each(function () {
                    paragraphCount++;
                });
 
                if (idealHeight > $("#div" + thisID).height()) {
                    $("#div" + thisID).css({ "marginTop": idealHeight - ($("#div" + thisID).height() / 2) });
                } else {
                    $("#div" + thisID).css({ "marginTop": idealHeight / paragraphCount });
                }
            });
        });
    </script>
    <style type="text/css">
        #divabout {
            margin-top: 2200px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li><a href="#" id="about">About (click this link)</a></li>
    </ul>
    <div id="divabout">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero ullamcorper
            mauris mollis tincidunt. Suspendisse vel lacinia eros. Sed vulputate adipiscing
            neque, ut sodales leo condimentum et. Vestibulum ante ipsum primis in faucibus orci
            luctus et ultrices posuere cubilia Curae; Duis non ante purus, eu iaculis tellus.
            Praesent metus felis, consequat vel suscipit in, tincidunt nec lectus. In in quam
            a mi gravida sodales non id felis. Phasellus adipiscing tellus vel lacus pretium
            in tristique ante elementum. In ultrices ante quis purus ultricies dapibus vitae
            eget enim. Nam sagittis, libero at interdum scelerisque, justo justo ultricies leo,
            sed interdum augue massa ac dolor. Sed facilisis libero sit amet mi fermentum et
            commodo nulla consequat. Sed posuere urna ac tortor condimentum scelerisque.
        </p>
    </div>
</body>
</html>

The jQuery code in the provided HTML gets the height of your browser window (active area), what our ideal height is (which is the center, a.k.a the center of the window so we divide it by 2), the ID of the link clicked and then applies a margin-top to override what is set in the CSS by default with the new value on the div with an ID of the link, which in the example is divabout.

It is currently scripted taking paragraphs into account and so will likely only work for your About page thus far, I will review it tomorrow when I get back from work.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

DamnShaneIsThatU
DamnShaneIsThatU's picture
Offline
newbie
Last seen: 9 years 13 weeks ago
Timezone: GMT-5
Joined: 2011-05-03
Posts: 4
Points: 6

Wow, this was super helpful!

Wow, this was super helpful! Going to test it right now.

Thank you so much, Vashin.

DamnShaneIsThatU
DamnShaneIsThatU's picture
Offline
newbie
Last seen: 9 years 13 weeks ago
Timezone: GMT-5
Joined: 2011-05-03
Posts: 4
Points: 6

Testing

So I was just testing the example XHTML you provided and am getting a little mixed up with the behavior I'm getting. When I add a new div and appropriate link, the same result isn't achieved. This all leaves me a little confused as to where to insert the tweaked javascript. I apologize for my lack of coding knowledge! I'm usually just designing. Smile