|
|
| Line 5: |
Line 5: |
| | | | |
| | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/initial&action=raw&ctype=text/css"> | | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/initial&action=raw&ctype=text/css"> |
| − |
| |
| − | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
| |
| | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> |
| − | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css" /> | + | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css"> |
| | + | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS2&action=raw&ctype=text/css"> |
| | | | |
| | | | |
| − | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | + | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
| − | <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> | + | <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> |
| − | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> |
| − | <link rel="stylesheet" href="css/style.css"> | + | <link rel="stylesheet" href="css/style.css"> |
| | | | |
| | | | |
| | | | |
| − | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/Collaborations&action=raw&ctype=text/css" /> | + | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/Collaborations&action=raw&ctype=text/css" /> |
| | | | |
| | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Sans" /> | | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Sans" /> |
| | <style> | | <style> |
| − |
| |
| | /* unvisited link */ | | /* unvisited link */ |
| | | | |
| Line 41: |
Line 39: |
| | cursor: pointer; | | cursor: pointer; |
| | } | | } |
| − | .w3-wide{ | + | |
| − | font-weight: 900;
| + | .w3-wide { |
| − | font-size: 350%;
| + | font-weight: 900; |
| − | font-family: "Josefin Sans","JosefinSans-Bold",NotoSansCJKtc-Regular,'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
| + | font-size: 350%; |
| | + | font-family: "Josefin Sans", "JosefinSans-Bold", NotoSansCJKtc-Regular, 'Noto Sans', "微軟雅黑", "Microsoft YaHei", Helvetica, sans-serif; |
| | } | | } |
| − | .w3-justify{ | + | |
| − | font-size: 22px;
| + | .w3-justify { |
| − | font-family: "Josefin Sans","JosefinSans-Regular",Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
| + | font-size: 22px; |
| | + | font-family: "Josefin Sans", "JosefinSans-Regular", Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif; |
| | } | | } |
| | + | |
| | /* selected link */ | | /* selected link */ |
| | | | |
| Line 60: |
Line 61: |
| | <!-- Main Section --> | | <!-- Main Section --> |
| | | | |
| − | <br>
| + | <br> |
| − | <br>
| + | <br> |
| | | | |
| | | | |
| | <body> | | <body> |
| | | | |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| | | | |
| | | | |
| − | <section class="strips">
| |
| − | <article class="strips__strip">
| |
| − | <div class="strip__content">
| |
| − |
| |
| − | <h2 class="strip__title" data-name="Lorem">Collarboration with NTHU_Taiwan</h2>
| |
| − | <div class="strip__inner-text">
| |
| − | <div class="w3-container w3-padding-64 w3-center"><br><br><br>
| |
| − | <p class="w3-center" style="font-size:40px;">2018.08.03<br>Team Collaboration</p>
| |
| − | <br><br>
| |
| − |
| |
| − | <img class="w3-left" src="https://static.igem.org/mediawiki/2018/6/6f/T--NTHU_Formosa--%E4%BA%9E%E6%B4%B202.jpg" align=center style="width:40%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − |
| |
| − | <p class="w3-justify" style="font-size:20px;"> As a team composed of members from biology background, we gladly offer help and troubleshoot the problem on making construct for team NTHU_Taiwan, being insufficient with members from biology department. Since August 3rd, we had several meetings with 2018 iGEM team NTHU_Taiwan.<br><br>
| |
| − | Earlier before the meeting, NTHU_Taiwan designed the gene of insert for their experiment. After getting the synthesized gene part from IDT and digesting both the inserts and the vectors, they proceeded to ligation, which failed after times they tried. <br><br>
| |
| − | We went through details from their design of the gene, cutting site and protocols. Later we concluded that the major reason for failing to make the constructs is due to low concentration of the inserts left following digestion and purification.<br><br>
| |
| − | We re-designed primers for NTHU_Taiwan and suggested NEBuilder Assembly kit, so that they can avoid the loss of their inserts while digesting and purifying the DNA. The kit requires lower DNA input and can save time by avoiding PCR amplification steps. <br><br>
| |
| − | A few weeks later, we were informed that NTHU_Taiwan still failed to make the constructs. Therefore, we provided our lab for their experiments and kept an eye on them through out their experiments to make sure that there’s no man-made technical false. <br><br>
| |
| − | Gladly, after several meetup with us and our assistance in lab, team NTHU_Taiwan successfully made all three constructs they needed-- pSB1C3 - AHL snesor - Anti – STAR, pSB1C3 - pLac – STAR, pSB1C3 - pLux – GFP. It was very pleasant experience to work with NTHU_Taiwan.<br><br>
| |
| − | Since we urge to seek help in building wiki page, in return, NTHU_Taiwan also give us host a meeting with us teaching coding and giving us tips that help making wiki page easier for us. We took the wiki pages designed by previous teams as examples to learn and practiced basic coding skills.</p><br><br>
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/9/9f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%97.png" align=left style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/2f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%9702.png" align=right style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − |
| |
| − | <p class="w3-center" style="font-size:20px;">Validating construct used in our Biowatcher experiment is also involved in our collaboration. </p>
| |
| | | | |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/d/d5/T--NTHU_Formosa--%E6%93%B7%E5%8F%962.png" align=center style="width:50%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − | <br>
| |
| − | <p class="w3-center" style="font-size:20px;">Constructs from the left to right: </p>
| |
| − | <p class="w3-center" style="font-size:20px;">pCAG-GBP, pTRE3G-LuxAB, pCMV-LuxCDEfrp and pTRE3G-mCherry</p><br>
| |
| − |
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/9/9f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%97.png" align=left style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/2f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%9702.png" align=right style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;";>
| |
| − |
| |
| | | | |
| | | | |
| − | </p><br><br>
| + | <section class="strips"> |
| − |
| + | <article class="strips__strip"> |
| − |
| + | <div class="strip__content"> |
| − | </div>
| + | |
| − | </div> | + | |
| − | </div>
| + | |
| − | </article>
| + | |
| | | | |
| | + | <h2 class="strip__title" data-name="Lorem">Collarboration with NTHU_Taiwan</h2> |
| | + | <div class="strip__inner-text"> |
| | + | <div class="w3-container w3-padding-64 w3-center"> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <p class="w3-center" style="font-size:40px;">2018.08.03 |
| | + | <br>Team Collaboration</p> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <img class="w3-left" src="https://static.igem.org/mediawiki/2018/6/6f/T--NTHU_Formosa--%E4%BA%9E%E6%B4%B202.jpg" align=center style="width:40%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| | | | |
| | + | <p class="w3-justify" style="font-size:20px;"> As a team composed of members from biology background, we gladly offer help and troubleshoot the problem on making construct for team NTHU_Taiwan, being insufficient with members from biology department. Since August 3rd, we had several meetings |
| | + | with 2018 iGEM team NTHU_Taiwan. |
| | + | <br> |
| | + | <br> Earlier before the meeting, NTHU_Taiwan designed the gene of insert for their experiment. After getting the synthesized gene part from IDT and digesting both the inserts and the vectors, they proceeded to ligation, which failed after times |
| | + | they tried. |
| | + | <br> |
| | + | <br> We went through details from their design of the gene, cutting site and protocols. Later we concluded that the major reason for failing to make the constructs is due to low concentration of the inserts left following digestion and purification. |
| | + | <br> |
| | + | <br> We re-designed primers for NTHU_Taiwan and suggested NEBuilder Assembly kit, so that they can avoid the loss of their inserts while digesting and purifying the DNA. The kit requires lower DNA input and can save time by avoiding PCR amplification |
| | + | steps. |
| | + | <br> |
| | + | <br> A few weeks later, we were informed that NTHU_Taiwan still failed to make the constructs. Therefore, we provided our lab for their experiments and kept an eye on them through out their experiments to make sure that there’s no man-made technical |
| | + | false. |
| | + | <br> |
| | + | <br> Gladly, after several meetup with us and our assistance in lab, team NTHU_Taiwan successfully made all three constructs they needed-- pSB1C3 - AHL snesor - Anti – STAR, pSB1C3 - pLac – STAR, pSB1C3 - pLux – GFP. It was very pleasant experience |
| | + | to work with NTHU_Taiwan. |
| | + | <br> |
| | + | <br> Since we urge to seek help in building wiki page, in return, NTHU_Taiwan also give us host a meeting with us teaching coding and giving us tips that help making wiki page easier for us. We took the wiki pages designed by previous teams |
| | + | as examples to learn and practiced basic coding skills.</p> |
| | + | <br> |
| | + | <br> |
| | + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/9/9f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%97.png" align=left style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| | + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/2f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%9702.png" align=right style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| | | | |
| − |
| + | <p class="w3-center" style="font-size:20px;">Validating construct used in our Biowatcher experiment is also involved in our collaboration. </p> |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| | | | |
| − | <article class="strips__strip">
| + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/d/d5/T--NTHU_Formosa--%E6%93%B7%E5%8F%962.png" align=center style="width:50%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| − | <div class="strip__content">
| + | <br> |
| − | <h2 class="strip__title" data-name="Ipsum">Collarboration with NCTU_Formosa</h2>
| + | <p class="w3-center" style="font-size:20px;">Constructs from the left to right: </p> |
| | + | <p class="w3-center" style="font-size:20px;">pCAG-GBP, pTRE3G-LuxAB, pCMV-LuxCDEfrp and pTRE3G-mCherry</p> |
| | + | <br> |
| | | | |
| − | <div class="strip__inner-text"><br><br><br><br><br><br>
| + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/9/9f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%97.png" align=left style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| − | <p class="w3-center" style="font-size:60px;padding-left:40px;padding-right:40px;">Team Collaboration</p>
| + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/2f/T--NTHU_Formosa--%E6%B8%85%E5%A4%A7%E5%AF%A6%E9%A9%9702.png" align=right style="width:45%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| − | <br><br>
| + | |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Since we are a fairly new iGEM team, we are not familiar with the details about iGEM competition. Therefore we turned to NCTU_Formosa, who hosted this meetup on Aug 24th, during which we took turns presented our project, gave each other feedbacks and suggestions. NCTU_Formosa is especially very helpful on our wiki page. As almost all of our team members are in biology background, building wiki page is truly a huge challenge for us. In this meeting, NCTU_Formosa spent a lot of time teaching and troubleshooting our problem on building wiki pages, for which they prepared a 2-hour-course containing content list below. This is truly a very successful and helpful collaboration. After the meetup, NCTU_Formosa stayed in contact with us by messenger to further assist us with constructing wiki page. T
| + | |
| − | </p><br><br>
| + | |
| − |
| + | |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Team NCTU_Formosa gave us a tutorial about html. During the tutorial, we learned:</p><br>
| + | |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">
| + | |
| − | 1. Basic tags and elements for html<br>
| + | |
| − | 2. Image scale and website format adjustment<br>
| + | |
| − | 3. Styling html with CSS and JavaScript<br>
| + | |
| − | 4. Conversion of websites in PC and mobile version</p><br>
| + | |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Thanks to NCTU_Formosa’s guide, discussion and their generosity to assist our problems through messages after the meetup. We both learned a lot from each other. </p><br>
| + | |
| | | | |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/25/T--NTHU_Formosa--%E4%BA%A4%E5%A4%A702.jpg" align=center style="width:60%;margin:20px 20px;box-shadow:3px 3px 12px gray;";> <br><br><br>
| |
| − |
| |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Since NCTU_Formosa is very interested in our project and we both would like to enhance our collaboration, we validated each other’s parts using in the experiments. NCTU-Formosa validated the DNA constructs we expressed in 293T cells in our experiments.</p><br><br><br>
| |
| − |
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/a/a0/T--NTHU_Formosa--%E6%93%B7%E5%8F%961.png" align=left style="width:35%;margin:20px 20px 20px 100px;box-shadow:3px 3px 12px gray;";>
| |
| | | | |
| − | <br><br><br><br><br>
| |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Constructs from the left to right:<br>
| |
| − | pCAG-GBP,pTRE3G-LuxAB,pCMV-LuxCDEfrp <br>and pTRE3G-mCherry</p>
| |
| − | <br><br><br><br><br><br>
| |
| − |
| |
| − | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/1/11/T--NTHU_Formosa--bacteriacin.png" align=left style="width:30%;margin:20px 20px 20px 120px;box-shadow:3px 3px 12px gray;";> <br><br><br>
| |
| − |
| |
| − | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">
| |
| − | We also validated the protein, bacteriacin.<br>
| |
| − | M: marker<br>
| |
| − | C: control<br>
| |
| − | E1: enterocin B<br>
| |
| − | E2: enterocin 96
| |
| − | </p><br><br><br>
| |
| − |
| |
| − |
| |
| | | | |
| − |
| + | </p> |
| | + | <br> |
| | + | <br> |
| | | | |
| | | | |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | </article> |
| | | | |
| | | | |
| − | <br><br><br><br>
| |
| | | | |
| − |
| |
| − | <p class="w3-center" style="font-size:20px;"></p><br>
| |
| | | | |
| | | | |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </article>
| |
| | | | |
| | | | |
| | | | |
| | | | |
| | + | <article class="strips__strip"> |
| | + | <div class="strip__content"> |
| | + | <h2 class="strip__title" data-name="Ipsum">Collarboration with NCTU_Formosa</h2> |
| | | | |
| | + | <div class="strip__inner-text"> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <p class="w3-center" style="font-size:60px;padding-left:40px;padding-right:40px;">Team Collaboration</p> |
| | + | <br> |
| | + | <br> |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Since we are a fairly new iGEM team, we are not familiar with the details about iGEM competition. Therefore we turned to NCTU_Formosa, who hosted this meetup on Aug 24th, during which we took turns presented our project, gave each other feedbacks |
| | + | and suggestions. NCTU_Formosa is especially very helpful on our wiki page. As almost all of our team members are in biology background, building wiki page is truly a huge challenge for us. In this meeting, NCTU_Formosa spent a lot of time |
| | + | teaching and troubleshooting our problem on building wiki pages, for which they prepared a 2-hour-course containing content list below. This is truly a very successful and helpful collaboration. After the meetup, NCTU_Formosa stayed in contact |
| | + | with us by messenger to further assist us with constructing wiki page. T |
| | + | </p> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Team NCTU_Formosa gave us a tutorial about html. During the tutorial, we learned:</p> |
| | + | <br> |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;"> |
| | + | 1. Basic tags and elements for html |
| | + | <br> 2. Image scale and website format adjustment |
| | + | <br> 3. Styling html with CSS and JavaScript |
| | + | <br> 4. Conversion of websites in PC and mobile version</p> |
| | + | <br> |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Thanks to NCTU_Formosa’s guide, discussion and their generosity to assist our problems through messages after the meetup. We both learned a lot from each other. </p> |
| | + | <br> |
| | | | |
| | + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/2/25/T--NTHU_Formosa--%E4%BA%A4%E5%A4%A702.jpg" align=center style="width:60%;margin:20px 20px;box-shadow:3px 3px 12px gray;" ;> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Since NCTU_Formosa is very interested in our project and we both would like to enhance our collaboration, we validated each other’s parts using in the experiments. NCTU-Formosa validated the DNA constructs we expressed in 293T cells in our experiments.</p> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/a/a0/T--NTHU_Formosa--%E6%93%B7%E5%8F%961.png" align=left style="width:35%;margin:20px 20px 20px 100px;box-shadow:3px 3px 12px gray;" ;> |
| | | | |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;">Constructs from the left to right: |
| | + | <br> pCAG-GBP,pTRE3G-LuxAB,pCMV-LuxCDEfrp |
| | + | <br>and pTRE3G-mCherry</p> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <img class="w3-round-large" src="https://static.igem.org/mediawiki/2018/1/11/T--NTHU_Formosa--bacteriacin.png" align=left style="width:30%;margin:20px 20px 20px 120px;box-shadow:3px 3px 12px gray;" ;> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | + | <p class="w3-justify" style="font-size:20px;padding-left:15px;padding-right:15px;"> |
| | + | We also validated the protein, bacteriacin. |
| | + | <br> M: marker |
| | + | <br> C: control |
| | + | <br> E1: enterocin B |
| | + | <br> E2: enterocin 96 |
| | + | </p> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | | | |
| Line 200: |
Line 229: |
| | | | |
| | | | |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | | | |
| | | | |
| | + | <p class="w3-center" style="font-size:20px;"></p> |
| | + | <br> |
| | | | |
| | | | |
| | | | |
| | | | |
| | + | </div> |
| | + | </div> |
| | + | </article> |
| | | | |
| | | | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <i class="fa fa-close strip__close"></i>
| + | |
| − | </section> | + | |
| | + | |
| | + | |
| | + | <i class="fa fa-close strip__close"></i> |
| | + | </section> |
| | <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | | <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> |
| | | | |
| − |
| |
| | | | |
| − | <script type="text/javascript">
| |
| − | var Expand = (function() {
| |
| − | var tile = $('.strips__strip');
| |
| − | var tileLink = $('.strips__strip > .strip__content');
| |
| − | var tileText = tileLink.find('.strip__inner-text');
| |
| − | var stripClose = $('.strip__close');
| |
| − |
| |
| − | var expanded = false;
| |
| | | | |
| − | var open = function() { | + | <script type="text/javascript"> |
| − | | + | var Expand = (function() { |
| − | var tile = $(this).parent();
| + | var tile = $('.strips__strip'); |
| | + | var tileLink = $('.strips__strip > .strip__content'); |
| | + | var tileText = tileLink.find('.strip__inner-text'); |
| | + | var stripClose = $('.strip__close'); |
| | | | |
| − | if (!expanded) { | + | var expanded = false; |
| − | tile.addClass('strips__strip--expanded');
| + | |
| − | // add delay to inner text
| + | var open = function() { |
| − | tileText.css('transition', 'all .5s .3s cubic-bezier(0.23, 1, 0.32, 1)');
| + | |
| − | stripClose.addClass('strip__close--show');
| + | var tile = $(this).parent(); |
| − | stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
| + | |
| − | expanded = true;
| + | if (!expanded) { |
| − | }
| + | tile.addClass('strips__strip--expanded'); |
| − | };
| + | // add delay to inner text |
| − |
| + | tileText.css('transition', 'all .5s .3s cubic-bezier(0.23, 1, 0.32, 1)'); |
| − | var close = function() {
| + | stripClose.addClass('strip__close--show'); |
| − | if (expanded) {
| + | stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)'); |
| − | tile.removeClass('strips__strip--expanded');
| + | expanded = true; |
| − | // remove delay from inner text
| + | } |
| − | tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
| + | }; |
| − | stripClose.removeClass('strip__close--show');
| + | |
| − | stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
| + | var close = function() { |
| − | expanded = false;
| + | if (expanded) { |
| − | }
| + | tile.removeClass('strips__strip--expanded'); |
| − | }
| + | // remove delay from inner text |
| | + | tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)'); |
| | + | stripClose.removeClass('strip__close--show'); |
| | + | stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)') |
| | + | expanded = false; |
| | + | } |
| | + | } |
| | | | |
| − | var bindActions = function() {
| + | var bindActions = function() { |
| − | tileLink.on('click', open);
| + | tileLink.on('click', open); |
| − | stripClose.on('click', close);
| + | stripClose.on('click', close); |
| − | };
| + | }; |
| | | | |
| − | var init = function() {
| + | var init = function() { |
| − | bindActions();
| + | bindActions(); |
| − | };
| + | }; |
| | | | |
| − | return {
| + | return { |
| − | init: init
| + | init: init |
| − | };
| + | }; |
| | | | |
| − | }());
| + | }()); |
| | | | |
| − | Expand.init();</script> | + | Expand.init(); |
| | + | </script> |
| | | | |
| | | | |
