Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{:Team:Cornell/sandbox/header}}
 +
<html>
<head>
<head>
-
<title> Parallax Test </title>
 
-
<meta name="Description" content="2014 Parallax Down" />
 
-
<meta name="Keywords" content="hi this is going to be awesome" />
 
-
 
-
<style type="text/css">
 
-
/* -----------------------------------------
 
-
Table of Contents
 
-
-----------------------------------------
 
-
:: iGEM Reset
 
-
:: Basic Styles
 
-
:: Parallax
 
-
*/
 
-
 
-
/* -----------------------------------------
 
-
iGEM Reset
 
-
----------------------------------------- */
 
-
#globalWrapper {
 
-
background-color: transparent;
 
-
border: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
width: 100%;
 
-
height: 100%;
 
-
}
 
-
#content {
 
-
background-color: transparent;
 
-
border: none;
 
-
padding: 0;
 
-
margin: 0;
 
-
width: 100%;
 
-
overflow: visible;
 
-
height: 100%;
 
-
line-height: inherit;
 
-
color: rgb(70, 70, 70);
 
-
}
 
-
#bodyContent {
 
-
border: none;
 
-
padding: 0px;
 
-
margin: 0px;
 
-
width: 100%;
 
-
height: 100%;
 
-
}
 
-
#top-section {
 
-
height: 15px;
 
-
margin: 0px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
margin-bottom: 0 !important;
 
-
padding: 0;
 
-
border: none;
 
-
font-size: 10px;
 
-
}
 
-
#p-logo {
 
-
height: 1px;
 
-
overflow: hidden;
 
-
display: none;
 
-
}
 
-
#search-controls {
 
-
overflow: hidden;
 
-
display: block;
 
-
background: none;
 
-
position: absolute;
 
-
top: 100px;
 
-
right: 40px;
 
-
}
 
-
#menubar.left-menu {
 
-
/* margin-top: -80px; uncomment this when page goes live */
 
-
background: none;
 
-
height: 20px;
 
-
left: 20px;
 
-
float: left;
 
-
}
 
-
.left-menu ul {
 
-
visibility: hidden;
 
-
}
 
-
.left-menu:hover ul {
 
-
visibility: visible;
 
-
}
 
-
.left-menu:hover ul li a {
 
-
color: #666;
 
-
}
 
-
.left-menu li a:hover {
 
-
color: #aaaaff !important;
 
-
text-decoration: underline;
 
-
}
 
-
#menubar.right-menu {
 
-
display: block;
 
-
width: 300px;
 
-
float: left;
 
-
margin-top: 2px;
 
-
margin-right: 0px;
 
-
border: none;
 
-
}
 
-
.right-menu ul {
 
-
width: 300px;
 
-
margin: 0px;
 
-
visibility: hidden;
 
-
}
 
-
.right-menu ul li a {
 
-
background: none;
 
-
color: #666;
 
-
}
 
-
.right-menu:hover ul {
 
-
visibility: visible;
 
-
}
 
-
#footer-box {
 
-
width: 100%;
 
-
margin: -10px auto 0 auto;
 
-
padding: 20px 0;
 
-
display: none; /* uncomment when page goes live */
 
-
}
 
-
.visualClear {
 
-
display: none;
 
-
}
 
-
#footer {
 
-
border: none;
 
-
width: 965px;
 
-
margin: 0 auto;
 
-
padding: 0;
 
-
}
 
-
.firstHeading {
 
-
display: none;
 
-
}
 
-
#f-list a {
 
-
color: #333;
 
-
font-size: 10px;
 
-
}
 
-
#f-list a:hover {
 
-
color: #666;
 
-
}
 
-
.printfooter {
 
-
display: none;
 
-
}
 
-
#footer ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
#footer ul li {
 
-
margin-top: 0;
 
-
margin-bottom: 0;
 
-
margin-left: 10px;
 
-
margin-right: 10px;
 
-
padding: 0;
 
-
}
 
-
#search-controls {
 
-
display: none;
 
-
}
 
-
h3#siteSub {
 
-
display: none;
 
-
}
 
-
#contentSub {
 
-
display: none;
 
-
}
 
-
p:first-child {
 
-
display: none;
 
-
}
 
-
#catlinks {
 
-
display: none;
 
-
}
 
-
#footer-box {
 
-
width: 977px;
 
-
margin-bottom: 20px;
 
-
}
 
-
 
-
/* -----------------------------------------
 
-
Basic Styles
 
-
----------------------------------------- */
 
-
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 
-
 
-
html { font-size: 62.5%; height: 100%;}
 
-
 
-
body {
 
-
background: #f2f2f2;
 
-
font-family: 'Droid Sans', Helvetica, sans-serif;
 
-
font-size: 20px;
 
-
line-height: 23px;
 
-
-webkit-font-smoothing: antialiased;
 
-
height: 100%;
 
-
overflow: hidden;
 
-
}
 
-
 
-
.navbar {
 
-
width: 100%;
 
-
height: 100px;
 
-
background-color: rgb(236, 236, 236);
 
-
text-align: center;
 
-
}
 
-
 
-
.head {
 
-
display: inline-block;
 
-
padding: 0 10px;
 
-
color: rgb(70, 70, 70);
 
-
}
 
-
 
-
.nav {
 
-
display: inline-block;
 
-
height: 90px;
 
-
width: 20%;
 
-
margin-top: 5px;
 
-
border-radius: 3px;
 
-
background-color: rgb(168, 168, 168);
 
-
text-align: center;
 
-
vertical-align: middle;
 
-
line-height: 75px;
 
-
color: rgb(70, 70, 70);
 
-
}
 
-
 
-
.nav img{
 
-
position: absolute;
 
-
height: 110%;
 
-
margin-top: -2%;
 
-
width: 9%;
 
-
}
 
-
 
-
.nav:hover > img{
 
-
transform: scale(1, 1.5);
 
-
-ms-transform: scale(1.5, 1.5); /* IE 9 */
 
-
-webkit-transform: scale(1.2, 1.2); /* Safari and Chrome */
 
-
-o-transform: scale(1.5, 1.5); /* Opera */
 
-
-moz-transform: scale(1.5, 1.5); /* Firefox */
 
-
}
 
-
 
-
.nav span{
 
-
position: absolute;
 
-
margin-left: -8%;
 
-
margin-top: 0.7%;
 
-
font-size: 28px;
 
-
font-variant: small-caps;
 
-
}
 
-
 
-
div.wrapper {
 
-
position: relative;
 
-
margin: 0 2%;
 
-
overflow: hidden;
 
-
}
 
-
 
-
//for spin animation
 
-
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 
-
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 
-
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
-
 
-
.spin:hover {
 
-
-webkit-animation:spin 2s linear infinite;
 
-
-moz-animation:spin 2s linear infinite;
 
-
animation:spin 2s linear infinite;
 
-
}
 
-
 
-
h1, h2, h3, h4, h5, h6 {
 
-
font-family: Helvetica, serif;
 
-
font-weight: normal;
 
-
border-bottom: none;
 
-
margin-bottom: 0px !important;
 
-
}
 
-
 
-
h1 { font-size: 44px; }
 
-
h2 { font-size: 37px; }
 
-
h3 { font-size: 27px; }
 
-
h4 { font-size: 23px; }
 
-
h5 { font-size: 17px; }
 
-
h6 { font-size: 14px; }
 
-
 
-
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
 
-
text-align: center;
 
-
}
 
-
 
-
a, a:visited {
 
-
color: #b31b1b;
 
-
text-decoration: none;
 
-
}
 
-
 
-
a:hover {
 
-
color: #871414;
 
-
text-decoration: none;
 
-
cursor: pointer;
 
-
cursor: hand;
 
-
}
 
-
 
-
/*  Lists */
 
-
ul, ol {
 
-
font-size: 14px;
 
-
line-height: 1.6;
 
-
margin-bottom: 17px;
 
-
list-style-position: inside;
 
-
}
 
-
 
-
ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }
 
-
ul.square, ul.circle, ul.disc { margin-left: 17px; }
 
-
ul.square { list-style-type: square; }
 
-
ul.square li ul { list-style: inherit; }
 
-
ul.circle { list-style-type: circle; }
 
-
ul.circle li ul { list-style: inherit; }
 
-
ul.disc { list-style-type: disc; }
 
-
ul.disc li ul { list-style: inherit; }
 
-
ul.no-bullet {
 
-
list-style: none;
 
-
}
 
-
<!--#navbar ul.no-bullet {
 
-
list-style: none;
 
-
font-size: 12px;
 
-
font-weight: bold;
 
-
}
 
-
#navbar ul.no-bullet li {
 
-
float: left;
 
-
margin-right: 10%;
 
-
padding-left: 1%;
 
-
padding-right: 1%;
 
-
padding-top: 1%;
 
-
}
 
-
#navbar ul.no-bullet li.right {
 
-
color: #b31b1b;
 
-
float: right;
 
-
margin-right: 0.3%
 
-
}
 
-
#navbar ul.large li { line-height: 21px; }-->
 
-
 
-
ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }
 
-
 
-
 
-
/* Misc */
 
-
.left { float: left; }
 
-
.right { float: right; }
 
-
.text-left { text-align: left; }
 
-
.text-right { text-align: right; }
 
-
.text-center { text-align: center; }
 
-
.hide { display: none; }
 
-
.highlight { background: #ffff99; }
 
-
.absolute { position: absolute; }
 
-
 
-
#googlemap img, object, embed { max-width: none; }
 
-
#map_canvas embed { max-width: none; }
 
-
#map_canvas img { max-width: none; }
 
-
#map_canvas object { max-width: none; }
 
-
 
-
.nohilite {
 
-
-webkit-touch-callout: none;
 
-
-webkit-user-select: none;
 
-
-khtml-user-select: none;
 
-
-moz-user-select: none;
 
-
-ms-user-select: none;
 
-
user-select: none;
 
-
}
 
-
div.clearfix {
 
-
content: ".";
 
-
display: block;
 
-
clear: both;
 
-
visibility: hidden;
 
-
line-height: 0;
 
-
height: 0;
 
-
}
 
-
.off-canvas {
 
-
width: 100%;
 
-
}
 
-
 
-
/* -----------------------------------------
 
-
Parallax
 
-
----------------------------------------- */
 
-
.screen {
 
-
position: absolute;
 
-
height: 100%;
 
-
width: 100%;
 
-
//background-color: rgb(50, 187, 83);
 
-
//border: 3px solid black;
 
-
}
 
-
 
-
.screen img {position: absolute;}
 
-
 
-
.screen span {position: absolute;}
 
-
 
-
.parallax {
 
-
position: absolute;
 
-
white-space: nowrap;
 
-
};
 
-
 
-
.layer2 { z-index: 3; }
 
-
.layer3 { z-index: 2; }
 
-
.layer4 { z-index: 1; }
 
-
.layer1 { z-index: 4; }
 
-
 
-
</style>
 
-
<!-- Fixes IE browser older than IE9-->
 
-
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
 
-
 
-
<!-- JQuery Library -->
 
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
 
-
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
-
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
-
 
<script type="text/javascript">
<script type="text/javascript">
-
  $(document).ready(function() {
+
$(document).ready(function() {
-
// remove all empty <p> tags
+
//width of home body wrapper
-
      $("p").filter( function() {
+
$(".home").height($(document).height()-200);
-
          return $.trim($(this).html()) == '';
+
-
}).remove();
+
-
+
-
//width of body wrapper
+
-
$(".wrapper").height($(document).height()-200);
+
$(window).resize(function() {
$(window).resize(function() {
-
$(".wrapper").height($(document).height()-200);
+
$(".home").height($(document).height()-200);
-
});
+
-
+
-
<!-- Parallax Script -->
+
-
$(document).keydown(function(e){
+
-
//down or right
+
-
if (e.which == 40 || e.which == 39) {
+
-
if(parseInt($("#second-last-screen").css('left')) > -1) //only scroll if we haven't reached the far right
+
-
scroll($(".parallax, .screen"), 0);
+
-
+
-
return false; //prevent more keydown events from firing
+
-
}
+
-
+
-
//up or left
+
-
else if(e.which == 38 || e.which == 37) {
+
-
if(parseInt($("#first-screen").css('left')) < 0) //only scroll if we haven't reached the far left
+
-
scroll($(".parallax, .screen"), 1);
+
-
+
-
return false; //prevent more keydown events from firing
+
-
}
+
-
});
+
-
+
-
  });
+
-
+
-
function scroll(param, dir) {
+
-
$(param).each(function() {
+
-
var speed = parseInt($(this).data('speed'), 10); //in milliseconds
+
-
var dist = parseInt($(this).data('dist'), 10); //in percentages
+
-
+
-
// dir = 0 scroll right, dir = 1 scroll left
+
-
if(dir == 0) $(this).animate( { left: '-=' + dist + '%'}, 1000, 'easeOutCirc');
+
-
else $(this).animate( { left: '+=' + dist + '%'}, 1000, 'easeOutCirc');  
+
});
});
-
}
+
});
</script>
</script>
</head>
</head>
-
+
<body style="overflow: hidden">
-
<body>
+
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px;">
-
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px; font-weight: 600;">
+
<a><div class="head"> Project </div></a>
<a><div class="head"> Project </div></a>
<a><div class="head"> Outreach </div></a>
<a><div class="head"> Outreach </div></a>
<div class="head">
<div class="head">
-
<img style="width: 450px; padding: 0 30px; margin-top: -10px;" src="https://static.igem.org/mediawiki/2013/f/fa/Cornell_iGEM_logo.png">
+
<img style="width: 450px; padding: 0 30px;" src="https://static.igem.org/mediawiki/2013/0/0a/Cornell_newlogo.png">
 +
 +
</div>
 +
<div style="display: inline-block; position: absolute; margin-left: -210px;">
 +
<a>
 +
<img src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png"">
 +
</a>
</div>
</div>
<a><div class="head"> Notebook</div></a>
<a><div class="head"> Notebook</div></a>
<a><div class="head"> Team</div></a>
<a><div class="head"> Team</div></a>
</div>
</div>
-
<div class="wrapper">
+
<div class="wrapper home">
<div id="first-screen" class="screen" data-speed="500" data-dist="100">  
<div id="first-screen" class="screen" data-speed="500" data-dist="100">  
-
<span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Parallax 2</span>
+
<span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Home Page</span>
<img class="layer4 spin" src="http://www.iconarchive.com/download/i74335/visualpharm/icons8-metro-style/Very-Basic-Settings.ico" style="left: 57%; height: 90%; width: 30%;">
<img class="layer4 spin" src="http://www.iconarchive.com/download/i74335/visualpharm/icons8-metro-style/Very-Basic-Settings.ico" style="left: 57%; height: 90%; width: 30%;">
<span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span>
<span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span>
Line 462: Line 45:
</div>
</div>
</div>
</div>
-
<div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;">
+
<div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;">
-
<div style="display: inline-block">
+
-
<a>
+
-
<img src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png" style="margin-left: 15px; margin-right: 20px;">
+
-
</a>
+
-
</div>
+
-
+
<a>
<a>
-
<div class="nav">
+
<div class="tail">
<span>Nickel</span>
<span>Nickel</span>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png">
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png">
Line 476: Line 53:
</a>
</a>
<a>
<a>
-
<div class="nav">
+
<div class="tail">
<span>Mercury</span>
<span>Mercury</span>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png">
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png">
Line 482: Line 59:
</a>
</a>
<a>
<a>
-
<div class="nav">
+
<div class="tail">
-
<span>Lead</span>
+
<span style="margin-left: -7%">Lead</span>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png">
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png">
</div>
</div>
</a>
</a>
<a>
<a>
-
<div class="nav">
+
<div class="tail">
-
<span>Reporters</span>
+
<span style="margin-left: -9%">Reporters</span>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Base-jumping-icon.png">
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Base-jumping-icon.png">
</div>
</div>

Latest revision as of 19:20, 19 August 2014

2014 Cornell iGEM

Project
Outreach
Notebook
Team
Home Page Use arrow keys to move through slider -> I'll get mouse controls working in a bit
There's no parallax effect right now... It's giving me some trouble Also all the colors and images are temporary ->
General page layout coming soon ...and the hprac page that I keep forgetting to work on
Nickel
Mercury
Lead
Reporters

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"