"

From 2014.igem.org

Revision as of 03:37, 18 October 2014 (view source) Betamint (Talk | contribs) ← Older edit		Latest revision as of 03:55, 18 October 2014 (view source) Betamint (Talk | contribs)
Line 1:		Line 1:
-	/* pre init */	+	// Transition
-	#globalWrapper, #content, #bodyContent { margin: 0; padding: 0; width: 100%; border: 0; line-height: inherit; height: 100%;}	+	var switchMain = function ( target ) {
-	#content>a, #content>h1, #contentSub, #bodyContent>p, #bodyContent>h3, #bodyContent>div, #footer-box { display: none; }	+	current = $( "main>section.current" );
		+	current.slideUp();
		+	target.slideDown();
		+	current.removeClass( "current" );
		+	target.addClass( "current" );
		+	};
-	#top-section { position: absolute; border: 0; height: 12px; font-size: 14px; z-index: 2000; }	+	var switchNav = function ( target ) {
-	#p-logo, #search-controls { display: none; }	+	current = $( "nav>ul>li.current" );
-	#top-section .left-menu ul { display: none; }	+	current.next().slideUp();
-	#top-section:hover .left-menu ul { display: block; }	+	target.next().slideDown();
-	#top-section ul { margin: 0.3em 0px 0px 1.5em; }	+	current.removeClass( "current" );
		+	target.addClass( "current" );
		+	};
-	#globalWrapper { font-size: inherit; }	+	var switchSection = function ( sectionName ) {
		+	if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
		+	switchMain( $( "#" + sectionName ) );
		+	switchNav( $( "nav>ul>li." + sectionName ) );
		+	};
-	/* init */	+	var changeSection = function ( sectionName ) {
-	html { height: 100%; }	+	if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
-	* { padding: 0; margin: 0; }	+	switchMain( $( "#" + sectionName ) );
-	body { height: 100%; background: transparent; font-size: 16px; font-family: serif; line-height: 1.15em; }	+	switchNav( $( "nav>ul>li." + sectionName ) );
-	a, a:hover, a:active, a:link { color: inherit; text-decoration: none; }	+	window.history.pushState( { section: sectionName }, '', sectionName );
-	/* a[name] { position: absolute; top: -3em; } */	+	};
-	ul, li { padding: 0; margin: 0; line-height: inherit; }	+	$( "nav>ul>li" ).click(function () {
-	ul { list-style: none; }	+	sectionName = '';
		+	Names = [
		+	"home", "project", "results", "modeling", "achieve",
		+	"practice", "team", "safety", "notebook"
		+	];
		+	for (i in Names) {
		+	if ( $( this ).hasClass( Names[i] ) ) {
		+	sectionName = Names[i];
		+	}
		+	}
-	.hidden { display: none; visibility: visible; }	+	changeSection( sectionName );
-	.no-exist { display: none; }	+	return false;
		+	});
-	/* dirty default removed */	+	window.onpopstate = function (event) {
-	nav a { color: inherit !important; }	+	if (event && event.state) {
-	ul, li { line-height: inherit !important; }	+	switchSection( event.state.section );
		+	}
		+	};
-	/* nav */	+	window.history.pushState( { section: "home"}, '' );
-	nav {	+
-	position: fixed;	+
-	top: 0;	+
-	left: 0;	+
-	height: 100%;	+
-	width: 14em;	+
-	z-index: 1000;	+
-	background: transparent;	+
-	color: #f3f3f3;	+
-	text-align: right;	+
-	font-family: sans-serif;	+
-	font-weight: 600;	+
-	}	+
-		+
-	nav ul {	+
-	list-style: none;	+
-	}	+
-	nav>ul>li a {	+
-	display: block;	+
-	height: 1em;	+
-	padding: 0.5em;	+
-	}	+
-		+
-	nav>ul>ul {	+
-	padding: 0.2em 0.5em;	+
-	font-size: 0.8em;	+
-	}	+
-	nav>ul>ul>li a {	+
-	display: block;	+
-	padding: 0.2em 0.5em;	+
-	}	+
-		+
-	nav li:hover {	+
-	color: #fff;	+
-	}	+
-	nav li.current {	+
-	color: #fff;	+
-	}	+
-		+
-	/* main */	+
-	main>section {	+
-	position: relative;	+
-	height: 100%;	+
-	padding-left: 15em;	+
-	}	+
-	#home {	+
-	background-image: url(footages/backgrounds/wacaco/b1.png);	+
-	}	+
-	#project {	+
-	background-image: url(footages/backgrounds/wacaco/b2.png);	+
-	}	+
-	#results {	+
-	background-image: url(footages/backgrounds/wacaco/b3.png);	+
-	}	+
-	#modeling {	+
-	background-image: url(footages/backgrounds/wacaco/b4.png);	+
-	}	+
-	#achieve {	+
-	background-image: url(footages/backgrounds/wacaco/b5.png);	+
-	}	+
-	#practice {	+
-	background-image: url(footages/backgrounds/wacaco/b6.png);	+
-	}	+
-	#team {	+
-	background-image: url(footages/backgrounds/wacaco/b3.png);	+
-	}	+
-	#safety {	+
-	background-image: url(footages/backgrounds/wacaco/b4.png);	+
-	}	+
-	#notebook {	+
-	background-image: url(footages/backgrounds/wacaco/b5.png);	+
-	}	+
-		+
-	ref { font-size: 0.6em; }	+
-	main { width: 720px; padding-left: 14em; margin: auto; }	+
-		+
-	.line-wrapper { position: relative; }	+
-	.line-wrapper div { float: left; padding: 1em 20px; }	+
-	.clearfix { clear: both; }	+

---

Latest revision as of 03:55, 18 October 2014

// Transition var switchMain = function ( target ) {

   current = $( "main>section.current" );
   current.slideUp();
   target.slideDown();
   current.removeClass( "current" );
   target.addClass( "current" );

};

var switchNav = function ( target ) {

   current = $( "nav>ul>li.current" );
   current.next().slideUp();
   target.next().slideDown();
   current.removeClass( "current" );
   target.addClass( "current" );

};

var switchSection = function ( sectionName ) {

   if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
   switchMain( $( "#" + sectionName ) );
   switchNav( $( "nav>ul>li." + sectionName ) );

};

var changeSection = function ( sectionName ) {

   if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
   switchMain( $( "#" + sectionName ) );
   switchNav( $( "nav>ul>li." + sectionName ) );
   window.history.pushState( { section: sectionName }, , sectionName );

};

$( "nav>ul>li" ).click(function () {

   sectionName = ;
   Names = [

"home", "project", "results", "modeling", "achieve", "practice", "team", "safety", "notebook"

   ];
   for (i in Names) {

if ( $( this ).hasClass( Names[i] ) ) { sectionName = Names[i]; }

   }

   changeSection( sectionName );
   return false;

});

window.onpopstate = function (event) {

 if (event && event.state) {
     switchSection( event.state.section );
 }

};

window.history.pushState( { section: "home"}, );