Team:Gaston Day School/Parts
From 2014.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
{ | { | ||
text-align: center; | text-align: center; | ||
- | + | Width: 100%; | |
} | } | ||
Line 17: | Line 17: | ||
float: left; | float: left; | ||
width: 16%; | width: 16%; | ||
- | + | margin:10px; | |
- | + | Border: 1px solid #000000; | |
- | + | Background-color: #ffffff; | |
} | } | ||
- | + | body | |
- | + | { | |
- | + | font-size: 80%; | |
- | + | font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; | |
- | + | background-image: url("http://newevolutiondesigns.com/images/freebies/retro-wallpaper-1.jpg"); | |
- | + | width:80%; | |
- | + | margin-left: 10%; | |
- | + | margin-right: 10%; | |
- | + | } | |
- | + | ul#tabs | |
- | + | { | |
- | + | list-style-type: none; padding: 0 0 0.3em 0; | |
- | + | } | |
- | + | ul#tabs li | |
- | + | { | |
- | + | display: inline; | |
- | + | } | |
- | + | ||
- | + | ul#tabs li a | |
- | + | { | |
- | + | color: #42454a; | |
- | + | background-color: #fefefe; | |
- | + | border: 1px solid #000000; | |
- | + | border-bottom: none; | |
- | + | padding: 0.3em; | |
- | + | border-radius: 5px; | |
- | + | text-decoration: none; | |
- | + | } | |
- | + | ul#tabs li a:hover | |
- | + | { | |
- | + | background-color: #ffffff; | |
- | + | } | |
- | + | ul#tabs li a.selected | |
- | + | { | |
- | + | color: #000; background-color: #ffffff; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; | |
- | + | } | |
- | + | div.tabContent | |
- | + | { | |
- | + | border: 1px solid #000000; | |
- | + | background-color: #ffffff; | |
- | + | float: left; | |
- | + | border-radius: 5px; | |
- | + | width: 100%; | |
- | + | padding: 0.5em; | |
- | + | } | |
- | + | div.tabContent.hide | |
- | + | { | |
- | + | display: none; | |
- | + | } | |
- | + | </style> | |
- | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
- | + | <script> | |
<!-- Tabs --> | <!-- Tabs --> | ||
- | + | var tabLinks = new Array(); | |
- | + | var contentDivs = new Array(); | |
- | + | ||
- | + | ||
- | + | ||
+ | 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; | ||
- | + | 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 | // Assign onclick events to the tab links, and | ||
Line 115: | Line 110: | ||
// highlight the first tab | // highlight the first tab | ||
- | + | 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++; | |
- | + | } | |
- | + | ||
// Hide all content divs except the first | // Hide all content divs except the first | ||
- | + | var i = 0; | |
- | + | for ( var id in contentDivs ) | |
- | + | { | |
- | + | if ( i != 0 ) contentDivs[id].className = 'tabContent hide'; | |
- | + | i++; | |
- | + | } | |
- | + | } | |
- | + | 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 ) | |
- | + | { | |
- | + | 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> | |
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
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 → | |
- | + | <!--Tabs(NOT SLIDESHOW!) --> | |
- | <div style="padding-left: 10px;"> | + | <div style="padding-left: 10px;"> |
- | + | <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/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/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/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/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/Main_Page#igem"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" position="absolute"></a></li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<!--Tab Content--> | <!--Tab Content--> | ||
- | + | <div class="tabContent" id="home"> | |
- | + | <h2>Home</h2> | |
- | + | <p> in tha hizzle</p> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <div class="tabContent" id="team"> | |
+ | <h2>Team</h2> | ||
+ | <p>Teem stuff</p> | ||
+ | </div> | ||
- | + | <div class="tabContent" id="project"> | |
+ | <h2>Project</h2> | ||
+ | <p>Project things </p> | ||
+ | </div> | ||
- | + | <div class="tabContent" id="measure"> | |
+ | <h2>Measurement Track</h2> | ||
+ | <p>Measurement stuff </p> | ||
+ | </div> | ||
- | + | <div class="tabContent" id="parts"> | |
+ | <h2>Parts</h2> | ||
+ | <p>Parts </p> | ||
+ | </div> | ||
<div class="tabContent" id="models"> | <div class="tabContent" id="models"> |
Revision as of 14:03, 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!