Difference between revisions of "Team:Humboldt Berlin/Notebook"

Line 100: Line 100:
 
                 <div class="timeline">
 
                 <div class="timeline">
 
                     <div class="timeline-month tl-first-element"
 
                     <div class="timeline-month tl-first-element"
−
                         data-text="Information for january">
+
                         data-text="- Learning MoClo/Golden Gate Design <br>
−
                         January
+
                        - Research on PETase degradation <br>
 +
                        - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br>
 +
                        - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)."
 +
                        data-date="10/08 - 10/14">
 +
                         October <br> 2018
 
                     </div>
 
                     </div>
 
                     <div class="timeline-dot"
 
                     <div class="timeline-dot"
−
                         data-text="information for inbetween">
+
                         data-text="- Research on C. reinhardtii cultivation <br>
 +
                        <h2>YFP</h2>
 +
                        - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
 +
                        data-date="10/15 - 10/21">
 
                     </div>
 
                     </div>
−
                     <div class="timeline-month"
+
                     <div class="timeline-dot"
−
                         data-text="Information for february">
+
                         data-text="- Searching for gene templates <br>
−
                         February
+
                         <h2>chemical competent DH10B</h2>
 +
                        - production of chemical competent E. coli DH10B cells <br>
 +
                        - PCR for YFP B5-B5 with primer 7+8"
 +
                        data-date="10/22 - 10/28">
 
                     </div>
 
                     </div>
 
                     <div class="timeline-month"
 
                     <div class="timeline-month"
−
                         data-text="Information for march">
+
                         data-text="<h2>chemical competent DH10B</h2>
−
                         March
+
                        - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 +
                        <h2>ARS</h2>
 +
                        - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 +
                        <h2>GLE</h2>
 +
                        - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
 +
                        data-date="10/29 - 11/04"
 +
                        data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
 +
                         November
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="infobox">
 
                 <div class="infobox">
−
                     infobox
+
                     <h3 class="infobox-date"></h3>
 +
                    <img src="" alt="" class="infobox-image no-image"/>
 +
                    <p class="infobox-text"></p>
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
 
         </div>
 
         </div>
−
        </section>
 
 
     </main>
 
     </main>
  
Line 171: Line 189:
  
 
     <script>
 
     <script>
−
         const infobox = document.querySelector('.infobox');
+
         var elementOffset = 100;
 +
        var infobox = document.querySelector('.infobox');
 +
        var infoboxText = document.querySelector('.infobox-text');
 +
        var infoboxDate = document.querySelector('.infobox-date');
 +
        var infoboxImage = document.querySelector('.infobox-image');
 +
        var firstElement = document.querySelectorAll('.timeline > div')[0]
 +
 
 +
        infoboxText.innerHTML = firstElement.getAttribute('data-text');
 +
        infoboxDate.innerHTML = firstElement.getAttribute('data-date');
 +
 
 
         window.addEventListener("scroll", function () {
 
         window.addEventListener("scroll", function () {
 
             updateTimeline();
 
             updateTimeline();
Line 178: Line 205:
  
 
         function setFixedElements() {
 
         function setFixedElements() {
−
            const infobox = document.querySelector('.infobox');
 
 
             if (window.pageYOffset >= window.innerHeight) {
 
             if (window.pageYOffset >= window.innerHeight) {
 
                 infobox.classList.add('fixed')
 
                 infobox.classList.add('fixed')
Line 190: Line 216:
  
 
             [].forEach.call(elements, function(el) {
 
             [].forEach.call(elements, function(el) {
−
                 if (isElementVisible(el)) {
+
                 if (isElementActive(el)) {
 
                     el.classList.add('active-timeline-el')
 
                     el.classList.add('active-timeline-el')
 
                 } else {
 
                 } else {
Line 201: Line 227:
  
 
             if (lastActive !== undefined) {
 
             if (lastActive !== undefined) {
−
                 infobox.innerHTML = lastActive.getAttribute('data-text')
+
                 infoboxText.innerHTML = lastActive.getAttribute('data-text')
 +
                infoboxDate.innerHTML = lastActive.getAttribute('data-date');
 +
 
 +
                const imageUrl = lastActive.getAttribute('data-image');
 +
                if (imageUrl !== null) {
 +
                    infoboxImage.classList.remove('no-image')
 +
                    infoboxImage.src = imageUrl;
 +
                } else {
 +
                    infoboxImage.classList.add('no-image')
 +
                    infoboxImage.src = "";
 +
                }
 
             }
 
             }
 
         }
 
         }
  
 
         // rename?
 
         // rename?
−
         function isElementVisible(el) {
+
         function isElementActive(el) {
−
             var top = el.offsetTop;
+
             var top = el.offsetTop - elementOffset;
  
 
             while(el.offsetParent) {
 
             while(el.offsetParent) {

Revision as of 05:54, 24 September 2019

notebook

Notebook

October
2018
November