Line 2: | Line 2: | ||
function start_autocomplete() { | function start_autocomplete() { | ||
− | + | pages = [ | |
− | + | "Analysis", | |
− | + | "Attributions", | |
− | + | "Basic Part", | |
− | + | "Collaborations", | |
− | + | "Demonstrate", | |
− | + | "Description", | |
− | + | "Design", | |
− | + | "Drylab", | |
− | + | "Engagement", | |
− | + | "Experiments", | |
− | + | "Genetic Code Workshop", | |
− | + | "Guide", | |
− | + | "Gold Integrated", | |
− | + | "HP Silver", | |
− | + | "Hardware", | |
− | + | "Home", | |
− | + | "Human Practices", | |
− | + | "Icon-a-thon", | |
− | + | "Improve", | |
− | + | "InterLab", | |
− | + | "Interviews", | |
− | + | "Model", | |
− | + | "Notebook", | |
− | + | "ODE", | |
− | + | "Parts", | |
− | + | "Podcast", | |
− | + | "Protein Modelling", | |
− | + | "Results", | |
− | + | "Safety", | |
− | + | "Team", | |
− | + | "Wetlab" | |
− | + | ] | |
− | + | link = [ | |
− | + | "https://2017.igem.org/Team:Toronto/Analysis", | |
− | + | "https://2017.igem.org/Team:Toronto/Attributions", | |
− | + | "https://2017.igem.org/Team:Toronto/Basic_Part", | |
− | + | "https://2017.igem.org/Team:Toronto/Collaborations", | |
− | + | "https://2017.igem.org/Team:Toronto/Demonstrate", | |
− | + | "https://2017.igem.org/Team:Toronto/Description", | |
− | + | "https://2017.igem.org/Team:Toronto/Design", | |
− | + | "https://2017.igem.org/Team:Toronto/Drylab", | |
− | + | "https://2017.igem.org/Team:Toronto/Engagement", | |
− | + | "https://2017.igem.org/Team:Toronto/Experiments", | |
− | + | "https://2017.igem.org/Team:Toronto/Genetic_Code_Workshop", | |
− | + | "https://2017.igem.org/Team:Toronto/Guide", | |
− | + | "https://2017.igem.org/Team:Toronto/HP/Gold_Integrated", | |
− | + | "https://2017.igem.org/Team:Toronto/HP/Silver", | |
− | + | "https://2017.igem.org/Team:Toronto/Hardware", | |
− | + | "https://2017.igem.org/Team:Toronto", | |
− | + | "https://2017.igem.org/Team:Toronto/Human_Practices", | |
− | + | "https://2017.igem.org/Team:Toronto/Icon-a-thon", | |
− | + | "https://2017.igem.org/Team:Toronto/Improve", | |
− | + | "https://2017.igem.org/Team:Toronto/InterLab", | |
− | + | "https://2017.igem.org/Team:Toronto/Interviews", | |
− | + | "https://2017.igem.org/Team:Toronto/Model", | |
− | + | "https://2017.igem.org/Team:Toronto/Notebook", | |
− | + | "https://2017.igem.org/Team:Toronto/ODE", | |
− | + | "https://2017.igem.org/Team:Toronto/Parts", | |
− | + | "https://2017.igem.org/Team:Toronto/Podcast", | |
− | + | "https://2017.igem.org/Team:Toronto/Protein-Modelling", | |
− | + | "https://2017.igem.org/Team:Toronto/Results", | |
− | + | "https://2017.igem.org/Team:Toronto/Safety", | |
− | + | "https://2017.igem.org/Team:Toronto/Team", | |
− | + | "https://2017.igem.org/Team:Toronto/Wetlab" | |
− | + | ] | |
− | + | function autocomplete() { | |
− | + | // console.log('Autocomplete has loaded'); | |
− | + | var input = document.getElementById('autocomplete'); | |
− | + | var suggest = document.getElementById("auto-suggest"); | |
− | + | var search = document.getElementById("search"); | |
− | + | var navbarSearch = document.getElementById("navbarSearch"); | |
− | + | // Opens up the input bar | |
− | + | input.addEventListener('focus', function() { | |
− | + | if (input.classList.contains('no-collapse')) { | |
− | + | } else { | |
− | + | input.style.transition = '0.5s'; | |
− | + | input.style.width = '300px'; | |
− | + | input.style.paddingLeft = '30px'; | |
− | + | } | |
− | + | }); | |
− | + | // Closes input and auto-suggest at click event | |
− | + | input.addEventListener('blur', function() { | |
− | + | input.value = ''; | |
− | + | setTimeout(function() { | |
− | + | suggest.innerHTML = ''; | |
− | + | if (input.classList.contains('no-collapse')) { | |
− | + | } else { | |
− | + | input.style.width = '35px'; | |
− | + | input.style.padding = '5px 10px'; | |
− | + | } | |
− | + | }, 750); | |
− | + | }); | |
− | + | // Add keyboard scrolling functionality | |
− | + | input.addEventListener("keyup", function() { | |
− | + | matches = []; | |
− | + | pages.forEach(function(elem, i) { | |
− | + | if (elem.toLowerCase().includes(input.value.toLowerCase()) && input.value != '') { | |
− | + | var li = document.createElement('li'); | |
− | + | var a = document.createElement('a'); | |
− | + | var text = document.createTextNode(elem.toUpperCase()) | |
− | + | a.setAttribute('href', link[i]) | |
− | + | a.appendChild(text) | |
− | + | li.appendChild(a) | |
− | + | matches.push(li); | |
− | + | } | |
− | + | }); | |
− | + | suggest.innerHTML = ''; | |
− | + | if (matches.length == 0) { | |
− | + | search.style.display = 'none'; | |
− | + | } else { | |
− | + | search.style.display = 'block'; | |
− | + | matches.forEach(function(elem) { | |
− | + | suggest.appendChild(elem) | |
− | + | }); | |
− | + | } | |
− | + | }); | |
− | + | } | |
− | + | autocomplete(); | |
} | } | ||
Line 139: | Line 139: | ||
// Set and unset the active class | // Set and unset the active class | ||
function setActive(elem) { | function setActive(elem) { | ||
− | + | var sideNav = document.getElementsByClassName('sidebar-minibox'); | |
− | + | // console.log(sideNav); | |
− | + | var ul = sideNav[0].getElementsByTagName('ul'); | |
− | + | console.log(ul); | |
− | + | var li = ul[0].getElementsByTagName('li'); | |
− | + | for (i = 0; i < li.length; i++) { | |
− | + | li[i].classList.remove('active'); | |
− | + | } | |
− | + | elem.classList.add('active'); | |
} | } | ||
// Build the list items of the sideNav | // Build the list items of the sideNav | ||
function build(item, id) { | function build(item, id) { | ||
− | + | var li = document.createElement('li'); | |
− | + | var anchor = document.createElement('a'); | |
− | + | var text = document.createTextNode(item.innerText); | |
− | + | anchor.appendChild(text) | |
− | + | anchor.setAttribute('href', '#' + id); | |
− | + | li.appendChild(anchor); | |
− | + | li.setAttribute('onclick', 'setActive(this)'); | |
− | + | return li; | |
} | } | ||
function scrollWatch(scrollHeights, sectionContent) { | function scrollWatch(scrollHeights, sectionContent) { | ||
− | + | var header = document.getElementsByClassName('header')[0]; | |
− | + | var sideNav = document.getElementsByClassName('sidebar-minibox')[0]; | |
− | + | var content = document.getElementsByClassName('content-page')[0]; | |
− | + | var footer = document.getElementsByClassName('footer')[0]; | |
− | + | var sideNavItems = sideNav.getElementsByTagName('li'); | |
− | + | window.addEventListener('scroll', function() { | |
− | + | var mainNavScrollHeight = header.scrollHeight; | |
− | + | var windowPageYOffset = window.pageYOffset; | |
− | + | var windowInnerHeight = window.innerHeight; | |
− | + | var documentBodyHeight = document.body.offsetHeight; | |
− | + | // var footerScrollHeight = footer.scrollHeight; | |
− | + | var footerScrollHeight = 0; | |
− | + | var contentScroll = windowPageYOffset + mainNavScrollHeight; | |
− | + | var bottom = documentBodyHeight - windowInnerHeight; | |
− | + | // console.log(contentScroll); | |
− | + | var currentView = scrollHeights.filter(function(arr) { | |
− | + | // return arr < contentScroll; | |
− | + | return arr < windowPageYOffset; | |
− | + | }); | |
− | + | var currentViewLength = currentView.length; | |
− | + | // Make sure that the seek class is removed from the top element of the | |
− | + | // sideNav when the top of the page is scrolled to | |
− | + | if (contentScroll > windowPageYOffset) { | |
− | + | sideNavItems[0].classList.remove('active'); | |
− | + | } | |
− | + | // Add the active class to the list button in sideNav when the corresponding | |
− | + | // section is in view. Remove this class when it is not. | |
− | + | if (currentViewLength > 0) { | |
− | + | var index = currentViewLength - 1; | |
− | + | for (i = 0; i < scrollHeights.length; i++) { | |
− | + | sideNavItems[i].classList.remove('active'); | |
− | + | } | |
− | + | sideNavItems[index].classList.add('active'); | |
− | + | } else { | |
− | + | } | |
− | + | // Fix the sideNav to the top of the page when the mainNav is scrolled past | |
− | + | // Unfix otherwise | |
− | + | if (windowPageYOffset > mainNavScrollHeight) { | |
− | + | sideNav.classList.add('sideNavfixed'); | |
− | + | content.classList.add('contentScroll'); | |
− | + | } else { | |
− | + | sideNav.classList.remove('sideNavfixed'); | |
− | + | content.classList.remove('contentScroll'); | |
− | + | } | |
− | + | }); | |
} | } | ||
function buildNav() { | function buildNav() { | ||
− | + | var sections = document.getElementsByClassName('subsection'); | |
− | + | var numberOfSections = sections.length; | |
− | + | var sideNav = document.getElementsByClassName('sidebar-minibox')[0]; | |
− | + | var titleList = []; | |
− | + | var idList = []; | |
− | + | var scrollHeights = []; | |
− | + | // console.log(sideNav.getElementsByTagName('ul')[0]); | |
− | + | // Make a list of titles and scroll heights | |
− | + | for (i = 0; i < numberOfSections; i++) { | |
− | + | titleList.push(sections[i].getElementsByTagName('h2')[0]); | |
− | + | idList.push(sections[i].id); | |
− | + | scrollHeights.push(sections[i].offsetTop - 300); | |
− | + | } | |
− | + | console.log(scrollHeights); | |
− | + | // Build the sideNav lists | |
− | + | for (sec = 0; sec < numberOfSections; sec++) { | |
− | + | listItem = build(titleList[sec], idList[sec]) | |
− | + | sideNav.getElementsByTagName('ul')[0].appendChild(listItem); | |
− | + | } | |
− | + | scrollWatch(scrollHeights, sections); | |
} | } | ||
Line 251: | Line 251: | ||
var sidebarOffset = $("#sidebar-box").offset().top - 120; | var sidebarOffset = $("#sidebar-box").offset().top - 120; | ||
$(window).scroll(function() { | $(window).scroll(function() { | ||
− | + | var scroll = $(window).scrollTop(); | |
− | + | //console.log(scroll); | |
− | + | if (scroll >= sidebarOffset) { | |
− | + | //console.log('a'); | |
− | + | $("#sidebar-box").addClass("fixed"); | |
− | + | } else { | |
− | + | //console.log('a'); | |
− | + | $("#sidebar-box").removeClass("fixed"); | |
− | + | } | |
}); | }); | ||
} | } | ||
Line 270: | Line 270: | ||
// 3dMOLjs initialization function | // 3dMOLjs initialization function | ||
− | function insertStructure(container, structureUrl, settingsFunction){ | + | function insertStructure(container, structureUrl, settingsFunction) { |
− | + | let element = $(container); | |
− | + | let config = { backgroundColor: '#0d0d0d' }; | |
− | + | let viewer = $3Dmol.createViewer(element, config); | |
− | + | let pdbUri = structureUrl; | |
− | + | jQuery.ajax(pdbUri, { | |
− | + | success: function(data) { | |
− | + | let v = viewer; | |
− | + | v.addModel(data, "pdb"); | |
− | + | settingsFunction(v); | |
− | + | v.zoomTo(); | |
− | + | v.zoom(1.2, 1000); | |
− | + | v.render(); | |
− | + | }, | |
− | + | error: function(hdr, status, err) { | |
− | + | console.log("Failed to load PDB " + pdbUri + ": " + err); | |
− | + | } | |
− | + | }); | |
} | } | ||
var settingsList = { | var settingsList = { | ||
− | + | settings1: function(v) { | |
− | + | v.setStyle({}, { cartoon: { color: 'spectrum' } }) | |
− | + | }, | |
− | + | settings2: function(v) { | |
− | + | v.setStyle({}, { cartoon: { color: 'spectrum' } }) | |
− | + | }, | |
} | } | ||
Line 305: | Line 305: | ||
// tabs | // tabs | ||
− | var opentabs = function(event, tabId){ | + | var opentabs = function(event, tabId) { |
var i, tabs, tab_items; | var i, tabs, tab_items; | ||
tabs = document.getElementsByClassName("tabs"); | tabs = document.getElementsByClassName("tabs"); | ||
− | for (i=0; i<tabs.length; i++){ | + | for (i = 0; i < tabs.length; i++) { |
tabs[i].style.display = "none"; | tabs[i].style.display = "none"; | ||
} | } | ||
tab_items = document.getElementsByClassName("tab-item"); | tab_items = document.getElementsByClassName("tab-item"); | ||
− | for (i=0; i<tab_items.length; i++){ | + | for (i = 0; i < tab_items.length; i++) { |
console.log(tab_items[i].className); | console.log(tab_items[i].className); | ||
tab_items[i].className = tab_items[i].className.replace(" active", ""); | tab_items[i].className = tab_items[i].className.replace(" active", ""); | ||
Line 323: | Line 323: | ||
// anchor link offsetTop | // anchor link offsetTop | ||
function offsetAnchor() { | function offsetAnchor() { | ||
− | + | if (location.hash.length !== 0) { | |
− | + | window.scrollTo(window.scrollX, window.scrollY - 100); | |
− | + | } | |
} | } | ||
$(document).on('click', 'a[href^="#"]', function(event) { | $(document).on('click', 'a[href^="#"]', function(event) { | ||
− | + | window.setTimeout(function() { | |
− | + | offsetAnchor(); | |
− | + | }, 0); | |
}); | }); | ||
Line 355: | Line 355: | ||
// kat hover | // kat hover | ||
$(function() { | $(function() { | ||
− | + | $('#kat').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/03/T--Toronto--2017_kat-hover.gif)'); | $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/03/T--Toronto--2017_kat-hover.gif)'); | ||
− | + | $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/6b/T--Toronto--2017_kat-hover-umar.gif)'); | |
− | + | }); | |
− | + | $('#kat').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
$('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)'); | $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)'); | ||
− | + | $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)'); | |
− | + | }); | |
}); | }); | ||
// umar hover | // umar hover | ||
$(function() { | $(function() { | ||
− | + | $('#umar').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/4/45/T--Toronto--2017_umar-hover.gif)'); | $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/4/45/T--Toronto--2017_umar-hover.gif)'); | ||
− | + | $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/0f/T--Toronto--2017_umar-hover-kat.gif)'); | |
− | + | }); | |
− | + | $('#umar').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
$('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)'); | $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)'); | ||
− | + | $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)'); | |
− | + | }); | |
}); | }); | ||
// carla hover | // carla hover | ||
$(function() { | $(function() { | ||
− | + | $('#carla').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/95/T--Toronto--2017_carla-hover.gif)'); | $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/95/T--Toronto--2017_carla-hover.gif)'); | ||
− | + | $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/75/T--Toronto--2017_carla-hover-ahmed.gif)'); | |
− | + | }); | |
− | + | $('#carla').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
$('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_carla.gif)'); | $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_carla.gif)'); | ||
− | + | $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7f/T--Toronto--2017_ahmed.gif)'); | |
− | + | }); | |
}); | }); | ||
// ahmed hover | // ahmed hover | ||
$(function() { | $(function() { | ||
− | + | $('#ahmed').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/08/T--Toronto--2017_ahmed-hover.gif)'); | $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/08/T--Toronto--2017_ahmed-hover.gif)'); | ||
− | + | $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/e/e9/T--Toronto--2017_ahmed-hover-carla.gif)'); | |
− | + | }); | |
− | + | $('#ahmed').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
$('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7f/T--Toronto--2017_ahmed.gif)'); | $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7f/T--Toronto--2017_ahmed.gif)'); | ||
− | + | $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_carla.gif)'); | |
− | + | }); | |
}); | }); | ||
// mark hover | // mark hover | ||
$(function() { | $(function() { | ||
− | + | $('#mark').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | ||
$('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); | ||
− | + | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); | |
− | + | }); | |
− | + | $('#mark').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); | |
$('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); | ||
− | + | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); | |
− | + | }); | |
}); | }); | ||
// victoria hover | // victoria hover | ||
$(function() { | $(function() { | ||
− | + | $('#victoria').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | ||
$('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); | ||
− | + | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); | |
− | + | }); | |
− | + | $('#victoria').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); | |
$('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); | ||
− | + | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); | |
− | + | }); | |
}); | }); | ||
// amy hover | // amy hover | ||
$(function() { | $(function() { | ||
− | + | $('#amy').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); | ||
$('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); | ||
− | + | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); | |
− | + | }); | |
− | + | $('#amy').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); | |
$('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); | $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); | ||
− | + | $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); | |
− | + | }); | |
}); | }); | ||
// celine hover | // celine hover | ||
$(function() { | $(function() { | ||
− | + | $('#celine').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#celine').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/99/T--Toronto--2017_celine-hover.gif)'); | $('#celine').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/99/T--Toronto--2017_celine-hover.gif)'); | ||
− | + | }); | |
− | + | $('#celine').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#celine').css('background-image', 'url(https://static.igem.org/mediawiki/2017/f/f7/T--Toronto--2017_celine.gif)'); | |
− | + | }); | |
}); | }); | ||
// adele hover | // adele hover | ||
$(function() { | $(function() { | ||
− | + | $('#adele').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#adele').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/79/T--Toronto--2017_adele-hover.jpg)'); | $('#adele').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/79/T--Toronto--2017_adele-hover.jpg)'); | ||
− | + | }); | |
− | + | $('#adele').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#adele').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_adele.jpg)'); | |
− | + | }); | |
}); | }); | ||
Line 484: | Line 484: | ||
// estee hover | // estee hover | ||
$(function() { | $(function() { | ||
− | + | $('#estee').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#estee').css('background-image', 'url(https://static.igem.org/mediawiki/2017/2/2c/T--Toronto--2017_estee-hover.gif)'); | $('#estee').css('background-image', 'url(https://static.igem.org/mediawiki/2017/2/2c/T--Toronto--2017_estee-hover.gif)'); | ||
− | + | }); | |
− | + | $('#estee').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#estee').css('background-image', 'url(https://static.igem.org/mediawiki/2017/f/f1/T--Toronto--2017_estee.jpg)'); | |
− | + | }); | |
}); | }); | ||
Line 497: | Line 497: | ||
// fahim hover | // fahim hover | ||
$(function() { | $(function() { | ||
− | + | $('#fahim').mouseenter(function() { | |
− | + | // on mousein, hover effect gifs | |
$('#fahim').css('background-image', 'url(https://static.igem.org/mediawiki/2017/5/52/T--Toronto--2017_fahim-hover.gif)'); | $('#fahim').css('background-image', 'url(https://static.igem.org/mediawiki/2017/5/52/T--Toronto--2017_fahim-hover.gif)'); | ||
− | + | $('#wiki-header').addClass("wiki-force"); | |
− | + | }); | |
− | + | $('#fahim').mouseleave(function() { | |
− | + | // on mouseout, originals gifs reset | |
− | + | $('#fahim').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_fahim.gif)'); | |
+ | }); | ||
}); | }); |
Revision as of 01:24, 16 December 2017
// Autocomplete ================================================================
function start_autocomplete() { pages = [ "Analysis", "Attributions", "Basic Part", "Collaborations", "Demonstrate", "Description", "Design", "Drylab", "Engagement", "Experiments", "Genetic Code Workshop", "Guide", "Gold Integrated", "HP Silver", "Hardware", "Home", "Human Practices", "Icon-a-thon", "Improve", "InterLab", "Interviews", "Model", "Notebook", "ODE", "Parts", "Podcast", "Protein Modelling", "Results", "Safety", "Team", "Wetlab" ]
link = [ "https://2017.igem.org/Team:Toronto/Analysis", "https://2017.igem.org/Team:Toronto/Attributions", "https://2017.igem.org/Team:Toronto/Basic_Part", "https://2017.igem.org/Team:Toronto/Collaborations", "https://2017.igem.org/Team:Toronto/Demonstrate", "https://2017.igem.org/Team:Toronto/Description", "https://2017.igem.org/Team:Toronto/Design", "https://2017.igem.org/Team:Toronto/Drylab", "https://2017.igem.org/Team:Toronto/Engagement", "https://2017.igem.org/Team:Toronto/Experiments", "https://2017.igem.org/Team:Toronto/Genetic_Code_Workshop", "https://2017.igem.org/Team:Toronto/Guide", "https://2017.igem.org/Team:Toronto/HP/Gold_Integrated", "https://2017.igem.org/Team:Toronto/HP/Silver", "https://2017.igem.org/Team:Toronto/Hardware", "https://2017.igem.org/Team:Toronto", "https://2017.igem.org/Team:Toronto/Human_Practices", "https://2017.igem.org/Team:Toronto/Icon-a-thon", "https://2017.igem.org/Team:Toronto/Improve", "https://2017.igem.org/Team:Toronto/InterLab", "https://2017.igem.org/Team:Toronto/Interviews", "https://2017.igem.org/Team:Toronto/Model", "https://2017.igem.org/Team:Toronto/Notebook", "https://2017.igem.org/Team:Toronto/ODE", "https://2017.igem.org/Team:Toronto/Parts", "https://2017.igem.org/Team:Toronto/Podcast", "https://2017.igem.org/Team:Toronto/Protein-Modelling", "https://2017.igem.org/Team:Toronto/Results", "https://2017.igem.org/Team:Toronto/Safety", "https://2017.igem.org/Team:Toronto/Team", "https://2017.igem.org/Team:Toronto/Wetlab" ]
function autocomplete() { // console.log('Autocomplete has loaded'); var input = document.getElementById('autocomplete'); var suggest = document.getElementById("auto-suggest"); var search = document.getElementById("search"); var navbarSearch = document.getElementById("navbarSearch");
// Opens up the input bar input.addEventListener('focus', function() { if (input.classList.contains('no-collapse')) {
} else { input.style.transition = '0.5s'; input.style.width = '300px'; input.style.paddingLeft = '30px'; } });
// Closes input and auto-suggest at click event input.addEventListener('blur', function() { input.value = ; setTimeout(function() { suggest.innerHTML = ; if (input.classList.contains('no-collapse')) {
} else { input.style.width = '35px'; input.style.padding = '5px 10px'; } }, 750); });
// Add keyboard scrolling functionality
input.addEventListener("keyup", function() {
matches = []; pages.forEach(function(elem, i) { if (elem.toLowerCase().includes(input.value.toLowerCase()) && input.value != ) { var li = document.createElement('li'); var a = document.createElement('a'); var text = document.createTextNode(elem.toUpperCase())
a.setAttribute('href', link[i]) a.appendChild(text) li.appendChild(a)
matches.push(li); } }); suggest.innerHTML = ; if (matches.length == 0) { search.style.display = 'none'; } else { search.style.display = 'block'; matches.forEach(function(elem) { suggest.appendChild(elem) }); } }); }
autocomplete(); }
start_autocomplete();
// Set and unset the active class function setActive(elem) { var sideNav = document.getElementsByClassName('sidebar-minibox'); // console.log(sideNav); var ul = sideNav[0].getElementsByTagName('ul'); console.log(ul); var li = ul[0].getElementsByTagName('li');
for (i = 0; i < li.length; i++) { li[i].classList.remove('active'); }
elem.classList.add('active'); }
// Build the list items of the sideNav function build(item, id) { var li = document.createElement('li'); var anchor = document.createElement('a'); var text = document.createTextNode(item.innerText);
anchor.appendChild(text) anchor.setAttribute('href', '#' + id); li.appendChild(anchor); li.setAttribute('onclick', 'setActive(this)');
return li; }
function scrollWatch(scrollHeights, sectionContent) { var header = document.getElementsByClassName('header')[0]; var sideNav = document.getElementsByClassName('sidebar-minibox')[0]; var content = document.getElementsByClassName('content-page')[0]; var footer = document.getElementsByClassName('footer')[0]; var sideNavItems = sideNav.getElementsByTagName('li');
window.addEventListener('scroll', function() { var mainNavScrollHeight = header.scrollHeight; var windowPageYOffset = window.pageYOffset; var windowInnerHeight = window.innerHeight; var documentBodyHeight = document.body.offsetHeight; // var footerScrollHeight = footer.scrollHeight; var footerScrollHeight = 0; var contentScroll = windowPageYOffset + mainNavScrollHeight; var bottom = documentBodyHeight - windowInnerHeight;
// console.log(contentScroll);
var currentView = scrollHeights.filter(function(arr) { // return arr < contentScroll; return arr < windowPageYOffset; }); var currentViewLength = currentView.length;
// Make sure that the seek class is removed from the top element of the // sideNav when the top of the page is scrolled to if (contentScroll > windowPageYOffset) { sideNavItems[0].classList.remove('active'); }
// Add the active class to the list button in sideNav when the corresponding // section is in view. Remove this class when it is not. if (currentViewLength > 0) { var index = currentViewLength - 1; for (i = 0; i < scrollHeights.length; i++) { sideNavItems[i].classList.remove('active'); } sideNavItems[index].classList.add('active'); } else {
}
// Fix the sideNav to the top of the page when the mainNav is scrolled past // Unfix otherwise if (windowPageYOffset > mainNavScrollHeight) { sideNav.classList.add('sideNavfixed'); content.classList.add('contentScroll'); } else { sideNav.classList.remove('sideNavfixed'); content.classList.remove('contentScroll'); } }); }
function buildNav() { var sections = document.getElementsByClassName('subsection'); var numberOfSections = sections.length; var sideNav = document.getElementsByClassName('sidebar-minibox')[0]; var titleList = []; var idList = []; var scrollHeights = []; // console.log(sideNav.getElementsByTagName('ul')[0]);
// Make a list of titles and scroll heights for (i = 0; i < numberOfSections; i++) { titleList.push(sections[i].getElementsByTagName('h2')[0]); idList.push(sections[i].id); scrollHeights.push(sections[i].offsetTop - 300); } console.log(scrollHeights);
// Build the sideNav lists for (sec = 0; sec < numberOfSections; sec++) { listItem = build(titleList[sec], idList[sec]) sideNav.getElementsByTagName('ul')[0].appendChild(listItem); }
scrollWatch(scrollHeights, sections);
}
function sidebarFixed() { var sidebarOffset = $("#sidebar-box").offset().top - 120; $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if (scroll >= sidebarOffset) { //console.log('a'); $("#sidebar-box").addClass("fixed"); } else { //console.log('a'); $("#sidebar-box").removeClass("fixed"); } }); }
sidebarFixed();
buildNav();
// 3dMOLjs initialization function
function insertStructure(container, structureUrl, settingsFunction) { let element = $(container); let config = { backgroundColor: '#0d0d0d' }; let viewer = $3Dmol.createViewer(element, config); let pdbUri = structureUrl; jQuery.ajax(pdbUri, { success: function(data) { let v = viewer; v.addModel(data, "pdb"); settingsFunction(v); v.zoomTo(); v.zoom(1.2, 1000); v.render(); }, error: function(hdr, status, err) { console.log("Failed to load PDB " + pdbUri + ": " + err); } }); }
var settingsList = { settings1: function(v) { v.setStyle({}, { cartoon: { color: 'spectrum' } }) }, settings2: function(v) { v.setStyle({}, { cartoon: { color: 'spectrum' } }) }, }
insertStructure("#container-01", 'https://static.igem.org/mediawiki/2017/5/51/T--Toronto--2017_final_lacilov.txt', settingsList.settings1);
insertStructure("#container-02", 'https://static.igem.org/mediawiki/2017/9/99/T--Toronto--2017_2v1a.txt', settingsList.settings2);
// tabs
var opentabs = function(event, tabId) {
var i, tabs, tab_items;
tabs = document.getElementsByClassName("tabs");
for (i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
}
tab_items = document.getElementsByClassName("tab-item");
for (i = 0; i < tab_items.length; i++) {
console.log(tab_items[i].className);
tab_items[i].className = tab_items[i].className.replace(" active", "");
}
event.currentTarget.className += " active";
document.getElementById(tabId).style.display = "block";
}
// anchor link offsetTop
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
$(document).on('click', 'a[href^="#"]', function(event) { window.setTimeout(function() { offsetAnchor(); }, 0); });
window.setTimeout(offsetAnchor, 0);
// team page hover effects
// $(function() {
// $('#kat').hover(function() {
// // on mousein, hover effect gifs
// $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/03/T--Toronto--2017_kat-hover.gif)');
// $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/6b/T--Toronto--2017_kat-hover-umar.gif)');
// }, function() {
// // on mouseout, originals gifs reset
// $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)');
// $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)');
// });
// });
// team page hover effects
// kat hover $(function() { $('#kat').mouseenter(function() { // on mousein, hover effect gifs $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/03/T--Toronto--2017_kat-hover.gif)'); $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/6b/T--Toronto--2017_kat-hover-umar.gif)'); }); $('#kat').mouseleave(function() { // on mouseout, originals gifs reset $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)'); $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)'); }); });
// umar hover $(function() { $('#umar').mouseenter(function() { // on mousein, hover effect gifs $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/4/45/T--Toronto--2017_umar-hover.gif)'); $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/0f/T--Toronto--2017_umar-hover-kat.gif)'); }); $('#umar').mouseleave(function() { // on mouseout, originals gifs reset $('#umar').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_umar.gif)'); $('#kat').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/72/T--Toronto--2017_kat.gif)'); }); });
// carla hover $(function() { $('#carla').mouseenter(function() { // on mousein, hover effect gifs $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/95/T--Toronto--2017_carla-hover.gif)'); $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/75/T--Toronto--2017_carla-hover-ahmed.gif)'); }); $('#carla').mouseleave(function() { // on mouseout, originals gifs reset $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_carla.gif)'); $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7f/T--Toronto--2017_ahmed.gif)'); }); });
// ahmed hover $(function() { $('#ahmed').mouseenter(function() { // on mousein, hover effect gifs $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/0/08/T--Toronto--2017_ahmed-hover.gif)'); $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/e/e9/T--Toronto--2017_ahmed-hover-carla.gif)'); }); $('#ahmed').mouseleave(function() { // on mouseout, originals gifs reset $('#ahmed').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7f/T--Toronto--2017_ahmed.gif)'); $('#carla').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_carla.gif)'); }); });
// mark hover $(function() { $('#mark').mouseenter(function() { // on mousein, hover effect gifs $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); }); $('#mark').mouseleave(function() { // on mouseout, originals gifs reset $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); }); });
// victoria hover $(function() { $('#victoria').mouseenter(function() { // on mousein, hover effect gifs $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); }); $('#victoria').mouseleave(function() { // on mouseout, originals gifs reset $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); }); });
// amy hover $(function() { $('#amy').mouseenter(function() { // on mousein, hover effect gifs $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/a/aa/T--Toronto--2017_amy-hover.gif)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/da/T--Toronto--2017_vic-hover.gif)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/6/62/T--Toronto--2017_mark-hover.gif)'); }); $('#amy').mouseleave(function() { // on mouseout, originals gifs reset $('#amy').css('background-image', 'url(https://static.igem.org/mediawiki/2017/d/d5/T--Toronto--2017_amy.jpg)'); $('#victoria').css('background-image', 'url(https://static.igem.org/mediawiki/2017/c/cc/T--Toronto--2017_vic.gif)'); $('#mark').css('background-image', 'url(https://static.igem.org/mediawiki/2017/1/17/T--Toronto--2017_mark.gif)'); }); });
// celine hover $(function() { $('#celine').mouseenter(function() { // on mousein, hover effect gifs $('#celine').css('background-image', 'url(https://static.igem.org/mediawiki/2017/9/99/T--Toronto--2017_celine-hover.gif)'); }); $('#celine').mouseleave(function() { // on mouseout, originals gifs reset $('#celine').css('background-image', 'url(https://static.igem.org/mediawiki/2017/f/f7/T--Toronto--2017_celine.gif)'); }); });
// adele hover $(function() { $('#adele').mouseenter(function() { // on mousein, hover effect gifs $('#adele').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/79/T--Toronto--2017_adele-hover.jpg)'); }); $('#adele').mouseleave(function() { // on mouseout, originals gifs reset $('#adele').css('background-image', 'url(https://static.igem.org/mediawiki/2017/8/85/T--Toronto--2017_adele.jpg)'); }); });
// estee hover
$(function() {
$('#estee').mouseenter(function() {
// on mousein, hover effect gifs
$('#estee').css('background-image', 'url(https://static.igem.org/mediawiki/2017/2/2c/T--Toronto--2017_estee-hover.gif)');
});
$('#estee').mouseleave(function() {
// on mouseout, originals gifs reset
$('#estee').css('background-image', 'url(https://static.igem.org/mediawiki/2017/f/f1/T--Toronto--2017_estee.jpg)');
});
});
// fahim hover
$(function() {
$('#fahim').mouseenter(function() {
// on mousein, hover effect gifs
$('#fahim').css('background-image', 'url(https://static.igem.org/mediawiki/2017/5/52/T--Toronto--2017_fahim-hover.gif)');
$('#wiki-header').addClass("wiki-force");
});
$('#fahim').mouseleave(function() {
// on mouseout, originals gifs reset
$('#fahim').css('background-image', 'url(https://static.igem.org/mediawiki/2017/7/7b/T--Toronto--2017_fahim.gif)');
});
});