Team:Queens Canada/SynthetiQ/DNA
From 2012.igem.org
(Difference between revisions)
(8 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{Template:Queens_Canada/Header}} | {{Template:Queens_Canada/Header}} | ||
<html> | <html> | ||
+ | <br><br><br> | ||
<head> | <head> | ||
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/cufon-yui?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/cufon-yui?action=raw&ctype=text/js"></script> | ||
Line 8: | Line 9: | ||
.nivoSlider { | .nivoSlider { | ||
position:relative; | position:relative; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.nivoSlider img { | .nivoSlider img { | ||
Line 19: | Line 14: | ||
top:0px; | top:0px; | ||
left:0px; | left:0px; | ||
- | |||
} | } | ||
- | .nivoSlider a { | + | /* If an image is wrapped in a link */ |
+ | .nivoSlider a.nivo-imageLink { | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | width:100%; | ||
+ | height:100%; | ||
border:0; | border:0; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | z-index:60; | ||
+ | display:none; | ||
} | } | ||
- | .nivo- | + | /* The slices in the Slider */ |
+ | .nivo-slice { | ||
display:block; | display:block; | ||
- | + | position:absolute; | |
- | + | z-index:50; | |
- | + | height:100%; | |
- | + | ||
- | + | ||
} | } | ||
- | + | /* Caption styles */ | |
- | + | .nivo-caption { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position:absolute; | position:absolute; | ||
- | left: | + | left:0px; |
- | bottom:- | + | bottom:0px; |
+ | background:#000; | ||
+ | color:#fff; | ||
+ | opacity:0.8; /* Overridden by captionOpacity setting */ | ||
+ | width:100%; | ||
+ | z-index:89; | ||
} | } | ||
- | + | .nivo-caption p { | |
- | + | padding:5px; | |
- | + | margin:0; | |
- | + | }'''Bold text''' | |
- | + | .nivo-caption a { | |
- | + | display:inline !important; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .nivo-html-caption { | |
- | + | display:none; | |
- | + | ||
- | + | ||
} | } | ||
- | + | /* Direction nav styles (e.g. Next & Prev) */ | |
- | + | .nivo-directionNav a { | |
- | display: | + | position:absolute; |
+ | z-index:99; | ||
+ | cursor:pointer; | ||
+ | color: white; | ||
+ | font-size: 2em; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | display: inline; | ||
+ | |||
} | } | ||
- | + | .nivo-prevNav { | |
- | + | left:0px; | |
- | margin- | + | top: 0px; |
+ | text-decoration: none; | ||
+ | margin-left:-52px; | ||
} | } | ||
- | + | .nivo-nextNav { | |
- | + | right:0px; | |
- | + | top: 0px; | |
- | + | margin-right:-55px; | |
+ | text-decoration: none; | ||
} | } | ||
- | + | /* Control nav styles (e.g. 1,2,3...) */ | |
- | + | .nivo-controlNav a { | |
position:relative; | position:relative; | ||
- | + | z-index:99; | |
- | + | cursor:pointer; | |
- | + | bottom: -280px; | |
- | + | font-size: 1.5em; | |
+ | left: 220px; | ||
+ | text-decoration: none; | ||
+ | color: black; | ||
+ | display: none; | ||
} | } | ||
- | + | .nivo-controlNav a.active { | |
- | - | + | font-weight:bold; |
- | + | ||
- | + | ||
} | } | ||
- | |||
</style> | </style> | ||
- | + | <script type="text/javascript"> | |
- | + | $(window).load(function() { | |
- | </ | + | $('#slider').nivoSlider(); |
- | + | }); | |
- | < | + | </script> |
- | + | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(window).load(function() { | $(window).load(function() { | ||
$('#slider').nivoSlider({ | $('#slider').nivoSlider({ | ||
- | effect:' | + | effect:'fold,fade,sliceDown' //Specify sets like: 'fold,fade,sliceDown' |
slices:15, | slices:15, | ||
animSpeed:500, //Slide transition speed | animSpeed:500, //Slide transition speed | ||
- | pauseTime: | + | pauseTime:10000, |
startSlide:0, //Set starting Slide (0 index) | startSlide:0, //Set starting Slide (0 index) | ||
directionNav:true, //Next & Prev | directionNav:true, //Next & Prev | ||
Line 118: | Line 121: | ||
manualAdvance:false, //Force manual transitions | manualAdvance:false, //Force manual transitions | ||
captionOpacity:0.8, //Universal caption opacity | captionOpacity:0.8, //Universal caption opacity | ||
- | beforeChange: function(){}, | + | beforeChange: function(){setTimeout(5000);}, |
afterChange: function(){}, | afterChange: function(){}, | ||
slideshowEnd: function(){} //Triggers after all slides have been shown | slideshowEnd: function(){} //Triggers after all slides have been shown | ||
}); | }); | ||
}); | }); | ||
+ | |||
+ | |||
</script> | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="content2" style="background-color: black; color: white;"> | ||
+ | <br> | ||
+ | <br> <p style="margin-left:auto; margin-right:auto;"> To help you understand our forthcoming videos better, here is a basic rundown of DNA structure and how our human models illustrate this.</p> | ||
+ | <div id="slider container" style="width: 500px; margin-left:auto; margin-right: auto; margin-top: 50px;"> | ||
+ | <div id="slider"> | ||
+ | <img src="http://farm8.staticflickr.com/7222/7366464440_828f152294.jpg" title=" | ||
+ | DNA Helix-DNA is a right-handed double helix. If you curl the fingers of your right hand and point your thumb up, you will see that each strand coils upwards in the direction your fingers are pointing in." | ||
+ | /> | ||
+ | <a href="#"><img src="http://farm9.staticflickr.com/8157/7366465658_d0a3ca5cfa.jpg" alt="" title="Direction-DNA strands have directionality. Each strand has a 5’ (“five prime”) end and a 3’ (“three prime”) end. An open hand represents the 5’ end. A closed fist represents the 3’ end." /></a> | ||
+ | <img src="http://farm9.staticflickr.com/8165/7366465066_bc774895ae.jpg" alt="" title="Antiparallel-DNA strands are arranged antiparallel to each other, meaning that they run parallel to each other but have opposite alignments. The 5’ end of one strand is bound to the 3’ end of the other strand. You will always see an open hand next to a closed fist." /> | ||
+ | <img src="http://farm8.staticflickr.com/7102/7366463810_ce5143ed38.jpg" alt="" title="Primer Binding-DNA polymerase is the enzyme that synthesizes a new strand of DNA on an existing single strand of DNA. However, it needs a primer to get started, which is short strand of RNA. Here, a primer is binding to the 3’ end of a single-stranded DNA molecule, in preparation for synthesis of a new DNA molecule in the 5’ to 3’ direction."/> | ||
+ | </div> | ||
+ | <div id="htmlcaption" class="nivo-html-caption"> | ||
+ | <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
</body> | </body> |
Latest revision as of 02:40, 24 October 2012
Control
To help you understand our forthcoming videos better, here is a basic rundown of DNA structure and how our human models illustrate this.