Team:Gaston Day School/Measurementtrack

From 2014.igem.org

(Difference between revisions)
Line 5: Line 5:
{
{
text-align: center;
text-align: center;
-
                        Width: 100%;
+
Width: 100%;
}
}
Line 17: Line 17:
float: left;
float: left;
width: 16%;
width: 16%;
-
                        margin:10px;
+
margin:10px;
-
                        Border: 1px solid #000000;
+
Border: 1px solid #000000;
-
                        Background-color: #ffffff;
+
Background-color: #ffffff;
}
}
                  
                  
-
                body
+
body
-
                {
+
{
-
                        font-size: 80%;  
+
font-size: 80%;  
-
                        font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;  
+
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;  
-
                        background-image: url("http://newevolutiondesigns.com/images/freebies/retro-wallpaper-1.jpg");  
+
background-image: url("http://newevolutiondesigns.com/images/freebies/retro-wallpaper-1.jpg");  
-
                        width:80%;  
+
width:80%;  
-
                        margin-left: 10%;  
+
margin-left: 10%;  
-
                        margin-right: 10%;
+
margin-right: 10%;
-
                }
+
}
-
                ul#tabs
+
ul#tabs
-
                {
+
{
-
                        list-style-type: none; padding: 0 0 0.3em 0;
+
list-style-type: none; padding: 0 0 0.3em 0;
-
                }
+
}
-
                ul#tabs li
+
ul#tabs li
-
                {
+
{
-
                        display: inline;
+
display: inline;
-
                }
+
}
-
             
+
 
-
                ul#tabs li a
+
ul#tabs li a
-
                {
+
{
-
                        color: #42454a;  
+
color: #42454a;  
-
                        background-color: #fefefe;  
+
background-color: #fefefe;  
-
                        border: 1px solid #000000;  
+
border: 1px solid #000000;  
-
                        border-bottom: none;  
+
border-bottom: none;  
-
                        padding: 0.3em;  
+
padding: 0.3em;  
-
                        border-radius: 5px;
+
border-radius: 5px;
-
                        text-decoration: none;
+
text-decoration: none;
-
                }       
+
}       
-
                ul#tabs li a:hover
+
ul#tabs li a:hover
-
                {
+
{
-
                        background-color: #ffffff;
+
background-color: #ffffff;
-
                }
+
}
-
                ul#tabs li a.selected
+
ul#tabs li a.selected
-
                {
+
{
-
                        color: #000; background-color: #ffffff; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em;
+
color: #000; background-color: #ffffff; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em;
-
                }
+
}
-
                div.tabContent
+
div.tabContent
-
                {
+
{
-
                        border: 1px solid #000000;  
+
border: 1px solid #000000;  
-
                        background-color: #ffffff;  
+
background-color: #ffffff;  
-
                        float: left;  
+
float: left;  
-
                        border-radius: 5px;  
+
border-radius: 5px;  
-
                        width: 100%;  
+
width: 100%;  
-
                        padding: 0.5em;
+
padding: 0.5em;
-
                }
+
}
-
                div.tabContent.hide
+
div.tabContent.hide
-
                {
+
{
-
                        display: none;
+
display: none;
-
                }
+
}
-
        </style>
+
    </style>
-
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
        <script>
+
    <script>
<!-- Tabs -->
<!-- Tabs -->
-
                var tabLinks = new Array();
+
        var tabLinks = new Array();
-
                var contentDivs = new Array();
+
var contentDivs = new Array();
-
 
+
-
                function init()
+
-
                {
+
 +
function init()
 +
{
// Grab the tab links and content divs from the page
// Grab the tab links and content divs from the page
 +
var tabListItems = document.getElementById('tabs').childNodes;
-
                        var tabListItems = document.getElementById('tabs').childNodes;
+
for ( var i = 0; i < tabListItems.length; i++ )
-
 
+
{
-
                        for ( var i = 0; i < tabListItems.length; i++ )
+
if ( tabListItems[i].nodeName == "LI" )
-
                        {
+
{
-
                                if ( tabListItems[i].nodeName == "LI" )
+
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );                                    var id = getHash( tabLink.getAttribute('href') );
-
                                      {
+
tabLinks[id] = tabLink;
-
                                              var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );                                    var id = getHash( tabLink.getAttribute('href') );
+
contentDivs[id] = document.getElementById( id );
-
 
+
}
-
                                              tabLinks[id] = tabLink;
+
}
-
 
+
-
                                              contentDivs[id] = document.getElementById( id );
+
-
                                      }
+
-
 
+
-
                        }
+
// Assign onclick events to the tab links, and
// Assign onclick events to the tab links, and
Line 115: Line 110:
// highlight the first tab
// highlight the first tab
-
                        var i = 0;
+
var i = 0;
-
 
+
-
                        for ( var id in tabLinks )
+
-
                        {
+
-
                                tabLinks[id].onmouseover = showTab;
+
-
                                tabLinks[id].onfocus = function() { this.blur() };
+
-
                                if ( i == 0 ) tabLinks[id].className = 'selected';
+
-
                                i++;
+
for ( var id in tabLinks )
-
                        }
+
{
 +
tabLinks[id].onmouseover = showTab;
 +
tabLinks[id].onfocus = function() { this.blur() };
 +
if ( i == 0 ) tabLinks[id].className = 'selected';
 +
i++;
 +
}
// Hide all content divs except the first
// Hide all content divs except the first
-
                        var i = 0;
+
var i = 0;
-
                        for ( var id in contentDivs )
+
for ( var id in contentDivs )
-
                        {
+
{
-
                                if ( i != 0 ) contentDivs[id].className = 'tabContent hide';   
+
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';   
-
                                i++;
+
i++;
-
                        }
+
}
-
                }
+
        }
-
  function showTab()
+
function showTab()
 +
{
 +
var selectedId = getHash( this.getAttribute('href') );
 +
// Highlight the selected tab, and dim all others.
 +
// 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;
 +
}
-
  {
+
function getFirstChildWithTagName( element, tagName )
-
    var selectedId = getHash( this.getAttribute('href') );
+
{
-
    // Highlight the selected tab, and dim all others.
+
for ( var i = 0; i < element.childNodes.length; i++ )
-
    // Also show the selected content div, and hide all others.
+
{
-
    for ( var id in contentDivs )
+
if ( element.childNodes[i].nodeName == tagName )
-
    {
+
return element.childNodes[i];
-
    if ( id == selectedId )
+
}
-
    {
+
}
-
      tabLinks[id].className = 'selected';
+
function getHash( url )
-
      contentDivs[id].className = 'tabContent';
+
{
-
    }
+
var hashPos = url.lastIndexOf ( '#' );
-
    else
+
return url.substring( hashPos + 1 );
-
    {
+
}
-
      tabLinks[id].className = '';
+
</script>
-
      contentDivs[id].className = 'tabContent hide';
 
-
    }
 
-
 
-
    }
 
-
 
-
    // Stop the browser following the link
 
-
 
-
    return false;
 
-
 
-
  }
 
-
 
-
  function getFirstChildWithTagName( element, tagName )
 
-
 
-
  {
 
-
 
-
    for ( var i = 0; i < element.childNodes.length; i++ )
 
-
 
-
    {
 
-
 
-
    if ( element.childNodes[i].nodeName == tagName )
 
-
 
-
    return element.childNodes[i];
 
-
 
-
    }
 
-
 
-
  }
 
-
 
-
  function getHash( url )
 
-
 
-
  {
 
-
 
-
    var hashPos = url.lastIndexOf ( '#' );
 
-
 
-
    return url.substring( hashPos + 1 );
 
-
 
-
  }
 
-
 
-
  </script>
 
-
 
-
</head>
 
Line 214: Line 188:
  <body onload="init()" background-image=" url("http://images.dailytech.com/nimage/Nyan_Cat_Wide.jpg")">
  <body onload="init()" background-image=" url("http://images.dailytech.com/nimage/Nyan_Cat_Wide.jpg")">
-
  <!--main content →
+
<!--main content →
-
  <!--Tabs(NOT SLIDESHOW!) -->
+
<!--Tabs(NOT SLIDESHOW!) -->
<div style="padding-left: 10px;">
<div style="padding-left: 10px;">
<ul id="tabs">
<ul id="tabs">
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School#home">Home</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School#home">Home</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Team#team">Members</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Team#team">Members</a></li>
-
 
<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/Project#project">Project</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack#measure">Measurement Track</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Measurementtrack#measure">Measurement Track</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Parts#parts">Parts</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Parts#parts">Parts</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Modeling#models">Models</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Modeling#models">Models</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Notebook#notebook">Notebook</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Notebook#notebook">Notebook</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Safety#safety">Safety</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Safety#safety">Safety</a></li>
-
 
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Attributions#attrib">Attributions</a></li>
<li><a href="https://2014.igem.org/Team:Gaston_Day_School/Attributions#attrib">Attributions</a></li>
-
 
<li><a href="https://2014.igem.org/Main_Page#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li>
<li><a href="https://2014.igem.org/Main_Page#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li>
-
 
</ul>
</ul>
</div>
</div>

Revision as of 13:59, 14 July 2014

Home

in tha hizzle

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/Measurementtrack"