Team:Bielefeld-Germany

From 2011.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
-
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
+
<div id="wowslider-container1">
-
<style type="text/css">
+
<div class="ws_images">
-
/* DEPRECATED FILE */
+
<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>
-
 
+
<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>
-
/* this makes it possible to add next button beside scrollable */
+
<a href="#wows0" title="group_foto4"><img src="http://2011.igem-bielefeld.de/includes/wiki/tooltips/group_foto4.jpg" alt="group_foto4"/>1</a>
-
.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>
-
float:left;
+
<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>
-
}
+
</div></div>
-
 
+
<a style="display:none" href="http://wowslider.com">jQuery Slider Xml by WOWSlider.com v1.7</a>
-
/* prev, next, prevPage and nextPage buttons */
+
</div>
-
a.prev, a.next, a.prevPage, a.nextPage {
+
<script type="text/javascript" src="http://2011.igem-bielefeld.de/includes/wiki/script.js"></script>
-
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:770px;
+
-
}
+
-
+
-
/* 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:48, 19 September 2011

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