|
|
| (12 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> |
| Line 50: |
Line 50: |
| | <a href="/Team:Groningen/Demonstrate">Demonstrate</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> | | <a href="/Team:Groningen/Notebook">Notebook</a> |
| | </div> | | </div> |
| Line 91: |
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 113: |
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);
| + | |
| − | }
| + | |
| − | updateCollapseAll();
| + | |
| − | }
| + | |
| − | | + | |
| − | 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"
| + | |
| − | }*/{
| + | |
| − | eike: "https://static.igem.org/mediawiki/2016/thumb/0/00/T--Groningen--team-eike.png/159px-T--Groningen--team-eike.png.jpeg",
| + | |
| − | bente: "https://static.igem.org/mediawiki/2016/thumb/a/ab/T--Groningen--team-bente.png/159px-T--Groningen--team-bente.png.jpeg",
| + | |
| − | daniel: "https://static.igem.org/mediawiki/2016/thumb/e/e1/T--Groningen--team-daniel.jpg/159px-T--Groningen--team-daniel.jpg",
| + | |
| − | sambit: "https://static.igem.org/mediawiki/2016/thumb/f/f0/T--Groningen--team-sambit.jpg/159px-T--Groningen--team-sambit.jpg",
| + | |
| − | luis: "https://static.igem.org/mediawiki/2016/thumb/0/0b/T--Groningen--team-luis.jpg/159px-T--Groningen--team-luis.jpg",
| + | |
| − | matthia: "https://static.igem.org/mediawiki/2016/thumb/e/e2/T--Groningen--team-matthia.jpg/159px-T--Groningen--team-matthia.jpg",
| + | |
| − | mareike: "https://static.igem.org/mediawiki/2016/thumb/9/9a/T--Groningen--team-mareike.jpg/159px-T--Groningen--team-mareike.jpg",
| + | |
| − | bara: "https://static.igem.org/mediawiki/2016/thumb/7/7f/T--Groningen--team-barbora.jpg/159px-T--Groningen--team-barbora.jpg",
| + | |
| − | kathinka: "https://static.igem.org/mediawiki/2016/thumb/d/d6/T--Groningen--team-kathinka.jpg/159px-T--Groningen--team-kathinka.jpg",
| + | |
| − | ilona: "https://static.igem.org/mediawiki/2016/thumb/0/05/T--Groningen--team-ilona.jpg/159px-T--Groningen--team-ilona.jpg",
| + | |
| − | carlos: "https://static.igem.org/mediawiki/2016/thumb/f/f0/T--Groningen--team-carlos.jpg/159px-T--Groningen--team-carlos.jpg",
| + | |
| − | pj: "https://static.igem.org/mediawiki/2016/thumb/a/a7/T--Groningen--team-pj.jpg/159px-T--Groningen--team-pj.jpg",
| + | |
| − | marco: "https://static.igem.org/mediawiki/2016/thumb/7/7e/T--Groningen--team-marco.jpg/159px-T--Groningen--team-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);
| + | |
| − |
| + | |
| − | if(!cyc.data('done')){
| + | |
| − | return;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 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.data('done', false);
| + | |
| − | var imgs = cyc.find('img'),
| + | |
| − | base = imgs.filter('.base'),
| + | |
| − | backlog = imgs.length;
| + | |
| − |
| + | |
| − | base.removeClass('active').clone().prependTo(cyc).css('visibility', 'hidden');
| + | |
| − | base.last().removeClass('base').addClass('active');
| + | |
| − | imgs.click(function(){
| + | |
| − | cycleImages(0, cyc);
| + | |
| − | }).on('load', function(){
| + | |
| − | backlog--;
| + | |
| − |
| + | |
| − | if(!backlog){
| + | |
| − | cyc.data('done', true);
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | /*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, 5000);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | 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> |
