Team:Gaston Day School

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
<html>
<html>
 +
<head>
 +
<style type="text/css">
 +
#slideshow
 +
{
 +
margin: 50px auto;
 +
position: relative;
 +
width: 100%;
 +
height: 240px;
 +
padding: 10px;
 +
box-shadow: 0 0 20px rgba(0,0,0,0.4);
 +
}
-
<head>
+
#slideshow > div
 +
{
 +
position: absolute;
 +
top: 10px;
 +
right: 10px;
 +
bottom: 10px;
 +
left: 10px;
 +
}
-
<style type="text/css">
+
#slideshow > div > img
-
#slideshow {  
+
{  
-
    margin: 50px auto;  
+
height:100%;
-
    position: relative;
+
width: 100%;
-
    width: 100%;  
+
float: left;
-
    height: 240px;
+
}
-
  padding: 10px;
+
-
    box-shadow: 0 0 20px rgba(0,0,0,0.4);  
+
-
}
+
-
#slideshow > div {  
+
body
-
    position: absolute;  
+
{  
-
    top: 10px;
+
font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;  
-
    right: 10px;
+
}
-
    bottom: 10px;
+
-
    left: 10px;
+
-
}
+
-
#slideshow > div > img {  
+
ul#tabs
-
height:100%;
+
{  
-
width: 100%;
+
list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0;  
-
float: left;
+
}
-
}
+
-
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
+
ul#tabs li
 +
{  
 +
display: inline;  
 +
}
-
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
+
ul#tabs li a
 +
{  
 +
color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em;  
 +
text-decoration: none;
 +
}
-
ul#tabs li { display: inline; }
+
ul#tabs li a:hover
 +
{  
 +
background-color: #f1f0ee;  
 +
}
-
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em;  
+
ul#tabs li a.selected
-
text-decoration: none; }
+
{  
 +
color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em;  
 +
}
-
ul#tabs li a:hover { background-color: #f1f0ee; }
+
div.tabContent
 +
{
 +
border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee;  
 +
}
-
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
+
div.tabContent.hide
 +
{  
 +
display: none;  
 +
}
 +
</style>
-
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
div.tabContent.hide { display: none; }
+
<script>
-
</style>
+
<!--slideshow -->
 +
$("#slideshow > div:gt(0)").hide();
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
setInterval(function()
 +
{
 +
$('#slideshow > div:first')
 +
.fadeOut(1000)
 +
.next()
 +
.fadeIn(1000)
 +
.end()
 +
.appendTo('#slideshow');
 +
},  6000);
-
<script>
+
<!-- slideshow-->
-
<!--slideshow -->
+
<!-- Tabs -->
-
$("#slideshow > div:gt(0)").hide();
+
-
setInterval(function() {
+
var tabLinks = new Array();
-
  $('#slideshow > div:first')
+
var contentDivs = new Array();
-
    .fadeOut(1000)
+
-
    .next()
+
-
    .fadeIn(1000)
+
-
    .end()
+
-
    .appendTo('#slideshow');
+
-
},  6000);
+
-
<!-- slideshow-->
+
function init()
-
<!-- Tabs -->
+
{
 +
// 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 );
 +
}
 +
}
-
    var tabLinks = new Array();
+
// Assign onclick events to the tab links, and
-
    var contentDivs = new Array();
+
// highlight the first tab
 +
var i = 0;
-
function init() {
+
for ( var id in tabLinks )
 +
{
 +
tabLinks[id].onmouseover = showTab;
 +
tabLinks[id].onfocus = function() { this.blur() };
 +
if ( i == 0 ) tabLinks[id].className = 'selected';
 +
i++;
 +
}
-
      // Grab the tab links and content divs from the page
+
// Hide all content divs except the first
-
      var tabListItems = document.getElementById('tabs').childNodes;
+
var i = 0;
-
      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 );
+
-
        }
+
-
      }
+
-
      // Assign onclick events to the tab links, and
+
for ( var id in contentDivs )
-
      // highlight the first tab
+
{
-
      var i = 0;
+
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
 +
i++;
 +
}
 +
}
-
      for ( var id in tabLinks )  
+
function showTab()  
-
      {
+
{
-
        tabLinks[id].onmouseover = showTab;
+
var selectedId = getHash( this.getAttribute('href') );
-
        tabLinks[id].onfocus = function() { this.blur() };
+
-
        if ( i == 0 ) tabLinks[id].className = 'selected';
+
-
        i++;
+
-
      }
+
-
      // Hide all content divs except the first
+
// Highlight the selected tab, and dim all others.
-
      var i = 0;
+
// 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;
 +
}
-
      for ( var id in contentDivs ) {
+
function getFirstChildWithTagName( element, tagName )  
-
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
+
{
-
        i++;
+
for ( var i = 0; i < element.childNodes.length; i++ )  
-
      }
+
{
-
    }
+
if ( element.childNodes[i].nodeName == tagName )
 +
return element.childNodes[i];
 +
}
 +
}
-
function showTab() {
+
function getHash( url )  
-
      var selectedId = getHash( this.getAttribute('href') );
+
{
 +
var hashPos = url.lastIndexOf ( '#' );
 +
return url.substring( hashPos + 1 );
 +
}
 +
</script>
-
      // Highlight the selected tab, and dim all others.
+
</head>
-
      // Also show the selected content div, and hide all others.
+
-
      for ( var id in contentDivs ) {
+
<body onload="init()">
-
        if ( id == selectedId ) {
+
<!--main content -->
-
          tabLinks[id].className = 'selected';
+
<table width="70%" align="center">
-
          contentDivs[id].className = 'tabContent';
+
<!--navigation menu
-
        } else {
+
<td align="center" colspan="3">
-
          tabLinks[id].className = '';
+
-
          contentDivs[id].className = 'tabContent hide';
+
-
        }
+
-
      }
+
-
      // Stop the browser following the link
+
<table  width="100%">
-
      return false;
+
<tr heigth="15px"></tr>
-
    }
+
<tr heigth="75px">
 +
<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>
-
function getFirstChildWithTagName( element, tagName ) {
+
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
      for ( var i = 0; i < element.childNodes.length; i++ ) {
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Team"style="color:#000000"> Team </a>
-
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
+
</td>
-
      }
+
-
    }
+
-
function getHash( url ) {
+
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
      var hashPos = url.lastIndexOf ( '#' );
+
<a href="https://igem.org/Team.cgi?year=2014&team_name=Gaston_Day_School"style="color:#000000"> Official Team Profile </a>
-
      return url.substring( hashPos + 1 );
+
</td>
-
    }
+
-
</script>
+
-
</head>
+
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
<body onload="init()">
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Project"style="color:#000000"> Project</a>
-
<!--main content -->
+
</td>
-
<table width="70%" align="center">
+
 +
<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>
 +
<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>
-
<!--navigation menu -->
+
<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 align="center" colspan="3">
+
</td>
-
<table width="100%">
+
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
-
<tr heigth="15px"></tr>
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Safety"style=" color:#000000"> Safety </a>
-
<tr heigth="75px">  
+
</td>
 +
<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>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<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>
+
<a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack"style="color:#000000"> Measurement Track </a>
 +
</td>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
<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>
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Team"style="color:#000000"> Team </a> </td>
+
</tr>
 +
</table>
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
end navigation menu -->
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=Gaston_Day_School"style="color:#000000"> Official Team Profile </a></td>
+
 +
<!--slideshow -->
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<div id="slideshow">
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Project"style="color:#000000"> Project</a></td>
+
<div>
 +
<img src="http://media02.hongkiat.com/ww-flower-wallpapers/sunflower-landscape.jpg">
 +
</div>
 +
<div>
 +
<img src="http://alliosnews.com/wp-content/uploads/2012/06/OS-X-Mavericks-Wallpaper.jpeg">
 +
</div>
 +
<div>
 +
<img src="http://smokingdesigners.com/wp-content/uploads/2011/05/summer-wallpaper-18.jpg">
 +
</div>
 +
</div>
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
<!--slideshow -->
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Parts"style="color:#000000"> Parts</a></td>
+
<ul id="tabs">
-
 
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School#home">Home</a></li>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Team#team">Members</a></li>
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Modeling"style="color:#000000"> Modeling</a></td>
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Project#project">Project</a></li>
-
 
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack#measure">Measurement Track</a></li>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Parts#parts">Parts</a></li>
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Notebook"style="color:#000000"> Notebook</a></td>
+
<li><a href="#models">Models</a></li>
-
 
+
<li><a href="#notebook">Notebook</a></li>
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<li><a href="#safety">Safety</a></li>
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Safety"style=" color:#000000"> Safety </a></td>
+
<li><a href="#attrib">Attributions</a></li>
-
 
+
<li><a href="#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li>
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
</ul>
-
<a href="https://2014.igem.org/Team:Gaston_Day_School/Attributions"style="color:#000000"> Attributions </a></td>
+
-
 
+
-
<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>
+
-
 
+
-
 
+
-
<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>
+
-
</tr>
+
-
</table>
+
-
-->
+
-
<!--end navigation menu -->
+
-
<!--slideshow -->
+
-
 
+
-
<div id="slideshow">
+
-
  <div>
+
-
    <img src="http://media02.hongkiat.com/ww-flower-wallpapers/sunflower-landscape.jpg">
+
-
  </div>
+
-
  <div>
+
-
    <img src="http://alliosnews.com/wp-content/uploads/2012/06/OS-X-Mavericks-Wallpaper.jpeg">
+
-
  </div>
+
-
  <div>
+
-
    <img src="http://smokingdesigners.com/wp-content/uploads/2011/05/summer-wallpaper-18.jpg">
+
-
  </div>
+
-
</div>
+
-
 
+
-
<!--slideshow -->
+
-
<ul id="tabs">
+
-
  <li><a href="#home">Home</a></li>
+
-
  <li><a href="https://2014.igem.org/Team:Gaston_Day_School/Team#team">Members</a></li>
+
-
  <li><a href="#project">Project</a></li>
+
-
  <li><a href="#measure">Measurement Track</a></li>
+
-
  <li><a href="#parts">Parts</a></li>
+
-
  <li><a href="#models">Models</a></li>
+
-
  <li><a href="#notebook">Notebook</a></li>
+
-
  <li><a href="#safety">Safety</a></li>
+
-
  <li><a href="#attrib">Attributions</a></li>
+
-
  <li><a href="#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li>
+
-
</ul>
+
-
 
+
-
<div class="tabContent" id="home">
+
-
  <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 class="tabContent" id="team">
+
-
  <h2>Team</h2>
+
-
    <p> derp derp derp</p>
+
-
</div>
+
-
<div class="tabContent" id="project">
+
-
  <h2>Project</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="measure">
+
-
  <h2>Measurement Track</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="parts">
+
-
  <h2>Parts</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="models">
+
-
  <h2>Models</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="notebook">
+
-
  <h2>Notebook</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="safety">
+
-
  <h2>Safety</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="attrib">
+
-
  <h2>Project</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
<div class="tabContent" id="igem">
+
-
  <h2>Homepage</h2>
+
-
    <p> Derp </p>
+
-
</div>
+
-
</body>
+
 +
<div class="tabContent" id="home">
 +
<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 class="tabContent" id="team">
 +
<h2>Team</h2>
 +
<p> derp derp derp</p>
 +
</div>
 +
<div class="tabContent" id="project">
 +
<h2>Project</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="measure">
 +
<h2>Measurement Track</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="parts">
 +
<h2>Parts</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="models">
 +
<h2>Models</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="notebook">
 +
<h2>Notebook</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="safety">
 +
<h2>Safety</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="attrib">
 +
  <h2>Project</h2>
 +
<p> Derp </p>
 +
</div>
 +
<div class="tabContent" id="igem">
 +
  <h2>Homepage</h2>
 +
<p> Derp </p>
 +
</div>
 +
</table>
 +
</body>
</html>
</html>

Revision as of 14:34, 11 June 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

derp derp derp

Project

Derp

Measurement Track

Derp

Parts

Derp

Models

Derp

Notebook

Derp

Safety

Derp

Project

Derp

Homepage

Derp

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