Team:SYSU-Software/notebook.js
From 2013.igem.org
$(document).ready(function() {
var data = [{ time: "10th Mar.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Recruitment of Team Member -- 10th,Mar. to 30th,Mar.', 'Promulgation and Seminar -- 10th,Mar. to 10th,Mar.', 'Interview with Applicants -- 18th,Mar. to 18th,Mar.', 'Kick-off Meeting -- 30th,Mar to 30th,Mar'] }, { time: "1st Apr.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Project Start-up -- 1st,Apr. to 30th,Apr.', 'Literature Review of Synthetic Biology -- 1st,Apr. to 30th,Apr.', 'Model Preparation -- 1st,Apr. to 30th,Apr.', 'Logo Design -- 1st,Apr. to 15th,Apr.', 'Wiki Page Initialization -- 1st,Apr. to 15th,Apr.', 'Wiki Headers, Footers and Links -- 16th,Apr. to 21th,Apr.', 'Wiki Content -- 23th,Apr. to 23th,Apr.', 'Wiki Content and Framework -- 23th,Apr. to 29th,Apr.', 'Software Programming Framework Construction -- 1st,Apr. to 30th,Apr.'] }, { time: "1st May.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Topic Selection -- 1st,May. to 30th,May.', 'Paticipation in the iGEM seminar held by Beijing Genomics Institute -- 26th,May. to 26th,May.', 'Document of Regulated Promoter -- 7th,May. to 12th,May.', 'Selection of Topic -- 1st,May. to 30th,May.'] }, { time: "1st Jun.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['School Final Examination Month -- 1st,Jun. to 30th,Jun.', 'Programing -- 1st,Jun. to 15th,Jun.', 'Document for Plasmid assembling Experiment -- 25th,May. to 2nd,Jun.', 'Game Document -- 25th,Jun. to 27th,Jun.'] }, { time: "1st July.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Front end -- 1st,July. to 31th,July.', 'Interaction Document -- 1st,July. to 8th,July.', 'Programming -- 9th,July. to 1st,Aug.', 'Game -- 8th,July. to 24th,July.', 'Design of Wiki Page -- 8th,July. to 23th,July.', 'Core Part of Modeling -- 1st,July. to 20th,July.', 'Biotic Experiment -- 25th,July. to 3rd,Aug.'] }, { time: "1st Aug.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Back end and Interface -- 1st,Aug. to 31th,Aug.', 'Database Development -- 2nd,Aug. to 2nd,Aug.', 'Computation of Experssion Rate -- 3rd,Aug. to 3rd,Aug.', 'Front end Document Version 2.0 -- 6th,Aug. to 6th,Aug.', 'Back end Document -- 1st,Aug. to 7th,Aug.', 'Front end UI Design -- 3rd,Aug. to 10th,Aug.', 'Back end Demo,12 days -- 4th,Aug. to 15th,Aug.', 'Full Version of Modeling -- 4th,Aug. to 15th,Aug.', 'Front end Graphical Interface Update -- 6th,Aug. to 31th,Aug.', 'Data Collection -- 16th,Aug. to 31th,Aug.'] }, { time: "5th Aug.", picurl: 'https://static.igem.org/mediawiki/2013/b/bb/Photo1.png', content: ['Human Practice -- 5th,Aug. to 20th.Sep.', 'Team T-shirt Initial Design -- 5th,Aug. to 15th,Aug.', 'Full Version of Game Demo -- 5th,Aug. to 15th,Aug.', 'Team T-shirt Final Design -- 16th,Aug. to 25th,Aug.', 'Final Version of the Game -- 16th,Aug. to 25th,Aug.', 'Toys -- 10th,Aug. to 31th,Aug.', 'Counter Promotion -- 10th,Sep. to 20th,Sep.', 'Promulgation and Seminar -- 10th,Sep. to 20th,Sep.', 'Inviting Other Teams to Use -- 10th,Sep. to 20th,Sep.', 'Wiki Documents and Materials -- 1st,Sep. to 20th,Sep.', 'Team Photo Taking -- 10th,Sep. to 10th,Sep.'] }, { time: "1st Sep.", picurl: 'https://2013.igem.org/File:IMG_20130924_222916.jpg', content: ['Debug and Modify -- 1st,Sep. to 19th,Sep.', 'Model Demostration -- 1st,Sep. to 19th,Sep.', 'Experimental Verification -- 1st,Sep. to 19th,Sep.', 'Software Debugging -- 1st,Sep. to 19th,Sep.'] }, { time: "21st Sep.", picurl: 'https://2013.igem.org/File:IMG_20130923_192421.jpg', content: ['Preparation for the Competition -- 21th,Sep to 3rd,Oct.', 'Powerpoint -- 21th,Sep to 3rd,Oct.', 'Poster -- 21th,Sep to 3rd,Oct.', 'Logistics -- 21th,Sep to 3rd,Oct.', 'Software Final Debugging -- 21th,Sep to 3rd,Oct.'] }];
renderTimeLine(data);
$("li > a").click(function(e) { e.preventDefault();
var id = $(this).attr('href').slice(1, $(this).attr('href').size);
var scrollTop = $('#' + id).offset().top; var curPos = $(window).scrollTop();
var step = Math.abs(scrollTop - curPos) / 200 ; var tid = setInterval(function() { if (curPos < scrollTop - 14) { curPos += step; window.scrollTo(0, curPos); } else if (curPos > scrollTop + 14) { curPos -= step; window.scrollTo(0, curPos); } else if (curPos < scrollTop + 14 || curPos > scrollTop - 14){ window.scrollTo(0, scrollTop); clearInterval(tid); } }, 0.01); });
$("#detail > #detail-block > li").css('height', $(window).height() + 'px');
$(window).scroll(function() { var scrollTop = $(window).scrollTop();
if (scrollTop <= 900) { $("#notebook").css({ 'position': 'fixed', 'top': '150px' }); $("#detail-timeline").css({ 'position': 'relative' }); } else if (scrollTop > 900 && scrollTop <= 1140) { $("#notebook").css({ 'position': 'relative' }); $("#detail-timeline").css({ 'position': 'relative' }); } else if (scrollTop > 1140) { $("#notebook").css({ 'position': 'relative' });
$("#detail-timeline").css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-301px' }); }
var idx = (scrollTop - 1336) / $(window).height(); $("#detail-timeline li.right a").css('color', 'white'); $("#detail-timeline li.right a").eq(parseInt(idx)).css('color', 'red'); });
});
function renderTimeLine(data) {
for (var i = 0; i < data.length; i++) { createBlock(data[i], i); }
function createBlock(itemData, idx) {var timeline = $("
var img = $("<img src=\"" + itemData.picurl + "\">"),title = $("
" + itemData.time + "
"), ul = $("for (var i = 0; i < itemData.content.length; i++) {ul.append("