|
|
| Line 42: |
Line 42: |
| | </section> | | </section> |
| | </div><!-- /container --> | | </div><!-- /container --> |
| - | <!--script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script--> | + | <!-- the following script is hosted at https://2014.igem.org/Team:Rutgers/main.js but linking to it only seems to work when it's hosted externally, as follows: --> |
| | + | <script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script> |
| | + | <!-- this needs to be fixed for sure, without this script the site simply will not show anything below the navbar. pretty bad. --> |
| | | | |
| - |
| |
| - | <script>
| |
| - | /**
| |
| - | * cbpFWTabs.js v1.0.0
| |
| - | * http://www.codrops.com
| |
| - | *
| |
| - | * Licensed under the MIT license.
| |
| - | * http://www.opensource.org/licenses/mit-license.php
| |
| - | *
| |
| - | * Copyright 2014, Codrops
| |
| - | * http://www.codrops.com
| |
| - | */
| |
| - | ;( function( window ) {
| |
| - |
| |
| - | 'use strict';
| |
| - |
| |
| - | function extend( a, b ) {
| |
| - | for( var key in b ) {
| |
| - | if( b.hasOwnProperty( key ) ) {
| |
| - | a[key] = b[key];
| |
| - | }
| |
| - | }
| |
| - | return a;
| |
| - | }
| |
| - |
| |
| - | function CBPFWTabs( el, options ) {
| |
| - | this.el = el;
| |
| - | this.options = extend( {}, this.options );
| |
| - | extend( this.options, options );
| |
| - | this._init();
| |
| - | }
| |
| - |
| |
| - | CBPFWTabs.prototype.options = {
| |
| - | start : 0
| |
| - | };
| |
| - |
| |
| - | CBPFWTabs.prototype._init = function() {
| |
| - | // tabs elems
| |
| - | this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
| |
| - | // content items
| |
| - | this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
| |
| - | // current index
| |
| - | this.current = -1;
| |
| - | // show current content item
| |
| - | this._show();
| |
| - | // init events
| |
| - | this._initEvents();
| |
| - | };
| |
| - |
| |
| - | CBPFWTabs.prototype._initEvents = function() {
| |
| - | var self = this;
| |
| - | this.tabs.forEach( function( tab, idx ) {
| |
| - | tab.addEventListener( 'click', function( ev ) {
| |
| - | ev.preventDefault();
| |
| - | self._show( idx );
| |
| - | } );
| |
| - | } );
| |
| - | };
| |
| - |
| |
| - | CBPFWTabs.prototype._show = function( idx ) {
| |
| - | if( this.current >= 0 ) {
| |
| - | this.tabs[ this.current ].className = this.items[ this.current ].className = '';
| |
| - | }
| |
| - | // change current
| |
| - | this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
| |
| - | this.tabs[ this.current ].className = 'tab-current';
| |
| - | this.items[ this.current ].className = 'content-current';
| |
| - | };
| |
| - |
| |
| - | // add to global namespace
| |
| - | window.CBPFWTabs = CBPFWTabs;
| |
| - |
| |
| - | })( window );
| |
| - | </script>
| |
| - |
| |
| - | <script>
| |
| - | (function() {
| |
| - |
| |
| - | [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
| |
| - | new CBPFWTabs( el );
| |
| - | });
| |
| - |
| |
| - | })();
| |
| - | </script>
| |
| | </body> | | </body> |
| | </html> | | </html> |
"
