|
|
| Line 65: |
Line 65: |
| | #contentContainer { | | #contentContainer { |
| | margin-right: 20%; | | margin-right: 20%; |
| − | margin-left: 20% | + | margin-left: 20%; |
| | margin: 0 auto; | | margin: 0 auto; |
| | height: auto; | | height: auto; |
| Line 239: |
Line 239: |
| | z-index: 1; | | z-index: 1; |
| | width: auto; | | width: auto; |
| − | max-width: 950px;
| |
| − | height: auto;
| |
| − | background: #ffffff;
| |
| − | font-style: bold;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /*Styles the list items to become menu buttons */
| |
| − | #menuContainer ul li {
| |
| − | display: inline-block;
| |
| − | width: 100px;
| |
| − | padding: 21px 5px 20px 5px;
| |
| − | position: relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li:hover {
| |
| − | background: #d9d9d9;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*HIde the submenus and removes the padding */
| |
| − | #menuContainer ul li ul {
| |
| − | display: none;
| |
| − | margin-top: 20px;
| |
| − | position: absolute;
| |
| − | margin-left: -5px;
| |
| − | z-index: 1;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − | /*Shows the submenus once you hover*/
| |
| − | #menuContainer ul li:hover ul {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*style the submenu buttons*/
| |
| − | #menuContainer ul li ul li {
| |
| − | display: block;
| |
| − | background: #0E232F;
| |
| − | padding: 10px 5px 10px 5px;
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li ul li:hover {
| |
| − | background: #444444;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #menuContainer li ul a {
| |
| − | color: #ffffff;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*CLASSES */
| |
| − | /*Clear class for all the pages, adds spacing too*/
| |
| − | .clear{
| |
| − | clear:both;
| |
| − | height: 10px;
| |
| − | }
| |
| − |
| |
| − | /* highlight box for special messages */
| |
| − | .highlightBox {
| |
| − | width:500px;
| |
| − | margin:auto;
| |
| − | background-color: #E8D5B7;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | padding: 15px;
| |
| − | padding-top: 5px;
| |
| − | }
| |
| − | /* side bar css */
| |
| − | #sidebar {
| |
| − | width:200px;
| |
| − | float:right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* navigation */
| |
| − | nav {
| |
| − | width:300px;
| |
| − | background-color:rgb(240,240,240);
| |
| − | border:solid 1px rgb(220,220,220);
| |
| − | padding:0 12px;
| |
| − | }
| |
| − |
| |
| − | nav.stick {
| |
| − | position: fixed;
| |
| − | top: 12px;
| |
| − | z-index: 10000;
| |
| − | margin-top:12px;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png");
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | nav li a {
| |
| − |
| |
| − | color:rgb(50,50,50);
| |
| − | font-weight:700;
| |
| − | color: #000;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | a.nav-active {
| |
| − | color:#ccc;
| |
| − | }
| |
| − |
| |
| − | 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; font-size: 17px; }
| |
| − | ul#tabs li a:hover { background-color: #f1f0ee; }
| |
| − | ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; }
| |
| − | div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; }
| |
| − | div.tabContent.hide { display: none; }
| |
| − |
| |
| − | </style>
| |
| − | <!-- End of CSS -->
| |
| − | <head>
| |
| − | <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function () {
| |
| − | // Read the cookie and if it's defined scroll to id
| |
| − | var scroll = $.cookie('scroll');
| |
| − | if(scroll){
| |
| − | scrollToID(scroll, 1000);
| |
| − | $.removeCookie('scroll');
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | // Handle event onclick, setting the cookie when the href != #
| |
| − | $('.nav a').click(function (e) {
| |
| − | e.preventDefault();
| |
| − | var id = $(this).data('id');
| |
| − | var href = $(this).attr('href');
| |
| − | if(href === '#'){
| |
| − | scrollToID(id, 1000);
| |
| − | }else{
| |
| − | $.cookie('scroll', id);
| |
| − | window.location.href = href;
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // scrollToID function
| |
| − | function scrollToID(id, speed) {
| |
| − | var offSet = 70;
| |
| − | var obj = $('#' + id).offset();
| |
| − | var targetOffset = obj.top - offSet;
| |
| − | $('html,body').animate({ scrollTop: targetOffset }, speed);
| |
| − | }
| |
| − | $(window).scroll(function(){
| |
| − | var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
| |
| − | var div_top = $('#nav-anchor').offset().top;
| |
| − | if (window_top > div_top) {
| |
| − | $('nav').addClass('stick');
| |
| − | } else {
| |
| − | $('nav').removeClass('stick');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(e){
| |
| − | var str= location.hash;
| |
| − | var n=str.replace("_temp","");
| |
| − | $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | /* to make the sidebar anchor*/
| |
| − |
| |
| − |
| |
| − | 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].onclick = 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>
| |
| − | <!-- Start of the template html elements. -->
| |
| − | <div id ="mainContainer">
| |
| − | <!--This div will close on the page.-->
| |
| − | <div id="bannerContainer">
| |
| − | <br>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- Start of menu -->
| |
| − | <!-- End of menu -->
| |
| − | <!-- Start of content -->
| |
| − | </html>
| |