Team:Bielefeld-Germany
From 2011.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
<html> | <html> | ||
- | <div id=" | + | <style type="text/css"> |
- | < | + | |
- | < | + | |
- | < | + | /*********** navigator ***********/ |
- | < | + | |
- | < | + | /* main vertical scroll */ |
- | <div class=" | + | #main { |
- | < | + | position:relative; |
- | < | + | overflow:hidden; |
- | < | + | height: 450px; |
- | </div></div> | + | } |
- | < | + | |
- | + | /* root element for pages */ | |
- | + | #pages { | |
+ | position:absolute; | ||
+ | height:20000em; | ||
+ | } | ||
+ | |||
+ | /* single page */ | ||
+ | .page { | ||
+ | padding:10px; | ||
+ | height: 450px; | ||
+ | background:#222 url(https://static.igem.org/mediawiki/2011/d/da/H600.png) 0 0 repeat-x; | ||
+ | width:520px; | ||
+ | } | ||
+ | |||
+ | /* root element for horizontal scrollables */ | ||
+ | .scrollable { | ||
+ | position:relative; | ||
+ | overflow:hidden; | ||
+ | width: 510px; | ||
+ | height: 450px; | ||
+ | } | ||
+ | |||
+ | /* root element for scrollable items */ | ||
+ | .scrollable .items { | ||
+ | width:20000em; | ||
+ | position:absolute; | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | /* single scrollable item */ | ||
+ | .item { | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | width:500px; | ||
+ | height:450px; | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | /* main navigator */ | ||
+ | #main_navi { | ||
+ | float:left; | ||
+ | padding:0px !important; | ||
+ | margin:0px !important; | ||
+ | } | ||
+ | |||
+ | #main_navi li { | ||
+ | background-color:#333; | ||
+ | border-top:1px solid #666; | ||
+ | clear:both; | ||
+ | color:#FFFFFF; | ||
+ | font-size:12px; | ||
+ | height:75px; | ||
+ | list-style-type:none; | ||
+ | padding:10px; | ||
+ | width:190px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | #main_navi li:hover { | ||
+ | background-color:#444; | ||
+ | } | ||
+ | |||
+ | #main_navi li.active { | ||
+ | background-color:#555; | ||
+ | } | ||
+ | |||
+ | #main_navi img { | ||
+ | float:left; | ||
+ | margin-right:10px; | ||
+ | } | ||
+ | |||
+ | #main_navi strong { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | #main div.navi { | ||
+ | margin-left:250px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!-- main navigator --> | ||
+ | <ul id="main_navi"> | ||
+ | |||
+ | <li class="active"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/8/86/Bielefeld-wetlab-mini.png"/> | ||
+ | <strong>Project</strong> | ||
+ | Just awsome | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/2/27/Bielefeld-Germany2011-GFPtubes.jpg"/> | ||
+ | <strong>Wet Lab</strong> | ||
+ | So wet | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/6/6c/Bielefeld-Germany2011-analyticsklein.JPG" /> | ||
+ | <strong>Results</strong> | ||
+ | The best | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | <!-- root element for the main scrollable --> | ||
+ | <div id="main"> | ||
+ | |||
+ | <!-- root element for pages --> | ||
+ | <div id="pages"> | ||
+ | |||
+ | <!-- page #1 --> | ||
+ | <div class="page"> | ||
+ | |||
+ | <!-- sub navigator #1 --> | ||
+ | <div class="navi"></div> | ||
+ | |||
+ | <!-- inner scrollable #1 --> | ||
+ | <div class="scrollable"> | ||
+ | |||
+ | <!-- root element for scrollable items --> | ||
+ | <div class="items"> | ||
+ | |||
+ | <!-- items --> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/ae/Bielefeld-project-1.png" /> Abstract | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/1/1b/Bielefeld-project-2.png" /> Background | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!-- page #2 --> | ||
+ | <div class="page"> | ||
+ | |||
+ | <div class="navi"></div> | ||
+ | |||
+ | <!-- inner scrollable #2 --> | ||
+ | <div class="scrollable"> | ||
+ | |||
+ | <!-- root element for scrollable items --> | ||
+ | <div class="items"> | ||
+ | |||
+ | <!-- items on the second page --> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/0/0e/Bielefeld-wetlab-1.jpg" /> Labjournal | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" /> Protocols | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!-- page #3 --> | ||
+ | <div class="page"> | ||
+ | |||
+ | <div class="navi"></div> | ||
+ | |||
+ | <!-- inner scrollable #3 --> | ||
+ | <div class="scrollable"> | ||
+ | |||
+ | <!-- root element for scrollable items --> | ||
+ | <div class="items"> | ||
+ | |||
+ | <!-- items on the first page --> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/7/76/Bielefeld-results-2.png" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/a3/Bielefeld-results-1.JPG" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1.jpg" /> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready | ||
+ | $(document).ready(function() { | ||
+ | |||
+ | |||
+ | |||
+ | // main vertical scroll | ||
+ | $("#main").scrollable({ | ||
+ | |||
+ | // basic settings | ||
+ | vertical: true, | ||
+ | |||
+ | // up/down keys will always control this scrollable | ||
+ | keyboard: 'static', | ||
+ | |||
+ | // assign left/right keys to the actively viewed scrollable | ||
+ | onSeek: function(event, i) { | ||
+ | horizontal.eq(i).data("scrollable").focus(); | ||
+ | } | ||
+ | |||
+ | // main navigator (thumbnail images) | ||
+ | }).navigator("#main_navi"); | ||
+ | |||
+ | // horizontal scrollables. each one is circular and has its own navigator instance | ||
+ | var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi"); | ||
+ | |||
+ | |||
+ | // when page loads setup keyboard focus on the first horzontal scrollable | ||
+ | horizontal.eq(0).data("scrollable").focus(); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
<p></p> | <p></p> | ||
Revision as of 08:36, 19 September 2011
![](https://static.igem.org/mediawiki/2011/3/3c/Bielefeld-Germany2011-header-full.png)
![](https://static.igem.org/mediawiki/2011/a/ae/Bielefeld-project-1.png)
![](https://static.igem.org/mediawiki/2011/1/1b/Bielefeld-project-2.png)
![](https://static.igem.org/mediawiki/2011/0/0e/Bielefeld-wetlab-1.jpg)
![](http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg)
![](https://static.igem.org/mediawiki/2011/7/76/Bielefeld-results-2.png)
![](http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1.jpg)