Biomod/2012/OSU/OhioMOD: Difference between revisions
No edit summary |
No edit summary |
||
| Line 20: | Line 20: | ||
<script type"text/javascript"> | <script type"text/javascript"> | ||
$(document).ready(function () { | |||
$("body").queryLoader2({barColor: "#FFF",backgroundColor: "#000",percentage: true,barHeight: 1,completeAnimation: "grow",minimumTime: 100}); | $("body").queryLoader2({barColor: "#FFF",backgroundColor: "#000",percentage: true,barHeight: 1,completeAnimation: "grow",minimumTime: 100}); | ||
$("style").remove(); | $("style").remove(); | ||
| Line 31: | Line 32: | ||
$("#footer").remove(); | $("#footer").remove(); | ||
$(".printfooter").remove(); | $(".printfooter").remove(); | ||
var aboveHeight = $('header').outerHeight(); | |||
}); | |||
$(window).scroll(function(){ | |||
//if scrolled down more than the header's height | |||
if ($(window).scrollTop() > aboveHeight){ | |||
// if yes, add "fixed" class to the <nav> | |||
// add padding top to the #content (value is same as the height of the nav) | |||
$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px'); | |||
} else { | |||
// when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top | |||
$('nav').removeClass('fixed').next().css('padding-top','0'); | |||
} | |||
}); | |||
</script> | </script> | ||
Revision as of 09:38, 22 October 2012
<html> <head>
<link rel="stylesheet" href="http://dl.dropbox.com/s/y6lp9909xs10md7/flexslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/s/piaqef6ntvm0hnn/jquery.queryloader2.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/s/osh1gymcc7eyddv/jquery.pagescroller.lite.js"></script> <script src="http://dl.dropbox.com/s/3ej7jws4d4r4stu/jquery.flexslider-min.js"></script> <script src="http://dl.dropbox.com/s/ii3bdcd8mydr89k/jquery.flexslider.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/s/piaqef6ntvm0hnn/jquery.queryloader2.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
<script type"text/javascript"> $(document).ready(function () { $("body").queryLoader2({barColor: "#FFF",backgroundColor: "#000",percentage: true,barHeight: 1,completeAnimation: "grow",minimumTime: 100}); $("style").remove(); $('head').append('<link rel="stylesheet" href="/skins/monobook/shared.css?164" type="text/css" />'); $("#sidebar-main").remove(); $(".portlet").remove(); $("#contentSub").remove(); $("#jump-to-nav").remove(); $("#siteSub").remove(); $(".firstHeading").remove(); $("#footer").remove(); $(".printfooter").remove(); var aboveHeight = $('header').outerHeight(); });
$(window).scroll(function(){
//if scrolled down more than the header's height
if ($(window).scrollTop() > aboveHeight){
// if yes, add "fixed" class to the <nav> // add padding top to the #content (value is same as the height of the nav)
$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
// when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top
$('nav').removeClass('fixed').next().css('padding-top','0');
}
});
</script>
<style type="text/css">
body { margin: 0; font-family: arial, sans-serif; background: #FFF; } header { text-align:center; padding:0px 0 0 0; background-color:#fff; }
- wrapper {
position:relative; width:100%; background:#000; }
- main {
width:100%; margin: 0px; background-image:url(img/background_v2.svg); padding:0px; } .section { min-height: 600px; padding-top: 1px; /*background-image:url(img/background_v2.svg);*/ color:#fff; } /* NAVIGATION STYLES */ .standardNav ul { display: block; margin: 0; padding: 6px; list-style:none; padding-left:100px; /*-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;*/ background: #333; } .standardNav li { display: inline-block; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width:125px; } .standardNav li a { color:#9e9e9e; padding: 8px 10px; text-decoration: none; font-size: 14px; font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; } .standardNav li a:hover { color: #FFF; } .standardNav li.active a { color: #FFF; font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; } nav { font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; color:#9e9e9e; font-weight:bold; height: 60px; width: 100%; line-height:30px; position: relative; z-index:9999999; } nav p { padding: 0 70px; } nav a { font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; color:#9e9e9e; text-shadow: 0 0 0 transparent, 0 -1px 1px #333; }
- nav_biomod {
float:right; } h1 { color:#7f7f7f; font-size:20px; font-weight:normal; letter-spacing:2px; line-height:18px; padding-top:50px; text-align:center; text-transform:uppercase; font-family:"ff-din-web-condensed", sans-serif; font-style:normal; font-weight:400; } .fixed { position:fixed; }
- team_slider {
padding-top:50px; width:800px; } </style> </head>
<body> <header>
<center> <img id="frontvar" src="http://dl.dropbox.com/s/5ye82pz6sieqlzy/front_logo.jpg"/> </center> </header>
<div id="wrapper">
<nav>
<div id="nav" class="standardNav">
<ul>
<li><a href="#">#Background</a></li>
<li><a href="#">#Project</a></li>
<li><a href="#">#Methods</a></li>
<li><a href="#">#Results</a></li>
<li><a href="#">#Resources</a></li>
<li><a href="#">#The Team</a></li>
</ul>
<div id="nav_biomod"><img src="http://dl.dropbox.com/s/s986aya26k1bbiu/nav_footer.png"></div>
</div>
</nav>
<div id="main">
<div class="section">
<h1>Background</h1>
</div>
<div class="section">
<h1>Project</h1>
</div>
<div class="section">
<h1>Methods</h1>
</div>
<div class="section">
<h1>Results/Discussion</h1>
</div>
<div class="section">
<h1>Resources</h1>
</div>
<div class="section">
<h1>The Team</h1>
<center>
<div id="team_slider" role="team_slider">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li data-thumb="http://dl.dropbox.com/s/fpobpvxondszu99/theteam_nav.jpg"> <img src="http://dl.dropbox.com/s/3v3ra748y0px1sk/hjgj.jpg"></li>
<li data-thumb="http://dl.dropbox.com/s/c1lakz9038tctat/castro_nav.jpg"> <img src="http://dl.dropbox.com/s/dludspdi4kgt8m6/castro_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/wucsphgdkswuter/hudoba_nav.jpg"> <img src="http://dl.dropbox.com/s/kn6s88wtb7t9ex6/hudoba_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/qv2vpqo2fqzgchy/marras_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/z0fxjhc3qshb79r/autran_nav.jpg"> <img src="http://dl.dropbox.com/s/1ee9xvpinxxsh15/autran_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/3mxgbma3ytfm61s/bossart_nav.jpg"> <img src="http://dl.dropbox.com/s/lsty77hjlc5f19i/bossart_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/rto7gtk9cv97g3e/brockman_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/2ur94d8koicrnx0/crawford_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/dsdnsrxcubk08en/justus_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/pfckd5kuddq3xh9/lynch_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/wsvj1mxw1sc157c/marquart_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/s57dszk8rnoay1i/morales_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/xrnssm96cd7kd26/sohutskay_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
<li data-thumb="http://dl.dropbox.com/s/2xt1g8j6rk7uvxu/viznyuk_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
</ul>
</div>
</section>
</div>
</center>
</div>
</div>
</div>
<!-- [END] #main -->
</div>
<!-- [END] #wrapper --> </html>
