From 2014.igem.org
// The script below will remove all wikistylesheets, so you now have unlimited freedom for inline CSS.
for ( i=0; i 217) {
$('#noscroll').css({position: 'fixed', top: '0px'});
$('#titlebaroverlay').css({position: 'fixed', top: '0px'});
$('#external_links').css({position: 'fixed', top: '53px'});
} else {
$('#noscroll').css({position: 'absolute', top: '217px'});
$('#titlebaroverlay').css({position: 'absolute', top: '217px'});
$('#external_links').css({position: 'absolute', top: '270px'});
}
});
});
//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() > 217){
window.scrollTo(0,217);
}
}
}
//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
}
}
//This script is about the navigation 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.)
//Set initial values so the menu starts at the home button.
function setupMenu(imenuItem, isubmenuItem){
//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");
});
}
//This function will open or collapse menus when things are switched with the titlebuttons. (hopefully)
function clickmenu(whichpage){
whichpage.trigger("click");
}
"
