|
|
(19 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
− |
| |
− | <!--- THIS IS WHERE THE HTML BEGINS --->
| |
| | | |
| <!-- This tells the browser that your page is responsive --> | | <!-- This tells the browser that your page is responsive --> |
Line 15: |
Line 13: |
| <header id="content-header"> | | <header id="content-header"> |
| <span id="logo-container" class="menu-item"> | | <span id="logo-container" class="menu-item"> |
− | <div><img src="https://static.igem.org/mediawiki/2016/5/5d/T--Groningen--logo-200.png" alt="CryptoGE®M" /></div> | + | <div><a class="img" href="/Team:Groningen"><img src="https://static.igem.org/mediawiki/2016/5/5d/T--Groningen--logo-200.png" alt="CryptoGE®M" /></a></div> |
| <!-- https://static.igem.org/mediawiki/2016/e/e1/T--Groningen--logo-500.png --> | | <!-- https://static.igem.org/mediawiki/2016/e/e1/T--Groningen--logo-500.png --> |
− | <div class="menu-title">CryptoGE®M</div> | + | <div class="menu-title"><a href="/Team:Groningen">CryptoGE®M</a></div> |
− | <div class="sub-menu-wrap"> | + | <!--<div class="sub-menu-wrap"> |
| <div class="sub-menu"> | | <div class="sub-menu"> |
| <a href="/Team:Groningen">Home</a> | | <a href="/Team:Groningen">Home</a> |
Line 24: |
Line 22: |
| <a href="/Team:Groningen/Achievements">Achievements</a> | | <a href="/Team:Groningen/Achievements">Achievements</a> |
| </div> | | </div> |
− | </div> | + | </div>--> |
| </span> | | </span> |
| | | |
Line 35: |
Line 33: |
| <a href="/Team:Groningen/Supervisors">Supervisors</a> | | <a href="/Team:Groningen/Supervisors">Supervisors</a> |
| <a href="/Team:Groningen/Collaborations">Collaborations</a> | | <a href="/Team:Groningen/Collaborations">Collaborations</a> |
| + | <a href="/Team:Groningen/Achievements">Achievements</a> |
| <a href="/Team:Groningen/Contact">Contact</a> | | <a href="/Team:Groningen/Contact">Contact</a> |
| </div> | | </div> |
Line 45: |
Line 44: |
| <div class="sub-menu-wrap"> | | <div class="sub-menu-wrap"> |
| <div class="sub-menu"> | | <div class="sub-menu"> |
| + | <a href="/Team:Groningen/Tour"><strong>Tour</strong></a> |
| <a href="/Team:Groningen/Description">Description</a> | | <a href="/Team:Groningen/Description">Description</a> |
| <a href="/Team:Groningen/Design">Design</a> | | <a href="/Team:Groningen/Design">Design</a> |
| <a href="/Team:Groningen/Results">Results</a> | | <a href="/Team:Groningen/Results">Results</a> |
| + | <a href="/Team:Groningen/Demonstrate">Demonstrate</a> |
| <a href="/Team:Groningen/Applications">Applications</a> | | <a href="/Team:Groningen/Applications">Applications</a> |
− | <a href="/Team:Groningen/FuturePerspectives">Future Perspectives</a> | + | <a href="/Team:Groningen/FuturePerspectives">Future<!-- Perspectives--></a> |
| + | <a href="/Team:Groningen/Notebook">Notebook</a> |
| </div> | | </div> |
| </div> | | </div> |
Line 89: |
Line 91: |
| <a href="/Team:Groningen/HP/Gold">Gold</a> | | <a href="/Team:Groningen/HP/Gold">Gold</a> |
| <a href="/Team:Groningen/HP/Silver">Silver</a> | | <a href="/Team:Groningen/HP/Silver">Silver</a> |
− | <!-- <a href="/Team:Groningen/HP/Outreach">Outreach</a> | + | <!-- <a href="/Team:Groningen/Integrated_Practices">Integrated Practices</a> |
| + | <a href="/Team:Groningen/Engagement">Engagement</a> |
| + | <a href="/Team:Groningen/HP/Outreach">Outreach</a> |
| <a href="/Team:Groningen/HP/Social">Social</a> | | <a href="/Team:Groningen/HP/Social">Social</a> |
| <a href="/Team:Groningen/HP/Legal">Legal</a> | | <a href="/Team:Groningen/HP/Legal">Legal</a> |
Line 111: |
Line 115: |
| | | |
| <hr /> | | <hr /> |
− | <script> | + | <script src="/Template:Groningen/index_js?action=raw&ctype=text/javascript"></script> |
− | function menuClickers(){
| + | |
− | var menuItems = $("#content-header .menu-item");
| + | |
− | | + | |
− | $(".menu-item img,.menu-title").click(function(evt){
| + | |
− | var item = $(this).parents('.menu-item').first();
| + | |
− | if(!item.hasClass('hover')){
| + | |
− | menuItems.removeClass('hover');
| + | |
− | }
| + | |
− | item.toggleClass('hover');
| + | |
− | | + | |
− | evt.stopPropagation();
| + | |
− | });
| + | |
− | | + | |
− | $(document).click(function(){
| + | |
− | menuItems.removeClass('hover');
| + | |
− | });
| + | |
− | }
| + | |
− | | + | |
− | function updateCollapseAll(){
| + | |
− | var img = $('#collapse-all img').first();
| + | |
− |
| + | |
− | if(collapsers.open){
| + | |
− | img.attr('src', 'https://static.igem.org/mediawiki/2016/7/77/T--Groningen--minux.png');
| + | |
− | }else{
| + | |
− | img.attr('src', 'https://static.igem.org/mediawiki/2016/f/fa/T--Groningen--plus.png');
| + | |
− | }
| + | |
− | }
| + | |
− |
| + | |
− | function hideOne(h, sec){
| + | |
− | if(!sec.hasClass('hide')){
| + | |
− | collapsers.open--;
| + | |
− | }
| + | |
− | sec.addClass('hide');
| + | |
− | h.addClass('collapsed');
| + | |
− |
| + | |
− | updateCollapseAll();
| + | |
− | }
| + | |
− | | + | |
− | function showOne(h, sec, rec){
| + | |
− | var id = h.attr('id');
| + | |
− |
| + | |
− | if(sec.hasClass('hide')){
| + | |
− | collapsers.open++;
| + | |
− | }
| + | |
− |
| + | |
− | sec.removeClass('hide');
| + | |
− | h.removeClass('collapsed');
| + | |
− | updateCollapseAll();
| + | |
− |
| + | |
− | if(!rec){
| + | |
− | if(id) if(id.substr(0, 'collapser-'.length) !== 'collapser-'){
| + | |
− | window.location.hash = '#'+id;
| + | |
− | }
| + | |
− |
| + | |
− | sec.parents('.collapser-sec').each(function(){
| + | |
− | var sec = $(this), h = $('#'+sec.attr('id').substr('sec-'.length));
| + | |
− |
| + | |
− | showOne(h, sec, true);
| + | |
− | });
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | function collapsers(hlvl){
| + | |
− | var secs = $('.collapse'+ (hlvl ? '-' + hlvl : ''));
| + | |
− |
| + | |
− | function toggleOne(h, sec){
| + | |
− | if(sec.hasClass('hide')){
| + | |
− | showOne(h, sec);
| + | |
− | }else{
| + | |
− | hideOne(h, sec);
| + | |
− | }
| + | |
− | }
| + | |
− |
| + | |
− | secs.each(function(idx, sec){
| + | |
− | sec = $(sec);
| + | |
− |
| + | |
− | if(sec.hasClass('collapse-conditional')){
| + | |
− | var id = sec.attr('id');
| + | |
− | if(id){
| + | |
− | if(collapsers.allow.indexOf(id) === -1){
| + | |
− | return;
| + | |
− | }
| + | |
− | }else if(!collapsers.allowConditional){
| + | |
− | return;
| + | |
− | }
| + | |
− | }
| + | |
− |
| + | |
− | var h = sec.find(hlvl || 'h3').first(),
| + | |
− | hid = h.attr('id'), secid = sec.attr('id'), id;
| + | |
− |
| + | |
− | if(hid){
| + | |
− | if(!secid){
| + | |
− | secid = 'sec-'+hid;
| + | |
− | sec.attr('id', secid);
| + | |
− | id = hid;
| + | |
− | }
| + | |
− | }else if(secid){
| + | |
− | hid = secid;
| + | |
− | secid = 'sec-'+hid;
| + | |
− | h.attr('id', hid);
| + | |
− | sec.attr('id', secid);
| + | |
− | id = hid;
| + | |
− | }else{
| + | |
− | id = 'collapser-'+(collapsers.nextId++);
| + | |
− | secid = 'sec-'+id;
| + | |
− | sec.attr('id', secid);
| + | |
− | hid = id;
| + | |
− | h.attr('id', hid);
| + | |
− | }
| + | |
− |
| + | |
− | if(id !== hid){
| + | |
− | console.log(id, hid, secid);
| + | |
− | }
| + | |
− |
| + | |
− | h.insertBefore(sec);
| + | |
− | h.click(function(evt){
| + | |
− | toggleOne(h, sec);
| + | |
− | });
| + | |
− | h.addClass('collapser');
| + | |
− | sec.addClass('collapser-sec');
| + | |
− | collapsers.all.push({sec: sec, h: h});
| + | |
− |
| + | |
− | hideOne(h, sec);
| + | |
− | });
| + | |
− | }
| + | |
− | collapsers.open = 0;
| + | |
− | collapsers.openedOne = false;
| + | |
− | collapsers.allowConditional = false;
| + | |
− | collapsers.allow = [];
| + | |
− | collapsers.all = [];
| + | |
− | collapsers.nextId = 0;
| + | |
− | | + | |
− | function postcollapse(){
| + | |
− | function toggleAll(evt){
| + | |
− | evt.preventDefault();
| + | |
− |
| + | |
− | var open = collapsers.open;
| + | |
− |
| + | |
− | collapsers.all.forEach(function(act){
| + | |
− | if(open){
| + | |
− | hideOne(act.h, act.sec);
| + | |
− | }else{
| + | |
− | showOne(act.h, act.sec, true);
| + | |
− | }
| + | |
− | });
| + | |
− |
| + | |
− | return false;
| + | |
− | }
| + | |
− |
| + | |
− | if(collapsers.all.length){
| + | |
− | var wrap = $('#ayoop-wrap'),
| + | |
− | btn = $('<a id="collapse-all"><img src="https://static.igem.org/mediawiki/2016/7/77/T--Groningen--minux.png" title="Collapse all" alt="Collapse all" /></a>');
| + | |
− |
| + | |
− | wrap.prepend(btn);
| + | |
− | btn.click(toggleAll);
| + | |
− | }
| + | |
− |
| + | |
− | collapsers.open = 0;
| + | |
− |
| + | |
− | if(window.location.hash.length > 1){
| + | |
− | var h = $(window.location.hash), sec;
| + | |
− |
| + | |
− | if(!h.length){
| + | |
− | return;
| + | |
− | }
| + | |
− |
| + | |
− | sec = $('#sec-'+h.attr('id'));
| + | |
− |
| + | |
− | showOne(h, sec);
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | function memberate(){
| + | |
− | var mems = {
| + | |
− | eike: "https://static.igem.org/mediawiki/2016/0/00/T--Groningen--team-eike.png",
| + | |
− | bente: "https://static.igem.org/mediawiki/2016/a/ab/T--Groningen--team-bente.png",
| + | |
− | daniel: "https://static.igem.org/mediawiki/2016/e/e1/T--Groningen--team-daniel.jpg",
| + | |
− | sambit: "https://static.igem.org/mediawiki/2016/f/f0/T--Groningen--team-sambit.jpg",
| + | |
− | luis: "https://static.igem.org/mediawiki/2016/0/0b/T--Groningen--team-luis.jpg",
| + | |
− | matthia: "https://static.igem.org/mediawiki/2016/e/e2/T--Groningen--team-matthia.jpg",
| + | |
− | mareike: "https://static.igem.org/mediawiki/2016/9/9a/T--Groningen--team-mareike.jpg",
| + | |
− | bara: "https://static.igem.org/mediawiki/2016/7/7f/T--Groningen--team-barbora.jpg",
| + | |
− | kathinka: "https://static.igem.org/mediawiki/2016/d/d6/T--Groningen--team-kathinka.jpg",
| + | |
− | ilona: "https://static.igem.org/mediawiki/2016/0/05/T--Groningen--team-ilona.jpg",
| + | |
− | carlos: "https://static.igem.org/mediawiki/2016/f/f0/T--Groningen--team-carlos.jpg",
| + | |
− | pj: "https://static.igem.org/mediawiki/2016/a/a7/T--Groningen--team-pj.jpg",
| + | |
− | marco: "https://static.igem.org/mediawiki/2016/a/a3/T--Groningen--team-agar-marco.jpg"
| + | |
− | }, mem = window.location.hash, elm = $('#memberate');
| + | |
− |
| + | |
− | if(!mem || mem.length < 2){
| + | |
− | return;
| + | |
− | }
| + | |
− |
| + | |
− | mem = mem.substr(1);
| + | |
− |
| + | |
− | if(!mems.hasOwnProperty(mem)){
| + | |
− | return;
| + | |
− | }
| + | |
− | console.log(mem);
| + | |
− |
| + | |
− | if(!elm || !elm.length){
| + | |
− | elm = $('<img style="max-width: 100px; max-height: 100px; position: fixed; bottom: 0; left: 0; opacity: 0.1; z-index: 2" onmouseover="this.style.opacity=0.9;" onmouseout="this.style.opacity=0.1;" id="memberate" />');
| + | |
− | elm.appendTo('#content_wrapper');
| + | |
− | }
| + | |
− |
| + | |
− | elm.attr('src', mems[mem]);
| + | |
− |
| + | |
− | $('a').each(function(a){
| + | |
− | var us = '/Team:Groningen';
| + | |
− | if(this.pathname.substr(0, us.length) === us)if(this.hash === '#' || this.hash === ''){
| + | |
− | this.hash = '#' + mem;
| + | |
− | }
| + | |
− | });
| + | |
− | }
| + | |
− | | + | |
− | // Source: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
| + | |
− | function cyclers(){
| + | |
− | var cycs = $('.cycler');
| + | |
− |
| + | |
− | function cycleImages(idx, cyc){
| + | |
− | cyc = $(cyc);
| + | |
− |
| + | |
− | var imgs = cyc.find('img:not(.base)'),
| + | |
− | active = imgs.siblings('.active'),
| + | |
− | next = active.next();
| + | |
− |
| + | |
− | if(!next.length){
| + | |
− | next = imgs.first();
| + | |
− | }
| + | |
− |
| + | |
− | next.css('z-index',3); //move the next image up the pile
| + | |
− | active.fadeOut(1500, function(){ //fade out the top image
| + | |
− | active.removeClass('active').css('z-index', 2).show(); //reset the z-index and unhide the image
| + | |
− | next.css('z-index', 4).addClass('active'); //make the next image the top one
| + | |
− | });
| + | |
− | }
| + | |
− |
| + | |
− | function cycleAll(){
| + | |
− | cycs.each(cycleImages);
| + | |
− | }
| + | |
− |
| + | |
− | cycs.each(function(idx, cyc){
| + | |
− | cyc = $(cyc);
| + | |
− |
| + | |
− | cyc.find('img.base').removeClass('active').clone().prependTo(cyc).css('visibility', 'hidden');
| + | |
− | cyc.find('img.base').last().removeClass('base').addClass('active');
| + | |
− |
| + | |
− | /*var maxHt = cyc.height();
| + | |
− | cyc.find('img').each(function(idx, img){
| + | |
− | var ht = $(img).height();
| + | |
− | maxHt = ht > maxHt ? ht : maxHt;
| + | |
− | });
| + | |
− | cyc.height(maxHt);*/
| + | |
− | });
| + | |
− | | + | |
− | if(cycs)if(cycs.length){
| + | |
− | setInterval(cycleAll, 7000);
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | function ayOop(){
| + | |
− | var oop = $('#ayoop'),
| + | |
− | head = $('#content-header'),
| + | |
− | headOff = head.offset().top + head.height();
| + | |
− |
| + | |
− | function toggle(){
| + | |
− | if($(window).scrollTop() >= headOff){
| + | |
− | oop.show();
| + | |
− | }else{
| + | |
− | oop.hide();
| + | |
− | }
| + | |
− | if(window.location.hash === '#top'){
| + | |
− | window.location.replace('#');
| + | |
− | }
| + | |
− | }
| + | |
− |
| + | |
− | $(document).scroll(toggle);
| + | |
− | toggle();
| + | |
− | }
| + | |
− | | + | |
− | function fixify(){
| + | |
− | var fix = $('.fix');
| + | |
− | if(!fix || !fix.length){
| + | |
− | return;
| + | |
− | }
| + | |
− | var off = fix.offset(),
| + | |
− | topMenu = $('#top_menu_14').height();
| + | |
− |
| + | |
− | $(document).scroll(function(){
| + | |
− | if($(window).scrollTop() >= off.top){
| + | |
− | fix.removeClass('static').addClass('fixed');
| + | |
− | fix.width(fix.parent().width());
| + | |
− | fix.css('top', topMenu);
| + | |
− | }else{
| + | |
− | fix.removeClass('fixed').addClass('static');
| + | |
− | fix.width(fix.parent().width());
| + | |
− | //guide.css
| + | |
− | }
| + | |
− | });
| + | |
− | }
| + | |
− | | + | |
− | function fixTitle(){
| + | |
− | var firstH2 = $('h2').first()[0],
| + | |
− | suff = 'CryptoGErM - iGEM Groningen 2016';
| + | |
− | document.title = (firstH2 ? firstH2.innerText + ' - ' : '') + suff
| + | |
− | }
| + | |
− | | + | |
− | $(document).ready(function(){
| + | |
− | menuClickers();
| + | |
− | collapsers();
| + | |
− | collapsers('h2');
| + | |
− | collapsers('h3');
| + | |
− | collapsers('h4');
| + | |
− | postcollapse();
| + | |
− | memberate();
| + | |
− | cyclers();
| + | |
− | ayOop();
| + | |
− | fixify();
| + | |
− | fixTitle();
| + | |
− | });
| + | |
− | | + | |
− | window.onhashchange = memberate;
| + | |
− | </script> | + | |
| | | |
| <div id="groningen-wrapper"> | | <div id="groningen-wrapper"> |
| | | |
| </html> | | </html> |