Difference between revisions of "Template:Team:DTU-Denmark/header.html"

Line 20: Line 20:
 
             #content{ width: 100%; margin: 0; padding: 0;}
 
             #content{ width: 100%; margin: 0; padding: 0;}
  
−
/* Makes up for standart css on the wiki*/
+
      /* Makes up for standart css on the wiki*/
−
             #globalWrapper, #content {
+
             #globalWrapper, #content {  
 
                 width: 100%;
 
                 width: 100%;
 
                 height: 100%;
 
                 height: 100%;
Line 50: Line 50:
 
             }
 
             }
 
              
 
              
−
#headerWrapper #current-navigation a {
+
      #headerWrapper #current-navigation a {
 
                 background-color:#750000;
 
                 background-color:#750000;
−
            color:white;
+
              color:white;
 
             }
 
             }
  
 
             #Topnav {
 
             #Topnav {
−
            background-color: white;
+
              background-color: white;
 
             }
 
             }
  
 +
            #Topnav a:hover,
 
             #Topnav a.hover,
 
             #Topnav a.hover,
 
             #headerWrapper #current-navigation a.hover{
 
             #headerWrapper #current-navigation a.hover{
Line 76: Line 77:
  
 
             .nav-item {
 
             .nav-item {
−
            float: left;
+
              float: left;
 
                 line-height: 65px;
 
                 line-height: 65px;
 
                 padding: 10px 10px 0px 10px;
 
                 padding: 10px 10px 0px 10px;
Line 83: Line 84:
  
  
−
/*Dimensions and placement of logo*/
+
      /*Dimensions and placement of logo*/
 
             #logo {
 
             #logo {
 
                 float: left;
 
                 float: left;
Line 100: Line 101:
 
             /* do not show mobile interactions*/
 
             /* do not show mobile interactions*/
 
             .mobile-menue {
 
             .mobile-menue {
−
            display: none;
+
              display: none;
 
             }
 
             }
  
Line 122: Line 123:
  
 
             #sub-navigation {
 
             #sub-navigation {
−
            color:white;
+
              color:white;
 
                 text-align: right;
 
                 text-align: right;
 
                 font-size: 0.9em;
 
                 font-size: 0.9em;
Line 168: Line 169:
 
                  
 
                  
 
                 #headerWrapper {
 
                 #headerWrapper {
−
                background-color:white;
+
                  background-color:white;
−
            }
+
              }
−
           
+
             
−
#headerWrapper #current-navigation a {
+
        #headerWrapper #current-navigation a {
−
                background-color:transparent;
+
                  background-color:transparent;
−
            color:black;
+
                color:black;
−
            }
+
              }
  
−
            #Topnav a.hover,
+
              #Topnav a.hover,
−
            #headerWrapper #current-navigation a.hover{
+
              #headerWrapper #current-navigation a.hover{
−
                background-color: #990000;
+
                  background-color: #990000;
−
                color: white;
+
                  color: white;
−
            }
+
              }
  
  
−
            #navigation {
+
              #navigation {
−
            margin: 0px 36px 0px 0px;
+
                margin: 0px 36px 0px 0px;
−
            background-color: white;
+
                background-color: white;
−
            /*display: none;*/
+
                /*display: none;*/
−
                float: none;
+
                  float: none;
−
                text-align: center;
+
                  text-align: center;
−
            }
+
              }
  
  
−
            .nav-item {
+
              .nav-item {
−
            width: 100%;
+
                width: 100%;
−
            float: none;
+
                float: none;
−
            display: none;
+
                display: none;
−
                line-height: 40px;
+
                  line-height: 40px;
−
                padding: 0px;
+
                  padding: 0px;
−
                border-bottom: 1px solid #990000;
+
                  border-bottom: 1px solid #990000;
−
            }
+
              }
  
  
−
/*Dimensions and placement of logo*/
+
        /*Dimensions and placement of logo*/
−
            #logo {
+
              #logo {
−
            width: 100%;
+
                width: 100%;
−
                float: left;
+
                  float: left;
−
                height: 85px;
+
                  height: 85px;
−
                padding-top: 15px; /* control that it is below the iGEM topbar*/
+
                  padding-top: 15px; /* control that it is below the iGEM topbar*/
−
                margin-bottom: 0px;
+
                  margin-bottom: 0px;
−
                border-bottom: 3px solid #990000;
+
                  border-bottom: 3px solid #990000;
−
            }
+
              }
−
                     
+
                       
−
            #logo img.BioBuilders{
+
              #logo img.BioBuilders{
−
                width: 110px;
+
                  width: 110px;
−
                background: transparent;
+
                  background: transparent;
−
                margin-top: 2px;
+
                  margin-top: 2px;
−
                margin-bottom: 2px;
+
                  margin-bottom: 2px;
−
                padding-right: 0px;
+
                  padding-right: 0px;
−
            }   
+
              }   
  
−
            /* Display mobile menue*/
+
              /* Display mobile menue*/
−
            .mobile-menue {
+
              .mobile-menue {
−
            margin: 25px 10px;
+
                margin: 25px 10px;
−
            display: inline;
+
                display: inline;
−
            float: right;
+
                float: right;
−
            }
+
              }
  
−
            #arrow{
+
              #arrow{
−
            display: none;
+
                display: none;
−
            }
+
              }
  
−
           
+
             
−
           
+
             
−
            /*Text of sub nav*/
+
              /*Text of sub nav*/
−
            #sub-navigation-wrapper a {
+
              #sub-navigation-wrapper a {
−
                text-decoration:none;
+
                  text-decoration:none;
−
                color:black;
+
                  color:black;
−
            }
+
              }
−
           
+
             
−
            /*Dimensions and look of sub nav*/
+
              /*Dimensions and look of sub nav*/
−
            #sub-navigation-wrapper {
+
              #sub-navigation-wrapper {
−
                clear:both;
+
                  clear:both;
−
                position:relative;
+
                  position:relative;
−
                background-color: white;
+
                  background-color: white;
−
                color: white;
+
                  color: white;
−
                height: 0px;
+
                  height: 0px;
−
                padding-top: 7px;
+
                  padding-top: 7px;
−
                -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
+
                  -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
−
                -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0.75);
+
                  -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0.75);
−
                box-shadow:        0px 0px 0px 0px rgba(50, 50, 50, 0.75);
+
                  box-shadow:        0px 0px 0px 0px rgba(50, 50, 50, 0.75);
−
            }
+
              }
  
−
            #sub-navigation {
+
              #sub-navigation {
−
            width: 100%;
+
                width: 100%;
−
            color:white;
+
                color:white;
−
                text-align: center;
+
                  text-align: center;
−
                font-size: 0.9em;
+
                  font-size: 0.9em;
−
                position: fixed;
+
                  position: fixed;
−
                margin-top: -3px;
+
                  margin-top: -3px;
−
                font-weight:200;
+
                  font-weight:200;
−
            }
+
              }
  
−
            #sub-navigation li {
+
              #sub-navigation li {
−
            margin: 0px 37px 0px 0px;
+
                margin: 0px 37px 0px 0px;
−
                display: block;
+
                  display: block;
−
            }
+
              }
  
−
            .sub-nav-item{
+
              .sub-nav-item{
−
                line-height: 40px;
+
                  line-height: 40px;
−
                padding: 0px;
+
                  padding: 0px;
−
            }
+
              }
  
  
−
            /* Only show active subs */
+
              /* Only show active subs */
−
            #sub-navigation > ul {
+
              #sub-navigation > ul {
−
                display:none;
+
                  display:none;
−
            }
+
              }
  
  
−
            /* This makes the seperators between the sub-navigation elements */
+
              /* This makes the seperators between the sub-navigation elements */
−
            #sub-navigation li:before{
+
              #sub-navigation li:before{
−
                content:"";
+
                  content:"";
−
                padding:0px;
+
                  padding:0px;
−
                color:black;  
+
                  color:black;  
−
            }
+
              }
−
    }
+
        }
  
 
                          
 
                          
Line 307: Line 308:
  
 
                 <button id="arrow" class="mobile-menue">&#8678;</button>
 
                 <button id="arrow" class="mobile-menue">&#8678;</button>
−
 
+
         
  
  
Line 390: Line 391:
  
  
−
  <script>
+
    <script>
−
  // Update window when page resizes.
+
      // Update window when page resizes.
−
var windowWidth = $(window).width();
+
    var windowWidth = $(window).width();
−
$(window).resize(function() {
+
    $(window).resize(function() {
−
// Only activate when it changes to moblie navigation.
+
      // Only activate when it changes to moblie navigation.
−
if(windowWidth < 650){
+
      if(windowWidth < 650){
−
    if($(window).width() > 650 ){
+
          if($(window).width() > 650 ){
−
    location.reload();
+
            location.reload();
−
    return;
+
            return;
−
    }
+
          }
−
    }
+
        }
  
−
if(windowWidth > 650){
+
      if(windowWidth > 650){
−
    if($(window).width() < 650 ){
+
          if($(window).width() < 650 ){
−
    location.reload();
+
            location.reload();
−
    return;
+
            return;
−
    }
+
          }
−
    }
+
        }
−
});
+
    });
  
−
  if ( $(window).width() > 650 ){
+
      if ( $(window).width() > 650 ){
−
    // Function to find an show current head and sub menue.
+
        // Function to find an show current head and sub menue.
−
    var show_current_sub = function(){
+
        var show_current_sub = function(){
−
    var current_url = window.location.href
+
          var current_url = window.location.href
 
           current_url = current_url.split("#")[0]
 
           current_url = current_url.split("#")[0]
−
    var search_name = "a[href=\'" + current_url + "\']"
+
          var search_name = "a[href=\'" + current_url + "\']"
−
    var position_link = document.querySelectorAll(search_name);
+
          var position_link = document.querySelectorAll(search_name);
−
    var link_p1 = $(position_link).parent();
+
          var link_p1 = $(position_link).parent();
−
    var link_p2 = $(link_p1).parent();
+
          var link_p2 = $(link_p1).parent();
−
    var link_p3 = $(link_p2).parent();
+
          var link_p3 = $(link_p2).parent();
  
−
    if(link_p2.attr('id') == "nav-items"){
+
          if(link_p2.attr('id') == "nav-items"){
−
    position_link[0].className += " hover"
+
            position_link[0].className += " hover"
−
        link_p1[0].id = "current-navigation";
+
              link_p1[0].id = "current-navigation";
  
−
        for (var i = 0; i < position_link.length; i++) {
+
              for (var i = 0; i < position_link.length; i++) {
−
            var name = position_link[i].id;
+
                  var name = position_link[i].id;
−
        }
+
              }
  
−
        var sub_name = name + "-sub";
+
              var sub_name = name + "-sub";
−
        var current_sub_bar = document.getElementById(sub_name)
+
              var current_sub_bar = document.getElementById(sub_name)
−
        current_sub_bar.className = "active-sub";
+
              current_sub_bar.className = "active-sub";
−
    }
+
          }
  
−
    if(link_p3.attr('id') == "sub-navigation"){
+
          if(link_p3.attr('id') == "sub-navigation"){
−
        link_p2[0].className = "active-sub";
+
              link_p2[0].className = "active-sub";
−
        position_link[0].style.fontWeight = "bold";
+
              position_link[0].style.fontWeight = "bold";
  
−
        var head_name = link_p2[0].id;
+
              var head_name = link_p2[0].id;
−
        head_name = head_name.substring(0, head_name.length - 4);
+
              head_name = head_name.substring(0, head_name.length - 4);
−
        var current_head_a = document.getElementById(head_name);
+
              var current_head_a = document.getElementById(head_name);
−
        current_head_a.className += " hover"
+
              current_head_a.className += " hover"
−
        current_head_li = $(current_head_a).parent();
+
              current_head_li = $(current_head_a).parent();
−
        current_head_li[0].id = "current-navigation";
+
              current_head_li[0].id = "current-navigation";
−
    }
+
          }
−
    }
+
        }
  
−
    // Clear sub menues
+
        // Clear sub menues
−
    var empty_sub = function(){
+
        var empty_sub = function(){
−
      var last_sub_bar = document.getElementsByClassName("active-sub")
+
          var last_sub_bar = document.getElementsByClassName("active-sub")
−
      $(".active-sub").removeClass("active-sub");
+
          $(".active-sub").removeClass("active-sub");
−
      $(".hover").removeClass("hover");
+
          $(".hover").removeClass("hover");
−
    }
+
        }
  
−
    // Open sub menue function
+
        // Open sub menue function
−
    var open_sub = function(cName){
+
        var open_sub = function(cName){
−
      cName = cName.split(" ")[0]
+
          cName = cName.split(" ")[0]
−
      navig = cName + "-sub"
+
          navig = cName + "-sub"
−
      var current_sub_bar = document.getElementById(navig)
+
          var current_sub_bar = document.getElementById(navig)
  
−
      if (current_sub_bar !== null){
+
          if (current_sub_bar !== null){
−
        empty_sub()
+
            empty_sub()
−
        $("." + cName).addClass("hover");
+
            $("." + cName).addClass("hover");
−
        current_sub_bar.className = "active-sub";
+
            current_sub_bar.className = "active-sub";
−
        }
+
            }
−
    }
+
        }
  
−
    // open submenues on hover with delay
+
        // open submenues on hover with delay
−
    var timer;
+
        var timer;
−
    var delay = 400;
+
        var delay = 400;
−
    $(window).hover( function(event) {
+
        $(window).hover( function(event) {
−
      // on mouse in, start a timeout
+
          // on mouse in, start a timeout
−
      timer = setTimeout(function(){
+
          timer = setTimeout(function(){
−
        var cName = event.target.className
+
            var cName = event.target.className
−
        open_sub(cName)
+
            open_sub(cName)
−
      }, delay);
+
          }, delay);
  
−
    }, function() {
+
        }, function() {
−
        // on mouse out, cancel the timer
+
            // on mouse out, cancel the timer
−
        clearTimeout(timer);
+
            clearTimeout(timer);
−
    });
+
        });
  
  
−
    // Header menue function on tuch screen
+
        // Header menue function on tuch screen
−
    flag = false
+
        flag = false
−
    $("#navigation").bind('touchstart', function(event){
+
        $("#navigation").bind('touchstart', function(event){
−
        if (!flag) {
+
            if (!flag) {
−
        // prevents multiple clicks
+
              // prevents multiple clicks
−
        flag = true;
+
              flag = true;
−
        setTimeout(function(){ flag = false; }, 100);
+
              setTimeout(function(){ flag = false; }, 100);
  
−
        // Find sub menue
+
              // Find sub menue
−
        var cName = event.target.className.split(" ")[0]
+
              var cName = event.target.className.split(" ")[0]
−
        var subName = cName + "-sub"
+
              var subName = cName + "-sub"
−
        var subClass = $("#" + subName).attr("class");
+
              var subClass = $("#" + subName).attr("class");
  
−
        // if sub is not open it is opened. Otherwise the link is used.
+
              // if sub is not open it is opened. Otherwise the link is used.
−
        if(subClass !== "active-sub"){
+
              if(subClass !== "active-sub"){
−
        event.preventDefault();
+
              event.preventDefault();
−
        open_sub( cName );
+
              open_sub( cName );
−
        }
+
            }
−
        }
+
            }
−
    });
+
        });
  
−
   
+
       
−
    // Open current sub menue when the window opens
+
        // Open current sub menue when the window opens
−
    $(document).ready( function (){
+
        $(document).ready( function (){
−
      show_current_sub()
+
          show_current_sub()
−
    });
+
        });
  
−
    // Go back to current sub menue
+
        // Go back to current sub menue
−
    var timer_leave;
+
        var timer_leave;
−
    $("div#headerWrapper").hover( function() {
+
        $("div#headerWrapper").hover( function() {
−
      // on mouse in, start a timeout
+
          // on mouse in, start a timeout
−
      clearTimeout(timer_leave);
+
          clearTimeout(timer_leave);
 +
        }, function() {
 +
            // on mouse out, cancel the timer
 +
            timer_leave = setTimeout(function(){
 +
            empty_sub()
 +
                show_current_sub()
 +
          }, delay);
 +
        });
  
−
    }, function() {
+
    } else{
−
        // on mouse out, cancel the timer
+
−
        timer_leave = setTimeout(function(){
+
−
        empty_sub()
+
−
          show_current_sub()
+
−
      }, delay);
+
−
    });
+
  
−
} else{
+
      // Open moblie menue
 +
      var flag = false
 +
      var menu_open = false
  
−
// Open moblie menue
+
      $("#hamburger").click(function(){
−
var flag = false
+
        if (!flag) {
−
var menu_open = false
+
              // prevents multiple clicks
 +
              flag = true;
 +
              setTimeout(function(){ flag = false; }, 100);
  
−
$("#hamburger").click(function(){
+
          if (menu_open){
−
if (!flag) {
+
            $(".nav-item").css("display","none")
−
        // prevents multiple clicks
+
            menu_open = false
−
        flag = true;
+
            $("#headerWrapper").css("height", "")
−
        setTimeout(function(){ flag = false; }, 100);
+
          } else{
 +
            $(".nav-item").css("display","block")
 +
            menu_open = true
 +
            $("#headerWrapper").css("height", "100%")
 +
          }
 +
          $("#arrow").css("display","none");
 +
        }
 +
      });
  
−
if (menu_open){
+
      // Choose in mobile menue
−
$(".nav-item").css("display","none")
+
      var sub_closed = true
−
menu_open = false
+
      flag = false
−
$("#headerWrapper").css("height", "")
+
        $("#navigation").click(function(event){
−
} else{
+
−
$(".nav-item").css("display","block")
+
−
menu_open = true
+
−
$("#headerWrapper").css("height", "100%")
+
−
}
+
−
$("#arrow").css("display","none");
+
−
}
+
−
});
+
  
−
// Choose in mobile menue
+
          if (!flag) {
−
var sub_closed = true
+
              // prevents multiple clicks
−
flag = false
+
              flag = true;
−
    $("#navigation").click(function(event){
+
              setTimeout(function(){ flag = false; }, 100);
  
−
    if (!flag) {
+
             
−
        // prevents multiple clicks
+
            if (sub_closed){
−
        flag = true;
+
              event.preventDefault();
−
        setTimeout(function(){ flag = false; }, 100);
+
              name = event.target.id;
−
 
+
              $(".nav-item").css("display","none");
−
       
+
              $("#" + name).css("display","block");
−
    if (sub_closed){
+
              sub_closed = false
−
    event.preventDefault();
+
              $("#" + name + "-sub").css("display","block");
−
    name = event.target.id;
+
              $("#arrow").css("display","block");
−
    $(".nav-item").css("display","none");
+
            }
−
    $("#" + name).css("display","block");
+
−
    sub_closed = false
+
−
    $("#" + name + "-sub").css("display","block");
+
−
    $("#arrow").css("display","block");
+
−
    }
+
  
−
    $("#hamburger").click(function(){
+
            $("#hamburger").click(function(){
−
    sub_closed = true
+
              sub_closed = true
−
    $("#" + name + "-sub").css("display","none");
+
              $("#" + name + "-sub").css("display","none");
−
    });
+
            });
  
−
    $("#arrow").click(function(){
+
            $("#arrow").click(function(){
−
    sub_closed = true
+
              sub_closed = true
−
    $("#" + name + "-sub").css("display","none");
+
              $("#" + name + "-sub").css("display","none");
−
    $(".nav-item").css("display","block");
+
              $(".nav-item").css("display","block");
−
    $("#arrow").css("display","none");
+
              $("#arrow").css("display","none");
−
    });
+
            });
−
    }
+
          }
−
    });
+
        });
−
}
+
    }
−
  </script>
+
    </script>
  
−
  <!-- bootstrap javascript-->
+
    <!-- bootstrap javascript-->
−
  <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script>
+
    <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 10:47, 25 August 2016

New HTML template for the wiki