"
Team:Groningen/Template:Script
From 2014.igem.org
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> // This will load an important jquery library. </script>
<script type="text/javascript"> // The script below will remove all wikistylesheets, so you now have unlimited freedom for inline CSS. for ( i=0; i<document.styleSheets.length; i++) {
void(document.styleSheets.item(i).disabled=true);
} </script>
<script type="text/javascript"> // This script will make sure the navigation stuff always stays on top of the page, after you scrolled past the logo and banner.
$(function(){
var navigationmenuboxheight = window.innerHeight-40;
var navigationmenubox = document.getElementById("navigationmenubox");
navigationmenubox.style.height = navigationmenuboxheight+"px";
$(window).scroll(function(){
if( $(window).scrollTop() > 217) {
$('#noscroll').css({position: 'fixed', top: '0px'});
$('#titlebaroverlay').css({position: 'fixed', top: '0px'});
} else {
$('#noscroll').css({position: 'absolute', top: '217px'});
$('#titlebaroverlay').css({position: 'absolute', top: '217px'});
}
});
});
</script>
<script type="text/javascript"> //This code is to switch visibility of the pages and titles. Later on, this code might be adjusted to also allow for different languages, and then the titlemenu and the carousel also need to be taken into account.
function changevisibility(x) {
elements = document.getElementsByClassName('visibilitytoggle');
for (var i = 0; i < elements.length; i++) {
elements[i].style.visibility="hidden";
}
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.visibility="visible";
if( $(window).scrollTop() > 213){
window.scrollTo(0,213);
}
}
}
</script>
<script> //This script is about the carousel in the banner. It scripts the alternation between the carousel elements, AND the buttons to navigate the carousel. Later on it will probably also code the page switching IF we want the user to be able to use the carousel as a navigation element. // direction = boolean value: true or false. If true, go to NEXT slide; otherwise go to PREV slide
function toggleSlide(direction) {
var elements = document.getElementsByClassName("hideable"); // gets all the "slides" in our slideshow
// Find the LI that's currently displayed
var visibleID = getVisible(elements);
elements[visibleID].style.display = "none"; // hide the currently visible LI
if(direction) {
var makeVisible = next(visibleID, elements.length); // get the previous slide
} else {
var makeVisible = prev(visibleID, elements.length); // get the next slide
}
elements[makeVisible].style.display = "block"; // show the previous or next slide
}
function getVisible(elements) {
var visibleID = -1;
for(var i = 0; i < elements.length; i++) {
if(elements[i].style.display == "block") {
visibleID = i;
}
}
return visibleID;
} function prev(num, arrayLength) {
if(num == 0) return arrayLength-1; else return num-1;
} function next(num, arrayLength) {
if(num == arrayLength-1) return 0; else return num+1;
}
var interval = 3500; // You can change this value to your desired speed. The value is in milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000. var switching = setInterval("toggleSlide(true)", interval);
window.paused = false; function toggleInterval() {
if(!window.paused) {
clearInterval(switching);
} else {
switching = setInterval("toggleSlide(true)", interval);
}
window.paused = !(window.paused);
}
function goToEdge(where) {
var elements = document.getElementsByClassName("hideable");
var visibleID = getVisible(elements);
var firstButton = document.getElementById("firstButton");
var lastButton = document.getElementById("lastButton");
elements[visibleID].style.display = "none"; //hides the currently visible item
if(where==="firstimage") {
elements[0].style.display = "block"; //shows the first item
} else if (where==="secondimage"){
elements[1].style.display = "block"; //shows the second item
} else {
elements[2].style.display = "block"; //shows the second item
}
} </script>
<script type="text/javascript"> //This script is about our menu, it allows things to collapse and stuff. We took it from the Tshingua team 2013, and improved it a bit. (mostly in the layout though.) function setupMenu(imenuItem, isubmenuItem){
//Initialize data
//Collapse all submenus
$(".sub-menu").data("collapsed", true).hide();
//Show the selected menu item
var menuItem = $($(".menu-item").get(imenuItem));
//Select the menu item
menuItem.addClass("menu-selected");
//Select submenu item
var submenu = menuItem.children(".sub-menu");
//Set events
$(".menu-item span").click(function(){
var submenu = $(this).next();
var hasSubmenu = (submenu.length > 0);
var collapsed = true;
if(hasSubmenu){
collapsed = submenu.data("collapsed");
}
//Select and expand this menu item
var parentDiv = $(this).parent();
//Deselect and collapse all other menu items
$("div.menu-item").not(parentDiv)
.removeClass("menu-selected")
.children(".sub-menu")
.data("collapsed", true)
.slideUp();
parentDiv.addClass("menu-selected");
if(hasSubmenu){
if(collapsed){
submenu.data("collapsed", false).slideDown();
}else{
submenu.data("collapsed", true).slideUp();
}
}
});
$("div.sub-menu-item").click(function(){
//Deselect other submenu items
$("div.sub-menu-item").removeClass("sub-menu-selected");
//Select this submenu item
$(this).addClass("sub-menu-selected");
});
}
</script>
