Team:Nanjing NFLS/humanpractice.html
From 2014hs.igem.org
(Difference between revisions)
AlexGorilla (Talk | contribs) |
|||
(10 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | ||
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> | <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> | ||
- | < | + | <title>Human Practice | iGEM Nanjing_NFLS</title> |
- | + | <style type="text/css"> | |
- | + | #menubar { | |
- | + | font-size: 12px | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
p{ | p{ | ||
- | + | line-height:100% | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
div#contentSub{ | div#contentSub{ | ||
display: none; | display: none; | ||
- | position: absolute;left: 0px;top: 0px; | + | position: absolute; |
+ | left: 0px; | ||
+ | top: 0px; | ||
} | } | ||
div#top-section{ | div#top-section{ | ||
Line 127: | Line 31: | ||
border:none; | border:none; | ||
height: 100%; | height: 100%; | ||
- | margin:0 0 0 | + | margin:0 0 0 0px; |
padding:0; | padding:0; | ||
- | |||
position: absolute; | position: absolute; | ||
background-color: #E3E3E3; | background-color: #E3E3E3; | ||
- | |||
- | |||
line-height: normal; | line-height: normal; | ||
- | width: | + | width: 1350px; |
- | border-left-width: | + | border-left-width:0px; |
border-right-width:0px; | border-right-width:0px; | ||
padding:0px; | padding:0px; | ||
Line 146: | Line 47: | ||
#top-section { | #top-section { | ||
background-color: #444444; | background-color: #444444; | ||
- | height: | + | height: 0px; |
border-width:0px; | border-width:0px; | ||
border-top-width:0px; | border-top-width:0px; | ||
Line 162: | Line 63: | ||
height: 0px; | height: 0px; | ||
} | } | ||
- | |||
- | |||
#searchInput | #searchInput | ||
{ | { | ||
Line 181: | Line 80: | ||
body { | body { | ||
background-color: #E3E3E3; | background-color: #E3E3E3; | ||
- | + | width: 100%; | |
- | width: | + | |
padding: 0px; | padding: 0px; | ||
margin: 0px; | margin: 0px; | ||
Line 197: | Line 95: | ||
position: absolute; | position: absolute; | ||
width: 1350px; | width: 1350px; | ||
- | height: | + | height: 697px; |
- | z-index: | + | z-index: 1; |
left: 0px; | left: 0px; | ||
top: 0px; | top: 0px; | ||
Line 211: | Line 109: | ||
left: 32px; | left: 32px; | ||
top: 1px; | top: 1px; | ||
+ | } | ||
+ | #banner { | ||
+ | position: absolute; | ||
+ | width: 1350px; | ||
+ | height: 100px; | ||
+ | z-index: 19; | ||
+ | left: 282px; | ||
+ | top: 0px; | ||
+ | opacity: 0.6; | ||
} | } | ||
#primary-nav { | #primary-nav { | ||
position: absolute; | position: absolute; | ||
- | width: | + | width: 1800px; |
- | height: | + | height: 50px; |
z-index: 2; | z-index: 2; | ||
- | + | left:290px; | |
- | top: | + | top: 116px; |
} | } | ||
#primary-nav li{ | #primary-nav li{ | ||
Line 253: | Line 160: | ||
position: absolute; | position: absolute; | ||
width: 160px; | width: 160px; | ||
- | height: | + | height: 216px; |
left: -500px; | left: -500px; | ||
top: 136px; | top: 136px; | ||
Line 304: | Line 211: | ||
z-index: 19; | z-index: 19; | ||
} | } | ||
- | # | + | #mainframe { |
position: absolute; | position: absolute; | ||
- | + | top: 182px; | |
- | + | ||
left: 0px; | left: 0px; | ||
- | + | height: 465px; | |
- | + | width: 1350px; | |
+ | z-index:1; | ||
} | } | ||
- | # | + | #leftarrow { |
position: absolute; | position: absolute; | ||
- | width: | + | top: 168px; |
+ | left: 0px; | ||
+ | width: 100px; | ||
height: 100px; | height: 100px; | ||
- | z-index: | + | opacity: 0.5; |
- | left: | + | z-index:5; |
+ | } | ||
+ | #rightarrow { | ||
+ | position: absolute; | ||
+ | top: 168px; | ||
+ | right: 0px; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | opacity: 0.5; | ||
+ | z-index:6; | ||
+ | } | ||
+ | #slide1 { | ||
+ | margin-left: 125px; | ||
+ | margin-right: 125px; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
top: 0px; | top: 0px; | ||
+ | height: 465px; | ||
+ | width: 1100px; | ||
+ | z-index: 3; | ||
+ | font-size: 22px; | ||
+ | |||
+ | } | ||
+ | #slide2 { | ||
+ | margin-left: 125px; | ||
+ | margin-right: 125px; | ||
+ | position: absolute; | ||
+ | left: 1350px; | ||
+ | top: 0px; | ||
+ | height: 465px; | ||
+ | width: 1100px; | ||
+ | z-index: 3; | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | #bottom { | ||
+ | position: absolute; | ||
+ | width: 1350px; | ||
+ | height: 50px; | ||
+ | left: 0px; | ||
+ | top: 647px; | ||
opacity: 0.6; | opacity: 0.6; | ||
+ | z-index:100; | ||
} | } | ||
</style> | </style> | ||
Line 331: | Line 279: | ||
y:ev.clientY + document.body.scrollTop - document.body.clientTop | y:ev.clientY + document.body.scrollTop - document.body.clientTop | ||
}; | }; | ||
- | } | + | }; |
$(document).ready(function(ev){ | $(document).ready(function(ev){ | ||
- | |||
var menu1 = $("div.menuPlist"); | var menu1 = $("div.menuPlist"); | ||
var menu2 = $("div.menuNlist"); | var menu2 = $("div.menuNlist"); | ||
- | var | + | var cont = new Array("<img src=\"https://static.igem.org/mediawiki/2014hs/c/c9/NFLSHP1.jpg\" width=\"800\" height=\"425\" />", "<p><div style=\"color:#FF0000\">A Club</div>To attract more attention on the competition and our project about the CRISPR-Cas system, we ran a club named iGEMER at NFLS(Nanjing Foreign Languages School) and held educational and elementary activities on the days of Nanjing Club Summit and NFLS Club Salon, the most ceremonious club celebrations in Nanjing and in NFLS. Once or twice a week hundreds of students took part in the club activities including the study group about synthetic biology in which they shared the latest findings and breakthroughs in biological field, the lectures given by the well-known professors from China Pharmaceutical University about the development of the modern biological technologies, transformation from the simple-helix structure of RNA to the double-helix structure of DNA, construction and application of Biobricks, some hands-on experiments such as the DNA extraction finished by the students from different grades, and trips and studies in the labs in universities and companies. We set up a platform for every high school students interested in biology to share their novel ideas. During the practice, we prepared presentations about the topic we were going to talk about before the seminar started and in that case the different levels of students’ previous knowledge would not cause any frictions. After the seminar, we got a large amount of positive feedbacks from the club members and successfully aroused the sparks and potential interest around us.</p>", "<img src=\"https://static.igem.org/mediawiki/2014hs/f/fd/NFLSHP2.png\" width=\"500\" height=\"465\" />", "<p><div style=\"color:#FF0000\">A Homepage</div>A home page about our study has been created since we started our project. On the website, we have several segments: team introduction, project progress, notebook, results and conclusions, safety, attributions, human practices and amusement. Along with the project underway, the new findings and periodical conclusions were added into the context of relative segments.</p><p>Apart from the homepage we created,, we also posed some updates on social network such as Wechat, RENREN and Weibo. We attracted a lot of attention from the public and lots of them also participated in our group discussion. Several great ideas generated here. At the same time, we put the link to our homepage on these channels, which increased the everyday visits to our website.</p>", "<img src=\"https://static.igem.org/mediawiki/2014hs/6/6f/NFLSHP4.png\" width=\"800\" height=\"425\" />", "<p><div style=\"color:#FF0000\">Acknowledgment</div>We thank Professor Hong Zhu and Hong Tian for their instruction and consultation during our experiments, Principal Zhengjing Dong for his support and encouragement which give us initial motivation to participate in the competition, and China Pharmaceutical University and Nanjing University for facilities support. Last but not least, we want to thank iGEM competition to give us this chance practicing what we really want to do in the future.</p>"); |
- | + | var now = 0; | |
- | + | var anchorsl = location.hash; | |
- | + | if (anchorsl != "") { | |
- | $("# | + | anchorsl = parseInt(anchorsl.substring(1, anchorsl.length + 1)); |
+ | now = anchorsl; | ||
+ | }; | ||
+ | $("#slide1").html(cont[now]); | ||
$("#nav-notebook").mouseover(function(){ | $("#nav-notebook").mouseover(function(){ | ||
if ($("#menuNotebook").hasClass("cur")) { | if ($("#menuNotebook").hasClass("cur")) { | ||
Line 467: | Line 417: | ||
$("#menuP-hbar" + String(i + 1)).animate({opacity:'1'}, 200); | $("#menuP-hbar" + String(i + 1)).animate({opacity:'1'}, 200); | ||
}; | }; | ||
+ | }); | ||
+ | $("#leftarrow").click(function(){ | ||
+ | if (now > 0) { | ||
+ | if ($("#slide1").hasClass("cur")) { | ||
+ | return; | ||
+ | }; | ||
+ | $("#slide1").addClass("cur"); | ||
+ | now -= 1; | ||
+ | $("#slide2").html(cont[now]); | ||
+ | $("#slide2").css("left", -1350); | ||
+ | $("#slide1").animate({"left":1350}, 1000); | ||
+ | $("#slide2").animate({"left":0}, 1000, function() { | ||
+ | $("#slide1").html(cont[now]); | ||
+ | $("#slide1").css("left", 0); | ||
+ | $("#slide2").css("left", -1350); | ||
+ | $("#slide1").removeClass("cur"); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | $("#rightarrow").click(function(){ | ||
+ | if (now < cont.length - 1) { | ||
+ | if ($("#slide1").hasClass("cur")) { | ||
+ | return; | ||
+ | }; | ||
+ | $("#slide1").addClass("cur"); | ||
+ | now += 1; | ||
+ | $("#slide2").html(cont[now]); | ||
+ | $("#slide2").css("left", 1350); | ||
+ | $("#slide1").animate({"left":-1350}, 1000); | ||
+ | $("#slide2").animate({"left":0}, 1000, function() { | ||
+ | $("#slide1").html(cont[now]); | ||
+ | $("#slide1").css("left", 0); | ||
+ | $("#slide2").css("left", 1350); | ||
+ | $("#slide1").removeClass("cur"); | ||
+ | }); | ||
+ | } | ||
}); | }); | ||
}); | }); | ||
Line 474: | Line 460: | ||
<body topmargin="0"> | <body topmargin="0"> | ||
<div id="page"> | <div id="page"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<div id="logo"><img src="https://static.igem.org/mediawiki/2014hs/7/73/NFLSLOGONEW.jpg" width="250" height="157" alt="iGEM_NFLS" /></div> | <div id="logo"><img src="https://static.igem.org/mediawiki/2014hs/7/73/NFLSLOGONEW.jpg" width="250" height="157" alt="iGEM_NFLS" /></div> | ||
- | + | <div id="banner"><img src="https://static.igem.org/mediawiki/2014hs/3/31/NFLS_banner.jpg" width="1350" height="100" alt="banner" /></div> | |
<div id="primary-nav"> | <div id="primary-nav"> | ||
<ul> | <ul> | ||
- | <li | + | <li id="nav-main" ><a href="https://2014hs.igem.org/Team:Nanjing_NFLS">MAIN</a></li> |
<li id="nav-project"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/project.html">PROJECT</a></li> | <li id="nav-project"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/project.html">PROJECT</a></li> | ||
<li id="nav-biobricks"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html">BIOBRICKS</a></li> | <li id="nav-biobricks"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html">BIOBRICKS</a></li> | ||
<li id="nav-notebook"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html">NOTEBOOK</a></li> | <li id="nav-notebook"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html">NOTEBOOK</a></li> | ||
<li id="nav-safety"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/safety.html">SAFETY</a></li> | <li id="nav-safety"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/safety.html">SAFETY</a></li> | ||
- | <li id="nav-humanpractice | + | <li class="selected" id="nav-humanpractice"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/humanpractice.html">HUMAN PRACTICE</a></li> |
<li id="nav-team"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/team.html">TEAM</a></li> | <li id="nav-team"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/team.html">TEAM</a></li> | ||
<li id="nav-ourpartners"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/ourpartners.html">OUR PARTNERS</a></li> | <li id="nav-ourpartners"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/ourpartners.html">OUR PARTNERS</a></li> | ||
Line 545: | Line 480: | ||
<div id="menuPbar3" class="menuPlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html';">FUNCTION</div> | <div id="menuPbar3" class="menuPlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html';">FUNCTION</div> | ||
<div id="menuPbar4" class="menuPlist" style="top:136px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#9';">ADVANTAGE</div> | <div id="menuPbar4" class="menuPlist" style="top:136px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#9';">ADVANTAGE</div> | ||
- | <div id="menuPbar5" class="menuPlist" style="top:176px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#design' | + | <div id="menuPbar5" class="menuPlist" style="top:176px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#design';">DESIGN</div> |
<div id="menuPbar6" class="menuPlist" style="top:216px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#buildup';">BUILD UP</div> | <div id="menuPbar6" class="menuPlist" style="top:216px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#buildup';">BUILD UP</div> | ||
<div id="menuP-hbar1" class="menuP-hbar" style="top:55px"></div> | <div id="menuP-hbar1" class="menuP-hbar" style="top:55px"></div> | ||
Line 560: | Line 495: | ||
<div id="menuN-hbar2" class="menuN-hbar" style="top:95px"></div> | <div id="menuN-hbar2" class="menuN-hbar" style="top:95px"></div> | ||
</div> | </div> | ||
+ | |||
+ | <div id="mainframe"> | ||
+ | <div id="leftarrow"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/9/97/LeftArrow.png" width="100" height="100" alt="leftArrow" /> | ||
+ | </div> | ||
+ | <div id="slide1"> | ||
+ | </div> | ||
+ | <div id="slide2"> | ||
+ | </div> | ||
+ | <div id="rightarrow"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/c/cc/RightArrow.png" width="100" height="100" alt="rightArrow" /> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
<div id="bottom" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2014hs/a/a2/NFLS_bottom.png" width="1350" height="50" alt="bottomimage" /></div> | <div id="bottom" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2014hs/a/a2/NFLS_bottom.png" width="1350" height="50" alt="bottomimage" /></div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 03:52, 21 June 2014