Team:Gaston Day School

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<head>
-
<style>
+
<style type="text/css">
-
body {
+
#slideshow
-
padding: 0px;
+
{  
-
margin: 0px;
+
margin: 50px auto;
-
}
+
position: relative;
 +
width: 100%;
 +
height: 240px;
 +
padding: 10px;
 +
box-shadow: 0 0 20px rgba(0,0,0,0.4);  
 +
}
-
[class*='col-'] {
+
#slideshow > div
-
float: left;
+
{  
-
padding-right: 20px;
+
position: absolute;  
-
}
+
top: 10px;
 +
right: 10px;
 +
bottom: 10px;
 +
left: 10px;
 +
}
-
.grid-pad {
+
#slideshow > div > img
-
padding: 20px 0px 20px 20px;
+
{  
-
}
+
height:100%;
 +
width: 100%;
 +
float: left;
 +
}
-
.sub-grid-pad {
+
body
-
padding: 20px 0px 20px 0px;
+
{  
-
}
+
font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; margin:0px; padding:0px;
 +
}
-
.grid-pad > .row > [class*='col-']:last-of-type, .grid-pad > [class*='col-']:last-of-type {
+
ul#tabs
-
padding-right: 20px;
+
{
-
}
+
list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0;  
 +
}
-
.col-1-1 {
+
ul#tabs li
-
width: 100%;
+
{  
-
}
+
display: inline;  
 +
}
-
.col-1-2, .col-2-4, .col-3-6, .col-5-10 {
+
ul#tabs li a
-
width: 50%;
+
{
-
}
+
color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em;
 +
text-decoration: none;  
 +
}
-
.col-1-3, .col-2-6, .col-3-9 {
+
ul#tabs li a:hover
-
width: 33.33%;
+
{  
-
}
+
background-color: #f1f0ee;  
 +
}
-
.col-2-3, .col-4-6, .col-6-9 {
+
ul#tabs li a.selected
-
width: 66.66%;
+
{
-
}
+
color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em;  
 +
}
-
.col-1-4, .col-2-8 {
+
div.tabContent
-
width: 25%;
+
{  
-
}
+
border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee;  
 +
}
-
.col-3-4 {
+
div.tabContent.hide
-
width: 75%;
+
{  
-
}
+
display: none;  
 +
}
 +
</style>
-
.col-1-5, .col-2-10 {
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
width: 20%;
+
-
}
+
-
.col-2-5, .col-4-10 {
+
<script>
-
width: 40%;
+
<!--slideshow -->
-
}
+
$("#slideshow > div:gt(0)").hide();
-
.col-3-5, .col-6-10 {
+
setInterval(function()
-
width: 60%;
+
{  
-
}
+
$('#slideshow > div:first')
 +
.fadeOut(1000)
 +
.next()
 +
.fadeIn(1000)
 +
.end()
 +
.appendTo('#slideshow');
 +
},  6000);
-
.col-4-5, .col-8-10 {
+
<!-- slideshow-->
-
width: 80%;
+
<!-- Tabs -->
-
}
+
-
.col-1-6 {
+
var tabLinks = new Array();
-
width: 16.66%;
+
var contentDivs = new Array();
-
}
+
-
.col-5-6 {
+
function init()
-
width: 83.33%;
+
{
-
}
+
// Grab the tab links and content divs from the page
 +
var tabListItems = document.getElementById('tabs').childNodes;
 +
for ( var i = 0; i < tabListItems.length; i++ )
 +
{
 +
if ( tabListItems[i].nodeName == "LI" )
 +
{
 +
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
 +
var id = getHash( tabLink.getAttribute('href') );
 +
tabLinks[id] = tabLink;
 +
contentDivs[id] = document.getElementById( id );
 +
}
 +
}
-
.col-1-7 {
+
// Assign onclick events to the tab links, and
-
width: 14.28%;
+
// highlight the first tab
-
}
+
var i = 0;
-
.col-2-7 {
+
for ( var id in tabLinks )
-
width: 28.57%;
+
{
-
}
+
tabLinks[id].onmouseover = showTab;
 +
tabLinks[id].onfocus = function() { this.blur() };
 +
if ( i == 0 ) tabLinks[id].className = 'selected';
 +
i++;
 +
}
-
.col-3-7 {
+
// Hide all content divs except the first
-
width: 42.85%;
+
var i = 0;
-
}
+
-
.col-4-7 {
+
for ( var id in contentDivs )
-
width: 57.14%;
+
{
-
}
+
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
 +
i++;
 +
}
 +
}
-
.col-5-7 {
+
function showTab()
-
width: 71.42%;
+
{
-
}
+
var selectedId = getHash( this.getAttribute('href') );
-
.col-6-7 {
+
// Highlight the selected tab, and dim all others.
-
width: 85.71%;
+
// Also show the selected content div, and hide all others.
-
}
+
for ( var id in contentDivs )
 +
{
 +
if ( id == selectedId )
 +
{
 +
tabLinks[id].className = 'selected';
 +
contentDivs[id].className = 'tabContent';
 +
}
 +
else
 +
{
 +
tabLinks[id].className = '';
 +
contentDivs[id].className = 'tabContent hide';
 +
}
 +
}
 +
// Stop the browser following the link
 +
return false;
 +
}
-
.col-1-8 {
+
function getFirstChildWithTagName( element, tagName )
-
width: 12.5%;
+
{
-
}
+
for ( var i = 0; i < element.childNodes.length; i++ )
 +
{
 +
if ( element.childNodes[i].nodeName == tagName )
 +
return element.childNodes[i];
 +
}
 +
}
-
.col-2-8 {
+
function getHash( url )
-
width: 25%;
+
{
-
}
+
var hashPos = url.lastIndexOf ( '#' );
 +
return url.substring( hashPos + 1 );
 +
}
 +
</script>
-
.col-3-8 {
+
</head>
-
width: 37.5%;
+
-
}
+
<body onload="init()">
 +
<!--main content -->
 +
<table width="70%" align="center">
 +
<!--navigation menu
 +
<td align="center" colspan="3">
-
.col-4-8 {
+
<table  width="100%">
-
width: 50%;
+
<tr heigth="15px"></tr>
-
}
+
<tr heigth="75px">
 +
//Home
 +
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
 +
<a href="https://2014.igem.org/Team:Gaston_Day_School"style="color:#000000">Home </a>
 +
</td>
 +
 +
//Team
 +
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 +
<a href="https://2014.igem.org/Team:Gaston_Day_School/Team"style="color:#000000"> Team </a>
 +
</td>
-
.col-5-8 {
+
//Team Profile
-
width: 62.5%;
+
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://igem.org/Team.cgi?year=2014&team_name=Gaston_Day_School"style="color:#000000"> Official Team Profile </a>
 +
</td>
-
.col-6-8 {
+
//Project
-
width: 75%;
+
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Project"style="color:#000000"> Project</a>
 +
</td>
-
.col-7-8 {
+
//Parts
-
width: 87.5%;
+
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Parts"style="color:#000000"> Parts</a>
 +
</td>
-
.col-1-9 {
+
//Modeling
-
width: 11.11%;
+
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Modeling"style="color:#000000"> Modeling</a>
-
+
</td>
-
.col-1-27 {
+
-
width: 3.703%
+
-
}
+
-
.col-2-9 {
+
//Notebook
-
width: 22.22%;
+
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Notebook"style="color:#000000"> Notebook</a>
 +
</td>
-
.col-4-9 {
+
//Safety
-
width: 44.44%;
+
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Safety"style=" color:#000000"> Safety </a>
 +
</td>
-
.col-5-9 {
+
//Attributions
-
width: 55.55%;
+
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Attributions"style="color:#000000"> Attributions </a>
 +
</td>
-
.col-7-9 {
+
//Measurement Track
-
width: 77.77%;
+
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
}
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack"style="color:#000000"> Measurement Track </a>
 +
</td>
-
.col-8-9 {
+
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
-
width: 88.88%;
+
</tr>
-
}
+
</table>
-
.col-1-10 {
+
end navigation menu -->
-
width: 10%;
+
-
}
+
<!--slideshow -->
-
.col-3-10 {
+
<div id="slideshow">
-
width: 30%;
+
<div>
-
}
+
<img src="http://media02.hongkiat.com/ww-flower-wallpapers/sunflower-landscape.jpg">
-
 
+
-
.col-7-10 {
+
-
width: 70%;
+
-
}
+
-
 
+
-
.col-9-10 {
+
-
width: 90%;
+
-
}
+
-
 
+
-
.grid:after {
+
-
content: "";
+
-
display: table;
+
-
clear: both;
+
-
}
+
-
 
+
-
*, *:after, *:before {
+
-
-webkit-box-sizing: border-box;
+
-
-moz-box-sizing: border-box;
+
-
box-sizing: border-box;
+
-
}
+
-
 
+
-
[class*='col-']:last-of-type {
+
-
padding-right: 0;
+
-
}
+
-
 
+
-
.show {
+
-
background-color:#66cccc;
+
-
}
+
-
 
+
-
.hide {
+
-
background-color: auto;
+
-
}
+
-
 
+
-
#pad {
+
-
padding: 5px;
+
-
}
+
-
 
+
-
body {
+
-
background-color:#FAFAFA;
+
-
}
+
-
</style>
+
-
</head>
+
-
<body>
+
-
+
-
<div class="row">
+
-
<H1 class="show" id="" align="center">WELCOME TO THE 2014 GDS IGEM WIKI</p>
+
-
</div>
+
-
<div class="grid-pad">
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
<div class="col-1-10">
+
-
<p class="show" id="pad">filler<p>
+
-
</div>
+
-
</div>
+
-
<div class="col-1-10"><p class="hide" id="pad"></p></div>
+
-
<div class="col-8-10">
+
-
<div class="grid-pad">
+
-
<!--Row 1-->
+
-
<div class="col-1-5">
+
-
<img src="smiley.gif" alt="https://2014.igem.org/File:Hehehe.JPG#filelinks" height="42" width="42">
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
</div>
+
-
+
-
<div class="grid-pad">
+
-
<!--Row 2-->
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
</div>
</div>
-
</div>
+
<div>
-
+
<img src="http://alliosnews.com/wp-content/uploads/2012/06/OS-X-Mavericks-Wallpaper.jpeg">
-
<div class="grid-pad">
+
</div>
-
<!--Row 3-->
+
<div>
-
<div class="col-1-5">
+
<img src="http://smokingdesigners.com/wp-content/uploads/2011/05/summer-wallpaper-18.jpg">
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>  
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
-
</div>
+
-
<div class="col-1-5">
+
-
<p class="show" id="pad">3</p>
+
</div>
</div>
</div>
</div>
-
+
 
-
<div class="grid-pad">
+
<!--Tabs(NOT SLIDESHOW!) -->
-
<!--Row 4-->
+
<ul id="tabs">
-
<div class="col-1-5">
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School#home">Home</a></li>
-
<p class="show" id="pad">3</p>
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Team#team">Members</a></li>
-
</div>  
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Project#project">Project</a></li>
-
<div class="col-1-5">
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack#measure">Measurement Track</a></li>
-
<p class="show" id="pad">3</p>
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Parts#parts">Parts</a></li>
-
</div>  
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Modeling#models">Models</a></li>
-
<div class="col-1-5">
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Notebook#notebook">Notebook</a></li>
-
<p class="show" id="pad">3</p>
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Safety#safety">Safety</a></li>
-
</div>  
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Attributions#attrib">Attributions</a></li>
-
<div class="col-1-5">
+
<li><a href="#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li>
-
<p class="show" id="pad">3</p>
+
</ul>
-
</div>  
+
<!--Tab Content-->
-
<div class="col-1-5">
+
<div class="tabContent" id="home">
-
<p class="show" id="pad">3</p>
+
<h2>Home</h2>
 +
<div>
 +
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
 +
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
</div>
</div>
-
+
<div class="tabContent" id="team">
-
<div class="grid-pad">
+
<h2>Team</h2>
-
<!--Row 5-->
+
<p>Teem stuff</p>
-
<div class="col-1-5">
+
</div>
-
<p class="show" id="pad">3</p>
+
<div class="tabContent" id="project">
-
</div>  
+
<h2>Project</h2>
-
<div class="col-1-5">
+
<p>Project things </p>
-
<p class="show" id="pad">3</p>
+
</div>
-
</div>  
+
<div class="tabContent" id="measure">
-
<div class="col-1-5">
+
<h2>Measurement Track</h2>
-
<p class="show" id="pad">3</p>
+
<p>Measurement stuff </p>
-
</div>  
+
</div>
-
<div class="col-1-5">
+
<div class="tabContent" id="parts">
-
<p class="show" id="pad">3</p>
+
<h2>Parts</h2>
-
</div>  
+
<p>Parts </p>
-
<div class="col-1-5">
+
</div>
-
<p class="show" id="pad">3</p>
+
<div class="tabContent" id="models">
-
</div>
+
<h2>Models</h2>
 +
<p>Models </p>
 +
</div>
 +
<div class="tabContent" id="notebook">
 +
<h2>Notebook</h2>
 +
<p>Notebook writings </p>
 +
</div>
 +
<div class="tabContent" id="safety">
 +
<h2>Safety</h2>
 +
<p>Safety shloop  </p>
 +
</div>
 +
<div class="tabContent" id="attrib">
 +
  <h2>Attributions</h2>
 +
<p>Attributes 'n shiz </p>
 +
</div>
 +
<div class="tabContent" id="igem">
 +
  <h2>Homepage</h2>
 +
<p>Go to, ja!</p>
</div>
</div>
-
</div>
+
</table>
-
+
</body>
-
<div class="col-1-10"><p class="hide" id="pad"></p></div>
+
-
</body>
+
</html>
</html>

Revision as of 14:44, 22 July 2014

Home

JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.

The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.

Team

Teem stuff

Project

Project things

Measurement Track

Measurement stuff

Parts

Parts

Models

Models

Notebook

Notebook writings

Safety

Safety shloop

Attributions

Attributes 'n shiz

Homepage

Go to, ja!

Retrieved from "http://2014.igem.org/Team:Gaston_Day_School"