Difference between revisions of "Template:Team:Bielefeld-CeBiTec/JS"
(subnavbar is now centered to the clicked button) |
|||
| Line 94: | Line 94: | ||
$("#partners").width($("#partners").width() + $addUp); | $("#partners").width($("#partners").width() + $addUp); | ||
$("#notebook").width($("#notebook").width() + $addUp); | $("#notebook").width($("#notebook").width() + $addUp); | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 209: | Line 206: | ||
} | } | ||
| − | + | /* Remove the highlighted style from all navbar buttons */ | |
function unhighlightTabs($x) { | function unhighlightTabs($x) { | ||
if ($x == true) { | if ($x == true) { | ||
| Line 248: | Line 245: | ||
} | } | ||
| + | /* 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(); | $(".sub-navbar").show(); | ||
| − | |||
if ($name == "project") { | if ($name == "project") { | ||
if ($class == "navbar item-left" || $class == "navbar item-left active") { | if ($class == "navbar item-left" || $class == "navbar item-left active") { | ||
| Line 408: | Line 407: | ||
} | } | ||
| + | //get center x position of item and place subitems centered to this | ||
| + | $middle = $(this).position().left + ($(this).width() * 0.5); | ||
| + | $totalWidth = 0; | ||
| + | |||
| + | $('.sub-navbar-item').each(function(i, obj) { | ||
| + | if ($($clickItem).hasClass("sub-navbar-item")) { | ||
| + | if ($(obj).is(":visible") && $(obj).hasClass("small")) { | ||
| + | if ($totalWidth == 0) { | ||
| + | $leftItem = obj; | ||
| + | } | ||
| + | $totalWidth = $totalWidth + $(obj).width(); | ||
| + | } | ||
| + | } else { | ||
| + | if ($(obj).is(":visible")) { | ||
| + | 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}); | ||
| + | //$(".test").html($newPos + " - " + $totalWidth + " - " + $("body").width()); | ||
}); | }); | ||
}); | }); | ||
| Line 430: | Line 461: | ||
resizeNavbar(); | resizeNavbar(); | ||
}, 10); | }, 10); | ||
| + | |||
| + | |||
Revision as of 14:30, 23 September 2017
