Team:WHU-China/assets/main.js

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
// Transition
+
/* pre init */
-
var switchMain = function ( target ) {
+
#globalWrapper, #content, #bodyContent { margin: 0; padding: 0; width: 100%; border: 0; line-height: inherit; height: 100%;}
-
    current = $( "main>section.current" );
+
#content>a, #content>h1, #contentSub, #bodyContent>p, #bodyContent>h3, #bodyContent>div, #footer-box { display: none; }
-
    current.slideUp();
+
-
    target.slideDown();
+
-
    current.removeClass( "current" );
+
-
    target.addClass( "current" );
+
-
};
+
-
var switchNav = function ( target ) {
+
#top-section { position: absolute; border: 0; height: 12px; font-size: 14px; z-index: 2000; }
-
    current = $( "nav>ul>li.current" );
+
#p-logo, #search-controls { display: none; }
-
    current.next().slideUp();
+
#top-section .left-menu ul { display: none; }
-
    target.next().slideDown();
+
#top-section:hover .left-menu ul { display: block; }
-
    current.removeClass( "current" );
+
#top-section ul { margin: 0.3em 0px 0px 1.5em; }
-
    target.addClass( "current" );
+
-
};
+
-
var switchSection = function ( sectionName ) {
+
#globalWrapper { font-size: inherit; }
-
    if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
+
-
    switchMain( $( "#" + sectionName ) );
+
-
    switchNav( $( "nav>ul>li." + sectionName ) );
+
-
};
+
-
var changeSection = function ( sectionName ) {
+
/* init */
-
    if ( $( "#" + sectionName ).is( $( "main>section.current" ) ) ) { return; }
+
html { height: 100%; }
-
    switchMain( $( "#" + sectionName ) );
+
* { padding: 0; margin: 0; }
-
    switchNav( $( "nav>ul>li." + sectionName ) );
+
body { height: 100%; background: transparent; font-size: 16px; font-family: serif; line-height: 1.15em; }
-
    window.history.pushState( { section: sectionName }, '', sectionName );
+
a, a:hover, a:active, a:link { color: inherit; text-decoration: none; }
-
};
+
/* a[name] { position: absolute; top: -3em; } */
-
$( "nav>ul>li" ).click(function () {
+
ul, li { padding: 0; margin: 0; line-height: inherit; }
-
    sectionName = '';
+
ul { list-style: none; }
-
    Names = [
+
-
"home", "project", "results", "modeling", "achieve",
+
-
"practice", "team", "safety", "notebook"
+
-
    ];
+
-
    for (i in Names) {
+
-
if ( $( this ).hasClass( Names[i] ) ) {
+
-
    sectionName = Names[i];
+
-
}
+
-
    }
+
-
    changeSection( sectionName );
+
.hidden { display: none; visibility: visible; }
-
    return false;
+
.no-exist { display: none; }
-
});
+
-
window.onpopstate = function (event) {
+
/* dirty default removed */
-
  if (event && event.state) {
+
nav a { color: inherit !important; }
-
      switchSection( event.state.section );
+
ul, li { line-height: inherit !important; }
-
  }
+
-
};
+
-
window.history.pushState( { section: "home"}, '' );
+
/* nav */
 +
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; }

Revision as of 03:37, 18 October 2014

/* pre init */

  1. globalWrapper, #content, #bodyContent { margin: 0; padding: 0; width: 100%; border: 0; line-height: inherit; height: 100%;}
  2. content>a, #content>h1, #contentSub, #bodyContent>p, #bodyContent>h3, #bodyContent>div, #footer-box { display: none; }
  1. top-section { position: absolute; border: 0; height: 12px; font-size: 14px; z-index: 2000; }
  2. p-logo, #search-controls { display: none; }
  3. top-section .left-menu ul { display: none; }
  4. top-section:hover .left-menu ul { display: block; }
  5. top-section ul { margin: 0.3em 0px 0px 1.5em; }
  1. globalWrapper { font-size: inherit; }

/* init */ html { height: 100%; }

  • { padding: 0; margin: 0; }

body { height: 100%; background: transparent; font-size: 16px; font-family: serif; line-height: 1.15em; } a, a:hover, a:active, a:link { color: inherit; text-decoration: none; } /* a[name] { position: absolute; top: -3em; } */

ul, li { padding: 0; margin: 0; line-height: inherit; } ul { list-style: none; }

.hidden { display: none; visibility: visible; } .no-exist { display: none; }

/* dirty default removed */ nav a { color: inherit !important; } ul, li { line-height: inherit !important; }

/* nav */ 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;

}

  1. home { 
   background-image: url(footages/backgrounds/wacaco/b1.png);

}

  1. project { 
   background-image: url(footages/backgrounds/wacaco/b2.png);

}

  1. results { 
   background-image: url(footages/backgrounds/wacaco/b3.png);

}

  1. modeling { 
   background-image: url(footages/backgrounds/wacaco/b4.png);

}

  1. achieve { 
   background-image: url(footages/backgrounds/wacaco/b5.png);

}

  1. practice { 
   background-image: url(footages/backgrounds/wacaco/b6.png);

}

  1. team { 
   background-image: url(footages/backgrounds/wacaco/b3.png);

}

  1. safety { 
   background-image: url(footages/backgrounds/wacaco/b4.png);

}

  1. 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; }

Retrieved from "http://2014.igem.org/Team:WHU-China/assets/main.js"