Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
 
(329 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{:Team:Cornell/sandbox/header}}
-
<head>
+
<html>
-
<title> Parallax Test </title>
+
<head>
-
<meta name="Description" content="2014 Parallax Down" />
+
-
<meta name="Keywords" content="hi this is going to be awesome" />
+
-
 
+
-
<!--Fixes IE browser older than IE9-->
+
-
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
+
-
 
+
-
<!-- Remove all empty <p> tags -->
+
<script type="text/javascript">
<script type="text/javascript">
-
    $(document).ready(function() {
+
$(document).ready(function() {
-
        $("p").filter( function() {
+
//width of home body wrapper
-
            return $.trim($(this).html()) == '';
+
$(".home").height($(document).height()-200);
-
        }).remove()
+
-
    });
+
$(window).resize(function() {
-
</script>
+
$(".home").height($(document).height()-200);
-
+
});
-
<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: white;
+
-
}
+
-
#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%; }
+
-
 
+
-
body {
+
-
background: #f2f2f2;
+
-
font-family: Helvetica, sans-serif;
+
-
font-size: 15px;
+
-
line-height: 23px;
+
-
-webkit-font-smoothing: antialiased;
+
-
background-image: url("http://hotdot.pro/static/img/bck.png");
+
-
}
+
-
 
+
-
div.content {
+
-
margin: 0 204px;
+
-
}
+
-
+
-
#navbar {
+
-
position: fixed;
+
-
z-index: 10;
+
-
width: 100%;
+
-
height: 77px;
+
-
text-align: center;
+
-
font-size: 13px;
+
-
bottom: -1px;
+
-
}
+
-
+
-
h1, h2, h3, h4, h5, h6 {
+
-
font-family: Helvetica, serif;
+
-
font-weight: normal;
+
-
border-bottom: none;
+
-
margin-bottom: 0px !important;
+
-
color: white;
+
-
}
+
-
 
+
-
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;
+
-
}
+
-
+
-
/*  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; }
+
-
 
+
-
#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
+
-
----------------------------------------- */
+
-
.section {       
+
-
background-image: url("https://static.igem.org/mediawiki/2013/a/ab/Mold_contaminantssmaller.jpg");
+
-
height: 329px;
+
-
}
+
-
.section .inner {
+
-
background-image: url("https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png");
+
-
height: 100px;
+
-
background-repeat: no-repeat;
+
-
}
+
-
+
-
.constant {
+
-
height: 100px;
+
-
}
+
-
</style>
+
-
<script type="text/javascript">
+
-
jQuery(document).ready(function($) {
+
-
    a=parseFloat(400);// Initial value for the first background (bk 0)
+
-
    b=parseFloat(0);// Initial value for the first background (bk 0)
+
-
    c=parseFloat(400);// Initial value for the second background (bk 1)
+
-
    d=parseFloat(0);// Initial value for the second background (bk 1)
+
-
    var scrollTop = $(window).scrollTop();
+
-
    var scroll_actually= new Array();// Identifies the X and Y values for the background
+
-
+
-
    $(window).scroll(function(){//This is not the cleanest way to do this, I'm just keeping it short.
+
-
        if(scrollTop>$(this).scrollTop()) // Scroll up
+
-
        {
+
-
            if (getScrollTop()<=1600 && getScrollTop()>=0)// Identifies the position for the first background when a scroll event occurs
+
-
            {
+
-
                    a=a+35;// Position for the first background, it decreases in 35 pixels
+
-
                    b=b+10;// Position for the first background, it decreases in 10 pixels
+
-
                    $('.img_1').css('backgroundPosition', '50% '+a+'px');
+
-
                    $('.bk_0').css('backgroundPosition', '0 '+b+'px');
+
-
            }
+
-
            if (getScrollTop()>=2050 && getScrollTop()<=3650)
+
-
            {
+
-
                    c=c+35;// Position for the second background, it decreases in 35 pixels
+
-
                    d=d+10;// Position for the second background, it decreases in 10 pixels
+
-
                    $('.img_2').css('backgroundPosition', '50% '+c+'px');
+
-
                    $('.bk_1').css('backgroundPosition', '0 '+d+'px');
+
-
            }
+
-
        }
+
-
        else
+
-
        {// Scroll down
+
-
            if (getScrollTop()>=0 && getScrollTop()<=1600)
+
-
            {
+
-
                  a=a-35;// Position for the first background, it decreases in 35 pixels
+
-
                  b=b-10;// Position for the first background, it decreases in 10 pixels
+
-
                  $('.img_1').css('backgroundPosition', '50% '+a+'px');
+
-
                  $('.bk_0').css('backgroundPosition', '0 '+b+'px');
+
-
            }
+
-
                if (getScrollTop()>=2050 && getScrollTop()<=3650)
+
-
            {
+
-
                  c=c-35;// Position for the second background, it decreases in 35 pixels
+
-
                  d=d-10;// Position for the second background, it decreases in 10 pixels
+
-
                  $('.img_2').css('backgroundPosition', '50% '+c+'px');
+
-
                  $('.bk_1').css('backgroundPosition', '0 '+d+'px');
+
-
            }
+
-
        }
+
-
        if (getScrollTop()==0)// Adjusts the positions values and resets them to zero during a scroll up event
+
-
        {
+
-
            a=parseFloat(400);
+
-
            b=parseFloat(0);
+
-
            c=parseFloat(400);
+
-
            d=parseFloat(0);
+
-
            $('.bk_0').css('backgroundPosition', '0 0');
+
-
            $('.bk_1').css('backgroundPosition', '0 0');
+
-
            $('.img_2').css('backgroundPosition', '50% '+400+'px');
+
-
            $('.img_1').css('backgroundPosition', '50% '+400+'px');
+
-
        }
+
-
      scrollTop = $(this).scrollTop();
+
-
    });
+
-
});
+
-
function getScrollTop(){ //  Verifies the total sum in pixels of the whole page
+
-
+
-
    if(typeof pageYOffset!= 'undefined'){
+
-
        // Most browsers
+
-
        return pageYOffset;
+
-
    }
+
-
    else{
+
-
        var B= document.body; //IE 'quirks'
+
-
        var D= document.documentElement; //IE with doctype
+
-
        D= (D.clientHeight)? D: B;
+
-
        return D.scrollTop;
+
-
    }
+
-
}
+
-
- See more at: http://www.webdesignshock.com/one-page-website/#sthash.9JiOGphG.dpuf
+
</script>
</script>
</head>
</head>
-
+
<body style="overflow: hidden">
-
<body>
+
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px;">
-
<div class="content">
+
<a><div class="head"> Project </div></a>
-
<h1> Whee </h1>
+
<a><div class="head"> Outreach </div></a>
-
<div class="section bk_0">
+
<div class="head">
-
<div class="inner img_1">
+
<img style="width: 450px; padding: 0 30px;" src="https://static.igem.org/mediawiki/2013/0/0a/Cornell_newlogo.png">
-
</div>
 
</div>
</div>
-
<div class="constant">
+
<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>
-
<div class="section bk_1">
+
<a><div class="head"> Notebook</div></a>
-
<div class="inner img_2">
+
<a><div class="head"> Team</div></a>
-
+
</div>
-
</div>
+
<div class="wrapper home">
 +
<div id="first-screen" class="screen" data-speed="500" data-dist="100">  
 +
<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%;">
 +
<span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span>
 +
<span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span>
 +
</div>
 +
<div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="left: 100%;">  
 +
<span class="layer1" style="left:25%; top: 45%">There's no parallax effect right now... It's giving me some trouble</span>
 +
<span class="layer1" style="left:25%; top: 55%">Also all the colors and images are temporary -></span>
 +
</div>
 +
<div class="screen" data-speed="500" data-dist="100" style="left: 200%;">
 +
<span class="layer1" style="left:25%; top: 45%">General page layout coming soon</span>
 +
<span class="layer1" style="left:25%; top: 55%">...and the hprac page that I keep forgetting to work on</span>
</div>
</div>
</div>
</div>
-
<div id="navbar">
+
<div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;">
-
<img class="left" src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png" style="margin-top: -32px; margin-right: 35px;">
+
<a>
-
<ul class="no-bullet">
+
<div class="tail">
-
<li> Project </li>
+
<span>Nickel</span>
-
<li> Outreach </li>
+
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png">
-
<li> Notebook </li>
+
</div>
-
<li> Team </li>
+
</a>
-
<li class="right"> Twitter </li>
+
<a>
-
<li class="right"> Facebook </li>
+
<div class="tail">
-
</ul>
+
<span>Mercury</span>
 +
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png">
 +
</div>
 +
</a>
 +
<a>
 +
<div class="tail">
 +
<span style="margin-left: -7%">Lead</span>
 +
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png">
 +
</div>
 +
</a>
 +
<a>
 +
<div class="tail">
 +
<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">
 +
</div>
 +
</a>
</div>
</div>
</body>
</body>
</html>
</html>

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"