Difference between revisions of "Template:Team:TU Eindhoven/Timeline Script"

 
(17 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
$(document).ready(function() {
 
$(document).ready(function() {
  
var eventInhoud = ['Designing of the desired constructs','Writing the protocols and gathering lab necessities','Gibson Assembly of LgBit & SmBit seperately in the pETDuet-1 vector','Gibson Assembly of LgBit & SmBit combined in the pETDuet-1 vector','Verifying sequences of the desired constructs','Gibson Assembly of Nanoluc & mNeongreen seperately in the pETDuet-1 vector (BRET system),'Gibson Assembly of Nanoluc & mNeongreen combined in the pETDuet-1 vector (BRET system)','Verifying sequences of the desired constructs','Verifying click reactions of seperate constructs with FACS', 'verifying fluorescense of seperate constructs','verifying bioluminescese of seperate constructs the BRET system and NanoBit'];
+
var eventInhoud = ['Designing of the desired constructs','Writing the protocols and gathering lab necessities','Gibson Assembly of LgBit & SmBit seperately in the pETDuet-1 vector','Gibson Assembly of LgBit & SmBit combined in the pETDuet-1 vector','Verifying sequences of the desired constructs','Gibson Assembly of Nanoluc & mNeongreen seperately in the pETDuet-1 vector (BRET system)','Gibson Assembly of Nanoluc & mNeongreen combined in the pETDuet-1 vector (BRET system)','Verifying sequences of the desired constructs','Verifying click reactions of seperate constructs with FACS', 'Verifying fluorescense of seperate constructs','Verifying bioluminescese of seperate constructs the BRET system and NanoBit'];
 +
 
 +
var spheres = [15,116,219,322,423,529,636,741,843,951,1052];
 +
var borders = ['68','100','102','101','102','108','105','105','102','106','69'];
  
 
for ( index = 1; index <= 11; index++){
 
for ( index = 1; index <= 11; index++){
  
     $("<div class='timeBlock' id='timeBlock" + index.toString() + "'></div>").appendTo("#timeline").css({'float':'left','width':'97px','height':'30px'});
+
     $("<div class='timeBlock' id='timeBlock" + index.toString() + "'></div>").appendTo("#timeline").css({'float':'left','width':borders[index-1] + 'px','height':'30px'});
 
+
$('<span class="tekst1" id=event'+ index.toString() +'>' + eventInhoud[index-1] + '</span>').appendTo("#event").css({'z-index':'-1','position':'absolute','top':'5px','left':'5px'});
 
}
 
}
  
Line 17: Line 20:
 
// hier komt de tekst voor je event (te zien als je hovert)
 
// hier komt de tekst voor je event (te zien als je hovert)
  
$('<p>' + eventInhoud[idnr-1] + '</p>').appendTo("#event")
+
for ( i = 1; i <= 11; i++){
$('#eventsContainer').css({'margin-left':((idnr-2)*104+16).toString() + 'px'});
+
$('#event'+i.toString() ).css({'z-index':'-1'});
 +
}
 +
$('#event'+idnr.toString() ).css({'z-index':'1'});
 +
$('#eventsContainer').css({'visibility':"initial",'margin-left':(spheres[idnr-1]-100).toString() + 'px'});
 
}
 
}
  
 
});
 
});
 
</html>
 
</html>

Latest revision as of 21:52, 20 November 2015

$(document).ready(function() { var eventInhoud = ['Designing of the desired constructs','Writing the protocols and gathering lab necessities','Gibson Assembly of LgBit & SmBit seperately in the pETDuet-1 vector','Gibson Assembly of LgBit & SmBit combined in the pETDuet-1 vector','Verifying sequences of the desired constructs','Gibson Assembly of Nanoluc & mNeongreen seperately in the pETDuet-1 vector (BRET system)','Gibson Assembly of Nanoluc & mNeongreen combined in the pETDuet-1 vector (BRET system)','Verifying sequences of the desired constructs','Verifying click reactions of seperate constructs with FACS', 'Verifying fluorescense of seperate constructs','Verifying bioluminescese of seperate constructs the BRET system and NanoBit']; var spheres = [15,116,219,322,423,529,636,741,843,951,1052]; var borders = ['68','100','102','101','102','108','105','105','102','106','69']; for ( index = 1; index <= 11; index++){ $("

").appendTo("#timeline").css({'float':'left','width':borders[index-1] + 'px','height':'30px'}); $('' + eventInhoud[index-1] + '').appendTo("#event").css({'z-index':'-1','position':'absolute','top':'5px','left':'5px'}); } $(".timeBlock").hover(function(){ showEvent( $(this).attr('id').match(/\d+/) ) },function(){ }); function showEvent(idnr) { // hier komt de tekst voor je event (te zien als je hovert) for ( i = 1; i <= 11; i++){ $('#event'+i.toString() ).css({'z-index':'-1'}); } $('#event'+idnr.toString() ).css({'z-index':'1'}); $('#eventsContainer').css({'visibility':"initial",'margin-left':(spheres[idnr-1]-100).toString() + 'px'}); } });