Difference between revisions of "Template:Team:Bielefeld-CeBiTec/JS"

m (small id fix)
(Switched from mouseover to mousedown events. Navbar items wiht drop down can collapse and expand with a click. Expanded elements are highlighted like active tabs.)
Line 32: Line 32:
 
$(window).on('load', function() {
 
$(window).on('load', function() {
 
hideNavbars();
 
hideNavbars();
 +
});
 +
 +
$(window).on('load', function() {
 +
$story = ["https://2017.igem.org/Team:Bielefeld-CeBiTec",
 +
"https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair",
 +
"https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair/unnatural_base_pairs"];
 +
 
});
 
});
  
Line 51: Line 58:
 
$("#navbar-results-toolbox").hide();
 
$("#navbar-results-toolbox").hide();
 
$("#navbar-results-parts").hide();
 
$("#navbar-results-parts").hide();
 +
}
 +
 +
function unhighlightTabs($x) {
 +
if ($x == true) {
 +
$objects = [$("#project-ubp"), $("#project-translation"), $("#project-toolbox"), $("#results-ubp"),
 +
$("#results-translation"), $("#results-toolbox"), $("#results-parts")];
 +
} else {
 +
$objects = [$("#project"), $("#results"), $("#hp"), $("#team"), $("#notebook"), $("#project-ubp"),
 +
$("#project-translation"), $("#project-toolbox"), $("#results-ubp"), $("#results-translation"),
 +
$("#results-toolbox"), $("#results-parts")];
 +
}
 +
for (i = 0; i < $objects.length; i++) {
 +
$object = $objects[i];
 +
if ($object.attr("class") == "navbar active highlight") {
 +
$object.attr("class", "navbar active");
 +
} else if ($object.attr("class") == "navbar highlight") {
 +
$object.attr("class", "navbar");
 +
} else if ($object.attr("class") == "sub-navbar-item active highlight") {
 +
$object.attr("class", "sub-navbar-item active");
 +
} else if ($object.attr("class") == "sub-navbar-item highlight") {
 +
$object.attr("class", "sub-navbar-item");
 +
}
 +
}
 
}
 
}
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
     $("li.navbar, li.sub-navbar-item").mouseover(function() {
+
     $("li.navbar, li.sub-navbar-item").mousedown(function() {
 
$name = this.id;
 
$name = this.id;
−
+
$class = $(this).attr("class");
 
if ($name == "project") {
 
if ($name == "project") {
−
$(".sub-navbar").show();
+
if ($class == "navbar" || $class == "navbar active") {
−
hideNavbars();
+
unhighlightTabs(false);
−
$("#navbar-project").show();
+
$(".sub-navbar").show();
 +
hideNavbars();
 +
$("#navbar-project").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs(false);
 +
}
 
} else if ($name == "results") {
 
} else if ($name == "results") {
−
$(".sub-navbar").show();
+
if ($class == "navbar" || $class == "navbar active") {
−
hideNavbars();
+
unhighlightTabs(false);
−
$("#navbar-results").show();
+
$(".sub-navbar").show();
 +
hideNavbars();
 +
$("#navbar-results").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs(false);
 +
}
 
} else if ($name == "hp") {
 
} else if ($name == "hp") {
−
$(".sub-navbar").show();
+
if ($class == "navbar" || $class == "navbar active") {
−
hideNavbars();
+
unhighlightTabs(false);
−
$("#navbar-hp").show();
+
$(".sub-navbar").show();
 +
hideNavbars();
 +
$("#navbar-hp").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs(false);
 +
}
 
} else if ($name == "team") {
 
} else if ($name == "team") {
−
$(".sub-navbar").show();
+
if ($class == "navbar" || $class == "navbar active") {
−
hideNavbars();
+
unhighlightTabs(false);
−
$("#navbar-team").show();
+
$(".sub-navbar").show();
 +
hideNavbars();
 +
$("#navbar-team").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs(false);
 +
}
 
} else if ($name == "notebook") {
 
} else if ($name == "notebook") {
−
$(".sub-navbar").show();
+
if ($class == "navbar" || $class == "navbar active") {
−
hideNavbars();
+
unhighlightTabs(false);
−
$("#navbar-notebook").show();
+
$(".sub-navbar").show();
 +
hideNavbars();
 +
$("#navbar-notebook").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs(false);
 +
}
 
} else if ($name == "project-ubp") {
 
} else if ($name == "project-ubp") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-project-ubp").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-project-ubp").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "project-translation") {
 
} else if ($name == "project-translation") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-project-translation").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-project-translation").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "project-toolbox") {
 
} else if ($name == "project-toolbox") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-project-toolbox").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-project-toolbox").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "results-ubp") {
 
} else if ($name == "results-ubp") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-results-ubp").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-results-ubp").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "results-translation") {
 
} else if ($name == "results-translation") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-results-translation").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-results-translation").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "results-toolbox") {
 
} else if ($name == "results-toolbox") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-results-toolbox").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-results-toolbox").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "results-parts") {
 
} else if ($name == "results-parts") {
−
$(".sub-navbar").show();
+
if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") {
−
hideNavbarsSub();
+
unhighlightTabs(true);
−
$("#navbar-results-parts").show();
+
$(".sub-navbar").show();
 +
hideNavbarsSub();
 +
$("#navbar-results-parts").show();
 +
$(this).attr("class", $class + " highlight");
 +
} else {
 +
hideNavbarsSub();
 +
unhighlightTabs(true);
 +
}
 
} else if ($name == "home" || $name == "partners" || $name == "collaborations" || $name == "modelling" || $name == "hardware") {
 
} else if ($name == "home" || $name == "partners" || $name == "collaborations" || $name == "modelling" || $name == "hardware") {
 
hideNavbarsSub();
 
hideNavbarsSub();
Line 114: Line 233:
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
     $(".contentbox").mouseover(function() {
+
     $("body").mousedown(function( event ) {
−
$(".sub-navbar").hide();
+
//$(".test").html($("#project").attr("class"));
−
hideNavbars();
+
if (event.pageY - $(document).scrollTop() > 65 + $(".sub-navbar").outerHeight()) {
−
+
$(".sub-navbar").hide();
 +
hideNavbars();
 +
unhighlightTabs();
 +
}
 
     });
 
     });
 
});
 
});
−
 
  
  
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 04:31, 28 August 2017