Difference between revisions of "Template:Team:DTU-Denmark/index.html"
| (2 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
<!-- Bootstrap theme stylesheet --> | <!-- Bootstrap theme stylesheet --> | ||
<link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/bootstrap-theme?action=raw&ctype=text/css" type="text/css"> | <link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/bootstrap-theme?action=raw&ctype=text/css" type="text/css"> | ||
| − | <!-- Bootstrap js | + | <!-- Bootstrap js |
| − | <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>--> |
<!-- Movile navigation stylesheet, include default and components, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ --> | <!-- Movile navigation stylesheet, include default and components, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ --> | ||
| Line 20: | Line 20: | ||
<!-- Javascripts --> | <!-- Javascripts --> | ||
| − | <!-- Hover | + | <!-- Hover |
| − | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/hover-js?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/hover-js?action=raw&ctype=text/javascript"></script> --> |
<!-- Navigationtion, Add to subbar visibility when hovering | <!-- Navigationtion, Add to subbar visibility when hovering | ||
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/nav-js?action=raw&ctype=text/javascript"></script> --> | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/nav-js?action=raw&ctype=text/javascript"></script> --> | ||
| Line 276: | Line 276: | ||
} | } | ||
| − | #Topnav a:hover, | + | /*#Topnav a:hover,*/ |
#Topnav a.hover{ | #Topnav a.hover{ | ||
background-color: #990000; /*4A0000, 750000, | background-color: #990000; /*4A0000, 750000, | ||
| Line 658: | Line 658: | ||
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"); | ||
} | } | ||
| − | // Open sub menue | + | // Open sub menue function |
var open_sub = function(cName){ | var open_sub = function(cName){ | ||
| − | + | cName = cName.split(" ")[0] | |
| − | + | navig = cName + "-sub" | |
| − | navig = | + | |
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"); | ||
current_sub_bar.className = "active-sub"; | current_sub_bar.className = "active-sub"; | ||
} | } | ||
} | } | ||
| − | // | + | // open submenues on hover with delay |
| − | + | var timer; | |
| − | + | var delay = 400; | |
| − | + | $(window).hover( function(event) { | |
| − | + | // on mouse in, start a timeout | |
| + | timer = setTimeout(function(){ | ||
| + | var cName = event.target.className | ||
| + | open_sub(cName) | ||
| + | }, delay); | ||
| − | + | }, function() { | |
| − | + | // on mouse out, cancel the timer | |
| − | + | clearTimeout(timer); | |
}); | }); | ||
| + | |||
// Header menue function on tuch screen | // Header menue function on tuch screen | ||
| Line 688: | Line 694: | ||
$(window).bind('touchstart', function(event){ | $(window).bind('touchstart', function(event){ | ||
if (!flag) { | if (!flag) { | ||
| + | // prevents multiple clicks | ||
flag = true; | flag = true; | ||
setTimeout(function(){ flag = false; }, 100); | setTimeout(function(){ flag = false; }, 100); | ||
| + | // 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(subClass !== "active-sub"){ | if(subClass !== "active-sub"){ | ||
event.preventDefault(); | event.preventDefault(); | ||
| − | |||
open_sub( cName ); | open_sub( cName ); | ||
| − | |||
} | } | ||
} | } | ||
| Line 711: | Line 718: | ||
// Go back to current sub menue | // Go back to current sub menue | ||
| − | $("div#headerWrapper"). | + | var timer_leave; |
| − | + | $("div#headerWrapper").hover( function() { | |
| − | show_current_sub() | + | // on mouse in, start a timeout |
| + | clearTimeout(timer_leave); | ||
| + | |||
| + | }, function() { | ||
| + | // on mouse out, cancel the timer | ||
| + | timer_leave = setTimeout(function(){ | ||
| + | empty_sub() | ||
| + | show_current_sub() | ||
| + | }, delay); | ||
}); | }); | ||
Latest revision as of 08:40, 12 August 2016
