Team:Bielefeld-Germany

From 2011.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
-
<div id="wowslider-container1">
+
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
-
<div class="ws_images">
+
<style type="text/css">
-
<a href="https://2011.igem.org/Team:Bielefeld-Germany/Team"><img src="http://2011.igem-bielefeld.de/includes/wiki/images/group_foto4.jpg" alt="Team" title="Team" id="wows0"/>Check out more information about our team</a>
+
/* DEPRECATED FILE */
-
<a href="https://2011.igem.org/Team:Bielefeld-Germany/Project"><img src="http://2011.igem-bielefeld.de/includes/wiki/images/modellfinalfinal.jpg" alt="Project" title="Project" id="wows1"/>Detailed information about our project</a>
+
 
-
<a href="https://2011.igem.org/Team:Bielefeld-Germany/Safety"><img src="http://2011.igem-bielefeld.de/includes/wiki/images/logo_auf_weiss.jpg" alt="Safety" title="Safety" id="wows2"/>We care for biosecurity - check out our safety-page</a>
+
 
-
</div>
+
 
-
<div class="ws_bullets"><div>
+
 
-
<a href="#wows0" title="group_foto4"><img src="http://2011.igem-bielefeld.de/includes/wiki/tooltips/group_foto4.jpg" alt="group_foto4"/>1</a>
+
/* this makes it possible to add next button beside scrollable */
-
<a href="#wows1" title="Modell-final-final"><img src="http://2011.igem-bielefeld.de/includes/wiki/tooltips/modellfinalfinal.jpg" alt="Modell-final-final"/>2</a>
+
.scrollable {
-
<a href="#wows2" title="logo_auf_weiss"><img src="http://2011.igem-bielefeld.de/includes/wiki/tooltips/logo_auf_weiss.jpg" alt="logo_auf_weiss"/>3</a>
+
float:left;
-
</div></div>
+
}
-
<a style="display:none" href="http://wowslider.com">jQuery Slider Xml by WOWSlider.com v1.7</a>
+
 
-
</div>
+
/* prev, next, prevPage and nextPage buttons */
-
<script type="text/javascript" src="http://2011.igem-bielefeld.de/includes/wiki/script.js"></script>
+
a.prev, a.next, a.prevPage, a.nextPage {
 +
display:block;
 +
width:18px;
 +
height:18px;
 +
background:url(../img/scrollable/arrow/left.png) no-repeat;
 +
float:left;
 +
margin:43px 10px;
 +
cursor:pointer;
 +
font-size:1px;
 +
}
 +
 
 +
/* mouseover state */
 +
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
 +
background-position:0px -18px;
 +
}
 +
 
 +
/* disabled navigational button */
 +
a.disabled {
 +
visibility:hidden !important;
 +
}
 +
 
 +
/* next button uses another background image */
 +
a.next, a.nextPage {
 +
background-image:url(../img/scrollable/arrow/right.png);
 +
clear:right;
 +
}
 +
 
 +
 
 +
 
 +
/*********** navigator ***********/
 +
 
 +
 
 +
/* position and dimensions of the navigator */
 +
.navi {
 +
margin-left:328px;
 +
width:200px;
 +
height:20px;
 +
}
 +
 
 +
 
 +
/* items inside navigator */
 +
.navi a {
 +
width:8px;
 +
height:8px;
 +
float:left;
 +
margin:3px;
 +
background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
 +
display:block;
 +
font-size:1px;
 +
}
 +
 
 +
/* mouseover state */
 +
.navi a:hover {
 +
background-position:0 -8px;     
 +
}
 +
 
 +
/* active state (current page state) */
 +
.navi a.active {
 +
background-position:0 -16px;   
 +
}
 +
 
 +
 
 +
 
 +
/*********** navigator ***********/
 +
 
 +
/* main vertical scroll */
 +
#main {
 +
position:relative;
 +
overflow:hidden;
 +
height: 450px;
 +
}
 +
 +
/* 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="https://static.igem.org/mediawiki/2011/3/3b/Bielefeld-wetlab-2.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>  
 +
 +
</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 11:37, 19 September 2011

Abstract
Background
Labjournal
Protocols

Retrieved from "http://2011.igem.org/Team:Bielefeld-Germany"