Difference between revisions of "Template:Washington"

(Undo revision 355292 by Efawe (talk))
(Undo revision 355222 by Efawe (talk))
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>

Revision as of 15:38, 18 September 2015