|
|
(76 intermediate revisions by 4 users not shown) |
Line 1: |
Line 1: |
| {{Humboldt_Berlin}} | | {{Humboldt_Berlin}} |
| <html> | | <html> |
− |
| |
| | | |
| <div class="has-animations description no-js" id="container"> | | <div class="has-animations description no-js" id="container"> |
| <div class="container"> | | <div class="container"> |
| | | |
− | <!------------------------------------------ NAVIGATION --------------------------------------------------> | + | <!------------------------------------------ NAVIGATION --------------------------------------------------> |
− | <!-- INFO: move the class="active" to the correct <a> Tag --> | + | <!-- INFO: move the class="active" to the correct <a> Tag --> |
| | | |
| <nav> | | <nav> |
Line 31: |
Line 30: |
| <div class="submenu"> | | <div class="submenu"> |
| <a href="/Team:Humboldt_Berlin/Team">Team members</a> | | <a href="/Team:Humboldt_Berlin/Team">Team members</a> |
− | <a href="/Team:Humboldt_Berlin/Collaborations">Collaboration</a> | + | <a href="/Team:Humboldt_Berlin/Collaborations">Collaborations</a> |
| </div> | | </div> |
| </div> | | </div> |
Line 75: |
Line 74: |
| <a>Awards</a> | | <a>Awards</a> |
| <div class="submenu"> | | <div class="submenu"> |
− | <a href="/Team:Humboldt_Berlin/Entrepreneurship">Entrepreneurship</a>
| |
| <a href="/Team:Humboldt_Berlin/Hardware">Hardware</a> | | <a href="/Team:Humboldt_Berlin/Hardware">Hardware</a> |
| <a href="/Team:Humboldt_Berlin/Measurement">Measurement</a> | | <a href="/Team:Humboldt_Berlin/Measurement">Measurement</a> |
| <a href="/Team:Humboldt_Berlin/Model">Model</a> | | <a href="/Team:Humboldt_Berlin/Model">Model</a> |
| <a href="/Team:Humboldt_Berlin/Plant">Plant</a> | | <a href="/Team:Humboldt_Berlin/Plant">Plant</a> |
− | <a href="/Team:Humboldt_Berlin/Software">Software</a>
| |
| </div> | | </div> |
| </div> | | </div> |
| <div class="devider"></div> | | <div class="devider"></div> |
− | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> | + | <a href="https://2019.igem.org/Team:Humboldt_Berlin/Achievements"> |
| For Judges | | For Judges |
| </a> | | </a> |
Line 92: |
Line 89: |
| </nav> | | </nav> |
| | | |
− | <!------------------------------------------ NAVIGATION END --------------------------------------------------> | + | <!------------------------------------------ NAVIGATION END --------------------------------------------------> |
| | | |
− | <!------------------------------------------ HEADER--------------------------------------------------> | + | <!------------------------------------------ HEADER--------------------------------------------------> |
| <div class="fixed-header-container"> | | <div class="fixed-header-container"> |
| <section class="fixed-image-header"> | | <section class="fixed-image-header"> |
| <!-- HEADER IMAGE --> | | <!-- HEADER IMAGE --> |
− | <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" /> | + | <img src="https://static.igem.org/mediawiki/parts/9/91/Humboldt_Berlin_Contr_chromo-lysate-plate.jpg" alt="Colorporteins" /> |
| </section> | | </section> |
− |
| + | |
| <!-- HEADLINE TEXT --> | | <!-- HEADLINE TEXT --> |
− | <h1 class="page-headline description">Contribution</h1> | + | <h1 class="page-headline description" style="font-size: 9vw;line-height: 7vw;;color:#ffffff">Characterization</h1> |
| </div> | | </div> |
| | | |
− | <!------------------------------------------ HEADER END --------------------------------------------------> | + | <!------------------------------------------ HEADER END --------------------------------------------------> |
| | | |
| <section class="page-content fixed-header-content"> | | <section class="page-content fixed-header-content"> |
| <!---------- SUB HEADLINE -------------> | | <!---------- SUB HEADLINE -------------> |
− | <h2 class="page-subheadline">Subheadline</h2> | + | <h2 class="page-subheadline">It's colorful</h2> |
| + | <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------> |
| | | |
| + | <div class="two-columns"> |
| + | <div> |
| + | <!-----------------------------------------------------------------------> |
| + | <!------------------IGEM PROJECTS THAT INSPIRED US-----------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <h3 class="headline3">Characterizing Chromoproteins</h3> |
| + | <p class="block-text medium-sized"> |
| + | |
| + | We encountered problems when measuring the YFP-signal in our <i>C. reinhardtii</i> strains transformed with YFP, even though we were able to detect YFP when examining the cells with the fluorescence microscope. To get a better understanding of the protocols followed to measure absorbance and fluorescence spectra with a plate reader, as an example we conducted some measurements with fluorescent and non-fluorescent chromoproteins expressed in <i>E. coli</i>. |
| + | We tested three different chromoproteins from the iGEM Registry of Standard Biological Parts in terms of their absorption spectra (as well as the fluorescence spectrum in case of amajLime): <br/></p> |
| + | <ul style="font-size:18px"> |
| + | <li>amajLime from the coral <i>Anemonia majato</i> <a href="http://parts.igem.org/Part:BBa_K1033914">BBa_K1033914 </a></li> |
| + | <li>spisPink from the coral <i>Stylophora pistillata</i> <a href="http://parts.igem.org/Part:BBa_K1033923">BBa_K1033923</a></li> |
| + | <li>gfasPurple from the coral <i>Galaxea fascicularis</i> <a href="http://parts.igem.org/Part:BBa_K1033917">BBa_K1033917</a> </li> |
| + | </ul><p class="block-text medium-sized">Therefore we transformed the pSB1C3 vector with the respective chromoprotein construct (which all carry a <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_J23110">promotor </a> and <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_B0034">RBS sequence</a>) into <i>E. coli</i> (DH10B Competent Cells). After cultivation we lysed the harvested cells according to our <a href="https://2019.igem.org/Team:Humboldt_Berlin/Experiments"> lysis protocol.</a> |
| | | |
− | <!------------------------------------------ TWO COLUMN IMG LEFT --------------------------------------------------> | + | </p> |
| + | </div> |
| + | <div> |
| + | <!--- IMAGE ---> |
| + | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/a/a7/T--Humboldt_Berlin--farbproteine.jpeg" alt="Picture Chromoproteins" /> |
| + | </div> |
| + | </div> |
| + | |
| + | <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------> |
| + | <!------------------------------------------ TWO COLUMN IMG LEFT --------------------------------------------------> |
| | | |
| <div class="width-limit"> | | <div class="width-limit"> |
Line 118: |
Line 140: |
| <div> | | <div> |
| <!-- IMAGE --> | | <!-- IMAGE --> |
− | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" /> | + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/3/32/Humboldt_Berlin_Contr_chromo-pellet-pink-purple.jpg" alt="Chromoproteins spisPink & gfasPurple" /><figcaption> Fig. 1. - Picture of cell pellets: gfasPurple & spisPink</figcaption> |
| + | </figure> |
| </div> | | </div> |
| <div> | | <div> |
− | <!-----------------------------------------------------------------------> | + | <!-- IMAGE --> |
− | <!----------------------------TEXT---------------------------->
| + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/e/e4/Humboldt_Berlin_Contr_chromo-pellet-lime-controlle.jpg" alt="Chromoproteins amajLime & control" /><figcaption> Fig. 2. - Picture of cell pellets: amajLime & non-colored control</figcaption> |
− | <!----------------------------------------------------------------------->
| + | </figure> |
− | <h3 class="headline3">Text Headline</h3>
| + | |
− | <p class="block-text medium-sized">
| + | |
− | Text for the two column thingy here
| + | |
− | </p> | + | |
| </div> | | </div> |
| </div> | | </div> |
| + | </div> |
| | | |
| + | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> |
| + | <div class="padding-container"> |
| + | <div> |
| + | <p class="block-text medium-sized"> |
| + | With a plate reader (TECAN Plate Reader Infinite 200 Pro) we measured the absorbance (and fluorescence) spectra of the cleared lysate (Figure 3). For the interpretation of the spectra we utilized our lysis buffer as a blank measurement. |
| + | We obtained characteristic absorbance spectra for all three chromoproteins (Figure 4-6), with the respective absorbance peak equivalent to the values previously described in the literature (Liljeruhm et al. 2018). For the fluorescent chromoprotein amajLime we were able to measure an evident fluorescence spectrum with a clear peak at 493 nm (Figure 7). All spectra are plotted including their respective standard deviations. In Figure 8 the relative absorbance and fluorescence spectra of amajLime are shown to emphasize the Stokes shift of the spectral peaks. |
| | | |
− | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> | + | </p> |
| + | </div> |
| + | |
| + | <!------------------------------------------ TWO COLUMN IMG LEFT --------------------------------------------------> |
| | | |
− | <!---------------------------------------------- QUOTE --------------------------------------------------------> | + | <div class="width-limit" style="margin-bottom:0px"> |
− | | + | <div class="two-columns"> |
− | <blockquote class="quote image-left"> | + | <div> |
− | <div class="quote-image-container"> | + | <!-- IMAGE WITH CAPTION --> |
− | <!-- QUOTE IMAGE --> | + | <figure class="is-revealing"> |
− | <img src="https://static.igem.org/mediawiki/2019/2/2d/T--Humboldt_Berlin--flasche_igem.png" alt="plastic bottle illustration" /> | + | <img class="is-revealing" src="https://static.igem.org/mediawiki/parts/6/66/Humboldt_Berlin_Contr_chromo-lysates.jpg" alt="´Tubes with Cromoproteins" /> |
| + | <figcaption>Fig.3. - Picture of lysate amajLime, gfasPurple, spisPink, control: </figcaption> |
| + | </figure> |
| </div> | | </div> |
− | <div class="block-text big-underline big-text"> | + | <div> |
| <!-----------------------------------------------------------------------> | | <!-----------------------------------------------------------------------> |
− | <!---------------------------- Quote Text ----------------------------> | + | <!----------------------------TEXT----------------------------> |
| <!-----------------------------------------------------------------------> | | <!-----------------------------------------------------------------------> |
− | <p><b> | + | |
− | Have the Quote Text Here - it is underlined
| + | <table> |
− | </b></p>
| + | <tr> |
| + | <th colspan="2" scope="col" style="padding-left: 15px">Table 1. Parameters utilized for the measurement of absorbance and fluorescence spectra</th> |
| + | </tr> |
| + | <tr> |
| + | <th scope="col" style="padding-left: 15px">Parameter</th> |
| + | <th scope="col">Value</th> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Number of Samples </td> |
| + | <td>24 </td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Wavelength Step Size </td> |
| + | <td>2 </td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Absorbance Scan: Excitation Wavelength Measurement Range (nm)</td> |
| + | <td>[300-800]</td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Fluorescence Scan: Emission Wavelength Measurement Range (nm)</td> |
| + | <td>[475-550] </td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Fluorescence Scan: Excitation Wavelength (nm)</td> |
| + | <td>445 </td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Gain (G)</td> |
| + | <td>52</td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Number of Flashes</td> |
| + | <td>25</td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Integration Time (µs)</td> |
| + | <td>20</td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Lag Time (µs)</td> |
| + | <td>0</td> |
| + | </tr> |
| + | <tr> |
| + | <td style="padding-left: 15px">Settle Time (ms)</td> |
| + | <td>0</td> |
| + | </tr> |
| + | </table> |
| + | |
| </div> | | </div> |
− | </blockquote> | + | </div> |
− | | + | </div> |
− | <!---------------------------------------------- QUOTE END ------------------------------------------------------->
| + | |
− | | + | |
− | | + | |
− | <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------> | + | |
| | | |
| + | <div class="width-limit"> |
| <div class="two-columns"> | | <div class="two-columns"> |
| <div> | | <div> |
− | <!-----------------------------------------------------------------------> | + | <!-- IMAGE --> |
− | <!------------------IGEM PROJECTS THAT INSPIRED US-----------------------> | + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/7/7f/T--Humboldt_Berlin--CharacterisationGfasPurpleAbs.png" alt="Absorbance gfasPurple" /><figcaption> Fig. 4. - Absorbance spectrum of gfasPurple</figcaption> |
− | <!----------------------------------------------------------------------->
| + | </figure> |
− | <h3 class="headline3">Headline</h3>
| + | |
− | <p class="block-text medium-sized">
| + | |
− | Text for the two column image right block
| + | |
− | </p> | + | |
| </div> | | </div> |
| <div> | | <div> |
− | <!--- IMAGE ---> | + | <!-- IMAGE --> |
− | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/b/bc/T--Humboldt_Berlin--microplastic_icon.png" alt="microplastic icon" />
| + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/e/ec/T--Humboldt_Berlin--CharacterisationspisPinkAbs.png" alt="Absorbance spisPink" /><figcaption> Fig. 5. - Absorbance spectrum of spisPink</figcaption> |
| + | </figure> |
| </div> | | </div> |
| </div> | | </div> |
| + | </div> |
| | | |
− | <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------> | + | <div class="padding-container" style="margin-top:0px; margin-bottom:10px" > |
| | | |
− | | + | <div style=" float: left; width: 33.33%; padding: 5px;"> |
− | <!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------>
| + | <!-- IMAGE --> |
− | <div class="two-columns-headline">
| + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/c/ce/T--Humboldt_Berlin--CharacterisationAmajLimeAbs.png" alt="Absorbance amajLime" /><figcaption> Fig. 6. - Absorbance spectrum of amajLime </figcaption> |
− | <!-- HEADLINE -->
| + | </figure> |
− | <h3 class="headline3">Long text headline</h3>
| + | |
− | </div>
| + | |
− | <div class="two-columns block-text medium-sized not-centered no-margin-top">
| + | |
− | <div>
| + | |
− | <!-- TEXT - PARAGRAPHS ARE WRAPPED IN <p> TAGS -->
| + | |
− | <p>
| + | |
− | Paragraph Left 1
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Left 2
| + | |
− | </p>
| + | |
− | <br />
| + | |
− | <!-- IMAGE INBETWEEN -->
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/4/42/T--Humboldt_Berlin--chlamy_overview-cloning-system.png" alt="Pverview of the hierarchical and modular cloning system"/>
| + | |
− | <p>
| + | |
− | Paragraph Left 3
| + | |
− | </p> | + | |
| </div> | | </div> |
− | <div>
| + | <div style=" float: left; width: 33.33%; padding: 5px;"> |
− | <p> | + | <!-- IMAGE --> |
− | Paragraph Right 1
| + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/0/05/T--Humboldt_Berlin--CharacterisationAmajLimeFluo.png" alt="" /><figcaption> Fig. 7. - Fluorescence spectrum of amajLime </figcaption> |
− | </p>
| + | </figure> |
− | <p>
| + | |
− | Paragraph Right 2
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Right 3
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Right 4
| + | |
− | </p> | + | |
| </div> | | </div> |
− | </div>
| |
− | </div>
| |
− | </section>
| |
| | | |
− | <!------------------------------------------ TWO COLUMN LONG TEXT END --------------------------------------------> | + | <div style=" float: left; width: 33.33%; padding: 5px;"> |
| + | <!-- IMAGE --> |
| + | <figure class="is-revealing" > <img src="https://static.igem.org/mediawiki/parts/d/d4/T--Humboldt_Berlin--CharacterisationLimeRelative.png" alt="Absorbance amajLime" /><figcaption> Fig. 8. - Relative |
| + | absorbance and fluorescence spectra of amajLime</figcaption> |
| + | </figure> |
| + | </div> |
| + | </div> |
| + | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> |
| + | <div style="width: 20%; margin-left:auto;margin-right:auto"> |
| + | <!--------------------------------------- TO TOP LINK -----------------------------------------------> |
| + | <a href="#" class="to-top-link"> |
| + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg" /> Go to top |
| + | </a> |
| + | </div> |
| + | <!--------------------------------------- TO TOP LINK END -------------------------------------------> |
| + | </section> |
| | | |
− | <!------------------------------------------ DEVIDER LINE --------------------------------------------> | + | <!------------------------------------------ DEVIDER LINE --------------------------------------------> |
− | <div class="greyblue-devider"></div>
| + | <div class="greyblue-devider"></div> |
− | <!------------------------------------------ DEVIDER LINE END --------------------------------------------> | + | <!------------------------------------------ DEVIDER LINE END --------------------------------------------> |
| | | |
| + | <!------------------------------------------ TWO COLUMN SMALL TEXT --------------------------------------------> |
| | | |
− | <!------------------------------------------ TWO COLUMN SMALL TEXT -------------------------------------------->
| + | <section class="width-limit" > |
− | | + | <div class="two-columns block-text not-centered small-sized"> |
− | <section class="width-limit">
| + | <div> |
− | <div class="two-columns block-text not-centered small-sized">
| + | <!-- TEXT LEFT COLUMN --> |
− | <div>
| + | <p> Liljeruhm, Josefine et al. “Engineering a palette of eukaryotic chromoproteins for bacterial synthetic biology.” Journal of biological engineering vol. 12:8. 10 May. 2018, doi:10.1186/s13036-018-0100-0 |
− | <!-- TEXT LEFT COLUMN -->
| + | </p> |
− | <p>Small Text Left Column
| + | </div> |
| + | <div> |
| + | <!-- TEXT RIGHT COLUMN --> |
| + | |
| + | </div> |
| </div> | | </div> |
− | <div>
| + | </section> |
− | <!-- TEXT RIGHT COLUMN -->
| + | |
− | <p>Small Text Right Column</p>
| + | |
− | </div>
| + | |
− | </div> | + | |
− | </section>
| + | |
| | | |
− | <!------------------------------------------ TWO COLUMN SMALL TEXT END ----------------------------------------> | + | <!------------------------------------------ TWO COLUMN SMALL TEXT END ----------------------------------------> |
| | | |
− | </main>
| + | |
| | | |
− | <!------------------------------------------ FOOTER ----------------------------------------> | + | <!------------------------------------------ FOOTER ----------------------------------------> |
− | <div class="footer-container">
| + | <div class="footer-container"> |
− | <footer class="width-limit">
| + | <footer class="width-limit"> |
− | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" />
| + | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> |
− | <div class="footer-right">
| + | <div class="footer-right"> |
− | <ul>
| + | <ul> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin">
| + | <a href="/Team:Humboldt_Berlin"> |
| Home | | Home |
| </a> | | </a> |
− | </li>
| + | </li> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin/Team">
| + | <a href="/Team:Humboldt_Berlin/Team"> |
| Team | | Team |
| </a> | | </a> |
− | </li>
| + | </li> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin/Description">
| + | <a href="/Team:Humboldt_Berlin/Description"> |
| Project | | Project |
| </a> | | </a> |
− | </li>
| + | </li> |
− | </ul>
| + | </ul> |
− | <ul>
| + | <ul> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin/Parts">
| + | <a href="/Team:Humboldt_Berlin/Parts"> |
| Parts | | Parts |
| </a> | | </a> |
− | </li>
| + | </li> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin/Safety">
| + | <a href="/Team:Humboldt_Berlin/Safety"> |
| Safety | | Safety |
| </a> | | </a> |
− | </li>
| + | </li> |
− | <li>
| + | <li> |
− | <a href="/Team:Humboldt_Berlin/Human_Practices">
| + | <a href="/Team:Humboldt_Berlin/Human_Practices"> |
| Human Practices | | Human Practices |
| </a> | | </a> |
− | </li>
| + | </li> |
− | <li>
| + | <li> |
− | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
| + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| For Judges | | For Judges |
| </a> | | </a> |
− | </li>
| + | </li> |
− | </ul>
| + | </ul> |
− | </div>
| + | </div> |
− | </footer>
| + | </footer> |
| + | </div> |
| </div> | | </div> |
| | | |
| + | <!------------------------------------------ FOOTER END ----------------------------------------> |
| | | |
− | <!------------------------------------------ FOOTER END ---------------------------------------->
| + | <script> |
− | | + | (function () { |
− | <script> | + | document.querySelector('.no-js').classList.add('js') |
− | (function () { | + | document.querySelector('.no-js').classList.remove('no-js') |
− | document.querySelector('.no-js').classList.add('js')
| + | }()) |
− | document.querySelector('.no-js').classList.remove('no-js')
| + | |
− | }()) | + | window.addEventListener("scroll", function () { |
− | | + | const elements = document.querySelectorAll('.is-revealing'); |
− | window.addEventListener("scroll", function () { | + | |
− | const elements = document.querySelectorAll('.is-revealing');
| + | [].forEach.call(elements, function(el) { |
− | | + | if (isElementVisible(el)) { |
− | [].forEach.call(elements, function(el) {
| + | el.classList.add('is-revealing-visible') |
− | if (isElementVisible(el)) {
| + | } |
− | el.classList.add('is-revealing-visible')
| + | }); |
− | }
| + | }); |
− | });
| + | |
− | }); | + | function isElementVisible(el) { |
− | | + | var top = el.offsetTop; |
− | function isElementVisible(el) { | + | var height = el.offsetHeight; |
− | var top = el.offsetTop;
| + | |
− | var height = el.offsetHeight;
| + | while(el.offsetParent) { |
− | | + | el = el.offsetParent; |
− | while(el.offsetParent) {
| + | top += el.offsetTop; |
− | el = el.offsetParent;
| + | } |
− | top += el.offsetTop;
| + | |
− | }
| + | return ( |
− | | + | (top + height) <= (window.pageYOffset + window.innerHeight) + 100 |
− | return (
| + | ); |
− | (top + height) <= (window.pageYOffset + window.innerHeight) + 100
| + | } |
− | );
| + | </script> |
− | } | + | |
− | </script> | + | |
| | | |
| </html> | | </html> |