"
Team:Gaston Day School
From 2014.igem.org
| Line 1: | Line 1: | ||
{{CSS/Main}} | {{CSS/Main}} | ||
| - | + | html> | |
<head> | <head> | ||
<iframe src="http://www.staggeringbeauty.com/" style="border: 1px inset #ddd" width="498" height="598"></iframe> | <iframe src="http://www.staggeringbeauty.com/" style="border: 1px inset #ddd" width="498" height="598"></iframe> | ||
Revision as of 15:32, 11 June 2014
html> <head>
<iframe src="http://www.staggeringbeauty.com/" style="border: 1px inset #ddd" width="498" height="598"></iframe>
<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); }
#slideshow > div { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }
#slideshow > div > img { height:100%; width: 100%; float: left; }
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
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 a:hover { 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 { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; } </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 6000);
var tabLinks = new Array();
var contentDivs = new Array();
function init() { // 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 // 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 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>
</head>
<body onload="init()">
" width="55px" position="absolute"></a>Contents |
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!
</body> </html>
