(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.) |
|||
(56 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<script> | <script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
$(document).ready(function() { | $(document).ready(function() { | ||
Line 30: | Line 19: | ||
}); | }); | ||
− | $(window).on(' | + | function resizeNavbar() { |
− | + | ||
+ | $imgSrc = $("#logo-img").attr("src"); | ||
+ | if ($("#logo-img").attr("class") == "navbar center shrink") { | ||
+ | if ($imgSrc == "https://static.igem.org/mediawiki/2017/4/4a/T--Bielefeld-CeBiTec--expand_monochrome_white_2.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/a/ad/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans1.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/a/ad/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans1.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/1/16/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans2.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/1/16/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans2.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/0/0c/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans3.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/0/0c/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans3.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/6/6e/T--Bielefeld-CeBiTec--expand_monochrome_white_2_collapse.svg"); | ||
+ | } | ||
+ | } else if ($("#logo-img").attr("class") == "navbar center grow") { | ||
+ | if ($imgSrc == "https://static.igem.org/mediawiki/2017/6/6e/T--Bielefeld-CeBiTec--expand_monochrome_white_2_collapse.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/0/0c/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans3.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/0/0c/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans3.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/1/16/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans2.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/1/16/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans2.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/a/ad/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans1.svg"); | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/a/ad/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans1.svg") { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/4/4a/T--Bielefeld-CeBiTec--expand_monochrome_white_2.svg"); | ||
+ | } | ||
+ | } | ||
+ | $imgSrc = $("#logo-img").attr("src"); | ||
+ | |||
+ | $logoHeight = $("#logo").innerHeight(); | ||
+ | $newHeight = $logoHeight * 0.5; | ||
+ | $("header").attr("style", "height: " + $logoHeight + "px;"); | ||
+ | $scrollHeight = 50; | ||
+ | if ($imgSrc == "https://static.igem.org/mediawiki/2017/4/4a/T--Bielefeld-CeBiTec--expand_monochrome_white_2.svg") { | ||
+ | $scrollHeight = 50; | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/a/ad/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans1.svg") { | ||
+ | $scrollHeight = 62.5; | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/1/16/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans2.svg") { | ||
+ | $scrollHeight = 75; | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/0/0c/T--Bielefeld-CeBiTec--expand_monochrome_white_2_trans3.svg") { | ||
+ | $scrollHeight = 87.5; | ||
+ | } else if ($imgSrc == "https://static.igem.org/mediawiki/2017/6/6e/T--Bielefeld-CeBiTec--expand_monochrome_white_2_collapse.svg") { | ||
+ | $scrollHeight = 100; | ||
+ | } | ||
+ | |||
+ | $("#navbar-left, #navbar-right").attr("style", "height: " + $scrollHeight + "%;"); | ||
+ | $("li.navbar").attr("style", "height: 100%; line-height: " + ($logoHeight * ($scrollHeight/100)) + "px;"); | ||
+ | $(".navbar-paragraph").attr("style", "height: " + (100 - $scrollHeight) + "%;"); | ||
+ | $("li.navbar-paragraph").attr("style", "line-height: " + ($logoHeight * ((100 - $scrollHeight)/100)) + "px;"); | ||
+ | $(".sub-navbar").attr("style", "top: " + ($logoHeight + 16) + "px;"); | ||
+ | if ($imgSrc == "https://static.igem.org/mediawiki/2017/4/4a/T--Bielefeld-CeBiTec--expand_monochrome_white_2.svg") { | ||
+ | //$(".container.start-page").attr("style", "padding-top: " + ($logoHeight + 10) + "px;"); | ||
+ | } | ||
+ | if ($scrollHeight >= 80) { | ||
+ | $("li.navbar-paragraph").hide(); | ||
+ | } else { | ||
+ | $("li.navbar-paragraph").show(); | ||
+ | } | ||
+ | |||
+ | |||
+ | $widthItemsLeft = $("#project").width(); | ||
+ | $widthItemsLeft = $widthItemsLeft + $("#results").width(); | ||
+ | $widthItemsLeft = $widthItemsLeft + $("#specials").width(); | ||
+ | $widthItemsLeft = $widthItemsLeft + $("#hp").width(); | ||
+ | |||
+ | $widthItemsRight = $("#collaborations").width(); | ||
+ | $widthItemsRight = $widthItemsRight + $("#team").width(); | ||
+ | $widthItemsRight = $widthItemsRight + $("#partners").width(); | ||
+ | $widthItemsRight = $widthItemsRight + $("#notebook").width(); | ||
+ | |||
+ | $widthDiff = ($widthItemsLeft - $widthItemsRight); | ||
+ | $addUp = ($widthDiff / 4); | ||
+ | $("#collaborations").width($("#collaborations").width() + $addUp); | ||
+ | $("#team").width($("#team").width() + $addUp); | ||
+ | $("#partners").width($("#partners").width() + $addUp); | ||
+ | $("#notebook").width($("#notebook").width() + $addUp); | ||
+ | } | ||
+ | |||
+ | $(window).on('resize', function(){ | ||
+ | resizeNavbar(); | ||
}); | }); | ||
$(window).on('load', function() { | $(window).on('load', function() { | ||
$story = ["https://2017.igem.org/Team:Bielefeld-CeBiTec", | $story = ["https://2017.igem.org/Team:Bielefeld-CeBiTec", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/Overview", | ||
"https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair", | "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"]; | + | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair/unnatural_base_pairs", |
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair/uptake_and_biosynthesis", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair/preservation_system", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/unnatural_base_pair/challenges", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/translational_system", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/translational_system/translation_mechanism", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/translational_system/library_and_selection", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox/analysing", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox/photoswitching", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox/labeling", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox/photolysis", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Project/toolbox/fusing", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Demonstrate", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/unnatural_base_pair", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/unnatural_base_pair/uptake", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/unnatural_base_pair/biosynthesis", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/unnatural_base_pair/preservation_system", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/unnatural_base_pair/development_of_new_methods", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/translational_system", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/translational_system/translation_mechanism", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/translational_system/library_and_selection", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox/analysing", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox/photoswitching", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox/labeling", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox/photolysis", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Results/toolbox/fusing", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Parts", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Basic_Part", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Composite_Part", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Part_Collection", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Improve", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Achievements", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Hardware", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Software", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Model", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Measurement", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Applied_Design", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/InterLab", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/HP", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/HP/Silver", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/HP/Gold_Integrated", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Engagement", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Collaborations", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Team", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Team/Advisors", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Team/Bielefeld", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Team/CeBiTec", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Team/Bielefeld_University", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Attributions", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Partners", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Notebook/Methods", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Notebook/Oligonucleotides", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Notebook/Labjournal", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Notebook/LabnotesGenerator", | ||
+ | "https://2017.igem.org/Team:Bielefeld-CeBiTec/Safety"]; | ||
+ | $url = window.location.href; | ||
+ | if ($url.indexOf("#") > -1) { | ||
+ | $url = $url.substring(0, $url.indexOf("#")); | ||
+ | } | ||
+ | $index = 0; | ||
+ | for (i = 0; i < $story.length; i++) { | ||
+ | if ($story[i] == $url) { | ||
+ | $index = i; | ||
+ | i = $story.length; | ||
+ | } | ||
+ | } | ||
+ | if ($index == 0) { | ||
+ | $("#page-switch-prev-li").hide(); | ||
+ | $("#footer-left").html("<p></p>"); | ||
+ | } else { | ||
+ | $("#page-switch-prev").attr("href", $story[$index - 1]); | ||
+ | } | ||
+ | if ($index == $story.length - 1) { | ||
+ | $("#page-switch-next-li").hide(); | ||
+ | } else { | ||
+ | $("#page-switch-next").attr("href", $story[$index + 1]); | ||
+ | } | ||
+ | |||
+ | hideNavbars(); | ||
+ | if ($(document).scrollTop() == 0) { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/4/4a/T--Bielefeld-CeBiTec--expand_monochrome_white_2.svg"); | ||
+ | } else { | ||
+ | $("#logo-img").attr("src", "https://static.igem.org/mediawiki/2017/6/6e/T--Bielefeld-CeBiTec--expand_monochrome_white_2_collapse.svg"); | ||
+ | } | ||
+ | resizeNavbar(); | ||
+ | $(".cover").hide(); | ||
+ | $("#cover-set").hide(); | ||
+ | $("#cover").css({"background":"rgba(0, 0, 0, 0.5)"}); | ||
+ | $("#cover-box").css({"background":"rgba(255, 255, 255, 1)"}); | ||
+ | $("#cover-box-img").css({"background":"rgba(255, 255, 255, 1)"}); | ||
+ | $("#cover-box-text").css({"background":"rgba(255, 255, 255, 1)"}); | ||
+ | |||
+ | if ($(window).scrollTop() == 0) { | ||
+ | $("#page-arrow-top").css("display", "none"); | ||
+ | } else { | ||
+ | $("#page-arrow-top").css("display", "block"); | ||
+ | } | ||
+ | |||
+ | if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { | ||
+ | $(".test").html("mobile"); | ||
+ | } else { | ||
+ | $(".test").html("not mobile"); | ||
+ | } | ||
}); | }); | ||
Line 45: | Line 214: | ||
$("#navbar-project").hide(); | $("#navbar-project").hide(); | ||
$("#navbar-results").hide(); | $("#navbar-results").hide(); | ||
+ | $("#navbar-specials").hide(); | ||
$("#navbar-hp").hide(); | $("#navbar-hp").hide(); | ||
$("#navbar-team").hide(); | $("#navbar-team").hide(); | ||
Line 60: | Line 230: | ||
} | } | ||
+ | /* Remove the highlighted style from all navbar buttons */ | ||
function unhighlightTabs($x) { | function unhighlightTabs($x) { | ||
if ($x == true) { | if ($x == true) { | ||
Line 65: | Line 236: | ||
$("#results-translation"), $("#results-toolbox"), $("#results-parts")]; | $("#results-translation"), $("#results-toolbox"), $("#results-parts")]; | ||
} else { | } else { | ||
− | $objects = [$("#project"), $("#results"), $("#hp"), $("#team"), $("#notebook"), $("#project-ubp"), | + | $objects = [$("#project"), $("#results"), $("#specials"), $("#hp"), $("#team"), $("#notebook"), $("#project-ubp"), |
$("#project-translation"), $("#project-toolbox"), $("#results-ubp"), $("#results-translation"), | $("#project-translation"), $("#project-toolbox"), $("#results-ubp"), $("#results-translation"), | ||
$("#results-toolbox"), $("#results-parts")]; | $("#results-toolbox"), $("#results-parts")]; | ||
Line 71: | Line 242: | ||
for (i = 0; i < $objects.length; i++) { | for (i = 0; i < $objects.length; i++) { | ||
$object = $objects[i]; | $object = $objects[i]; | ||
− | if ($object.attr("class") == "navbar active | + | if ($object.attr("class") == "navbar active highlighted") { |
$object.attr("class", "navbar active"); | $object.attr("class", "navbar active"); | ||
− | } else if ($object.attr("class") == "navbar | + | } else if ($object.attr("class") == "navbar item-left active highlighted") { |
+ | $object.attr("class", "navbar item-left active"); | ||
+ | } else if ($object.attr("class") == "navbar item-right active highlighted") { | ||
+ | $object.attr("class", "navbar item-right active"); | ||
+ | } else if ($object.attr("class") == "navbar highlighted") { | ||
$object.attr("class", "navbar"); | $object.attr("class", "navbar"); | ||
− | } else if ($object.attr("class") == "sub-navbar-item active | + | } else if ($object.attr("class") == "navbar item-left highlighted") { |
+ | $object.attr("class", "navbar item-left"); | ||
+ | } else if ($object.attr("class") == "navbar item-right highlighted") { | ||
+ | $object.attr("class", "navbar item-right"); | ||
+ | } else if ($object.attr("class") == "sub-navbar-item active highlighted" || $object.attr("class") == "sub-navbar-item navbar active highlighted") { | ||
$object.attr("class", "sub-navbar-item active"); | $object.attr("class", "sub-navbar-item active"); | ||
− | } else if ($object.attr("class") == "sub-navbar-item | + | } else if ($object.attr("class") == "sub-navbar-item highlighted") { |
$object.attr("class", "sub-navbar-item"); | $object.attr("class", "sub-navbar-item"); | ||
+ | } | ||
+ | |||
+ | if ($object.attr("class") == "sub-navbar-item navbar active") { | ||
+ | $object.attr("class", "sub-navbar-item active"); | ||
+ | } | ||
+ | if ($object.attr("class") == "sub-navbar-item small navbar active") { | ||
+ | $object.attr("class", "sub-navbar-item small active"); | ||
} | } | ||
} | } | ||
} | } | ||
+ | /* Handle clicks on the navbar items */ | ||
$(document).ready(function() { | $(document).ready(function() { | ||
$("li.navbar, li.sub-navbar-item").mousedown(function() { | $("li.navbar, li.sub-navbar-item").mousedown(function() { | ||
+ | $clickItem = this; | ||
$name = this.id; | $name = this.id; | ||
$class = $(this).attr("class"); | $class = $(this).attr("class"); | ||
+ | |||
+ | $(".sub-navbar").show(); | ||
if ($name == "project") { | if ($name == "project") { | ||
− | if ($class == "navbar" || $class == "navbar active") { | + | if ($class == "navbar item-left" || $class == "navbar item-left active") { |
unhighlightTabs(false); | unhighlightTabs(false); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbars(); | hideNavbars(); | ||
$("#navbar-project").show(); | $("#navbar-project").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
Line 100: | Line 290: | ||
} | } | ||
} else if ($name == "results") { | } else if ($name == "results") { | ||
− | if ($class == "navbar" || $class == "navbar active") { | + | if ($class == "navbar item-left" || $class == "navbar item-left active") { |
unhighlightTabs(false); | unhighlightTabs(false); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbars(); | hideNavbars(); | ||
$("#navbar-results").show(); | $("#navbar-results").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
+ | } else { | ||
+ | $(".sub-navbar").hide(); | ||
+ | hideNavbars(); | ||
+ | unhighlightTabs(false); | ||
+ | } | ||
+ | } else if ($name == "specials") { | ||
+ | if ($class == "navbar item-left" || $class == "navbar item-left active") { | ||
+ | unhighlightTabs(false); | ||
+ | $(".sub-navbar").show(); | ||
+ | hideNavbars(); | ||
+ | $("#navbar-specials").show(); | ||
+ | $(this).attr("class", $class + " highlighted"); | ||
} else { | } else { | ||
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
Line 112: | Line 314: | ||
} | } | ||
} else if ($name == "hp") { | } else if ($name == "hp") { | ||
− | if ($class == "navbar" || $class == "navbar active") { | + | if ($class == "navbar item-left" || $class == "navbar item-left active") { |
unhighlightTabs(false); | unhighlightTabs(false); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbars(); | hideNavbars(); | ||
$("#navbar-hp").show(); | $("#navbar-hp").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
Line 124: | Line 326: | ||
} | } | ||
} else if ($name == "team") { | } else if ($name == "team") { | ||
− | if ($class == "navbar" || $class == "navbar active") { | + | if ($class == "navbar item-right" || $class == "navbar item-right active") { |
unhighlightTabs(false); | unhighlightTabs(false); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbars(); | hideNavbars(); | ||
$("#navbar-team").show(); | $("#navbar-team").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
Line 136: | Line 338: | ||
} | } | ||
} else if ($name == "notebook") { | } else if ($name == "notebook") { | ||
− | if ($class == "navbar" || $class == "navbar active") { | + | if ($class == "navbar item-right" || $class == "navbar item-right active") { |
unhighlightTabs(false); | unhighlightTabs(false); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbars(); | hideNavbars(); | ||
$("#navbar-notebook").show(); | $("#navbar-notebook").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
Line 148: | Line 350: | ||
} | } | ||
} else if ($name == "project-ubp") { | } else if ($name == "project-ubp") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-project-ubp").show(); | $("#navbar-project-ubp").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 159: | Line 361: | ||
} | } | ||
} else if ($name == "project-translation") { | } else if ($name == "project-translation") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-project-translation").show(); | $("#navbar-project-translation").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 170: | Line 372: | ||
} | } | ||
} else if ($name == "project-toolbox") { | } else if ($name == "project-toolbox") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-project-toolbox").show(); | $("#navbar-project-toolbox").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 181: | Line 383: | ||
} | } | ||
} else if ($name == "results-ubp") { | } else if ($name == "results-ubp") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-results-ubp").show(); | $("#navbar-results-ubp").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 192: | Line 394: | ||
} | } | ||
} else if ($name == "results-translation") { | } else if ($name == "results-translation") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-results-translation").show(); | $("#navbar-results-translation").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 203: | Line 405: | ||
} | } | ||
} else if ($name == "results-toolbox") { | } else if ($name == "results-toolbox") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-results-toolbox").show(); | $("#navbar-results-toolbox").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 214: | Line 416: | ||
} | } | ||
} else if ($name == "results-parts") { | } else if ($name == "results-parts") { | ||
− | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active") { | + | if ($class == "sub-navbar-item" || $class == "sub-navbar-item active" || $class == "sub-navbar-item navbar active") { |
unhighlightTabs(true); | unhighlightTabs(true); | ||
$(".sub-navbar").show(); | $(".sub-navbar").show(); | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
$("#navbar-results-parts").show(); | $("#navbar-results-parts").show(); | ||
− | $(this).attr("class", $class + " | + | $(this).attr("class", $class + " highlighted"); |
} else { | } else { | ||
hideNavbarsSub(); | hideNavbarsSub(); | ||
Line 229: | Line 431: | ||
} | } | ||
+ | //get center x position of item and place subitems centered to this | ||
+ | if ($(this).html().indexOf("▼") > -1) { | ||
+ | $middle = $(this).position().left + ($(this).width() * 0.5); | ||
+ | $totalWidth = 0; | ||
+ | |||
+ | $('.sub-navbar-item').each(function(i, obj) { | ||
+ | if ($(obj).is(":visible")) { | ||
+ | if ($($clickItem).hasClass("sub-navbar-item")) { | ||
+ | if ($(obj).hasClass("small")) { | ||
+ | if ($totalWidth == 0) { | ||
+ | $leftItem = obj; | ||
+ | } | ||
+ | $totalWidth = $totalWidth + $(obj).width(); | ||
+ | } | ||
+ | } else { | ||
+ | if ($totalWidth == 0) { | ||
+ | $leftItem = obj; | ||
+ | } | ||
+ | $totalWidth = $totalWidth + $(obj).width(); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | $newPos = ($middle - ($totalWidth * 0.5)); | ||
+ | if ($newPos < 0) { | ||
+ | $newPos = 0; | ||
+ | } | ||
+ | if ($newPos + $totalWidth > $("body").width()) { | ||
+ | $newPos = $("body").width() - $totalWidth; | ||
+ | } | ||
+ | $newPos = $newPos + "px"; | ||
+ | |||
+ | $($leftItem).css({'margin-left':$newPos}); | ||
+ | } | ||
}); | }); | ||
}); | }); | ||
Line 235: | Line 470: | ||
$("body").mousedown(function( event ) { | $("body").mousedown(function( event ) { | ||
//$(".test").html($("#project").attr("class")); | //$(".test").html($("#project").attr("class")); | ||
− | if (event.pageY - $(document).scrollTop() > | + | if (event.pageY - $(document).scrollTop() > 16 + $("#logo").outerHeight() + $(".sub-navbar").outerHeight()) { |
$(".sub-navbar").hide(); | $(".sub-navbar").hide(); | ||
hideNavbars(); | hideNavbars(); | ||
unhighlightTabs(); | unhighlightTabs(); | ||
} | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | window.setInterval(function(){ | ||
+ | if ($(document).scrollTop() <= 5) { | ||
+ | $("#logo-img").attr("class", "navbar center grow"); | ||
+ | } else { | ||
+ | $("#logo-img").attr("class", "navbar center shrink"); | ||
+ | } | ||
+ | resizeNavbar(); | ||
+ | }, 10); | ||
+ | |||
+ | |||
+ | /*$(document).ready(function() { | ||
+ | $(".figure").mousedown(function() { | ||
+ | $clickItem = $(this); | ||
+ | $img = $clickItem.children("img"); | ||
+ | $p = $clickItem.children("p"); | ||
+ | $("#cover-img").attr("src", $img.attr("src")); | ||
+ | $("#cover-set").attr("src", $img.attr("src")); | ||
+ | $size = $("#cover-set").height(); | ||
+ | if ($size > $("#cover-box").height() * 0.85) { | ||
+ | $newSize = ($("#cover-box").height() * 0.85); | ||
+ | $("#cover-img").height($newSize + "px"); | ||
+ | } | ||
+ | $size = $("#cover-set").width(); | ||
+ | /*if ($size > $("#cover-box").width()) { | ||
+ | $newSize = ($("#cover-box").width()); | ||
+ | $("#cover-img").width($newSize + "px"); | ||
+ | }*/ | ||
+ | /*$("#cover-p").html($p.html()); | ||
+ | $(".cover").fadeIn(200); | ||
+ | |||
+ | |||
+ | $topPos = $("#cover-box").position().top; | ||
+ | $(".test").html($("#cover-box").height()); | ||
+ | $topPos = $("#cover-box").height() * 0.5 + 30 + "px"; | ||
+ | $("#cover-box").css("top", $topPos); | ||
+ | }); | ||
+ | });*/ | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | $(".cover").mousedown(function() { | ||
+ | $(".cover").fadeOut(200); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | $(".page-switch.prev").mouseover(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/c/cd/T--Bielefeld-CeBiTec--page-arrow-previous-white.svg"); | ||
+ | }); | ||
+ | $(".page-switch.next").mouseover(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/4/45/T--Bielefeld-CeBiTec--page-arrow-next-white.svg"); | ||
+ | }); | ||
+ | $("#page-arrow-top").mouseover(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/d/dc/T--Bielefeld-CeBiTec--page-arrow-top-white.svg"); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | $(".page-switch.prev").mouseout(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/4/44/T--Bielefeld-CeBiTec--page-arrow-previous.svg"); | ||
+ | }); | ||
+ | $(".page-switch.next").mouseout(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/c/c8/T--Bielefeld-CeBiTec--page-arrow-next.svg"); | ||
+ | }); | ||
+ | $("#page-arrow-top").mouseout(function() { | ||
+ | $hoverItem = $(this); | ||
+ | $hoverItem.attr("src", "https://static.igem.org/mediawiki/2017/b/b2/T--Bielefeld-CeBiTec--page-arrow-top.svg"); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | function topFunction() { | ||
+ | document.body.scrollTop = 0; // For Chrome, Safari and Opera | ||
+ | document.documentElement.scrollTop = 0; // For IE and Firefox | ||
+ | } | ||
+ | |||
+ | $(window).scroll(function(){ | ||
+ | if ($(window).scrollTop() == 0) { | ||
+ | $("#page-arrow-top").css("display", "none"); | ||
+ | } else { | ||
+ | $("#page-arrow-top").css("display", "block"); | ||
+ | } | ||
+ | if ($(window).scrollTop() > 50) { | ||
+ | $("#page-arrow-top").css("opacity", 1); | ||
+ | } else { | ||
+ | $("#page-arrow-top").css("opacity", ($(window).scrollTop() / 50)); | ||
+ | } | ||
+ | if ($(window).scrollTop() > $(document).height() - $(window).height() - 80) { | ||
+ | $newPos = 20 + ($(window).scrollTop() - ($(document).height() - $(window).height() - 80)); | ||
+ | $("#page-arrow-top").css("bottom", $newPos + "px"); | ||
+ | } else { | ||
+ | $("#page-arrow-top").css("bottom", "20px"); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | $(".hidden-expand").mousedown(function() { | ||
+ | $clickItem = $(this); | ||
+ | $clickItem.parent().next(".hidden-block").slideToggle(500, function() {}); | ||
}); | }); | ||
}); | }); |
Latest revision as of 03:57, 2 November 2017