Team:UCLondon/Templates/timeline-struct

From 2012e.igem.org

(Difference between revisions)
 
(25 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
-
<script src="http://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.51.js" type="text/javascript"></script>
+
<script src="https://dl.dropbox.com/u/3703109/igeme/js/jquery.timelinr-0.9.51.js" type="text/javascript"></script>
Line 21: Line 21:
   #timeline{  
   #timeline{  
-
           width:550px;
+
           width:600px;
 +
          margin:auto !important;
           overflow: hidden;
           overflow: hidden;
           position: relative;
           position: relative;
Line 27: Line 28:
#dates {
#dates {
-
width:550px;
+
width:600px;
height: 60px;
height: 60px;
overflow: hidden;
overflow: hidden;
Line 53: Line 54:
#issues {
#issues {
-
width: 550px;
+
width: 600px;
-
height: 250px;
+
height: 300px;
overflow: hidden;
overflow: hidden;
}
}
Line 60: Line 61:
/* check here */
/* check here */
#issues li {
#issues li {
-
width:550px;
+
width:600px;
-
height: 250px;
+
height: 300px;
list-style: none;
list-style: none;
float: left;
float: left;
-
                                 padding-left: 10px;
+
                                position:relative;
-
                                 padding-right:10px;
+
                                left: -30px;
 +
                                 padding-left: 0px;
 +
                                 padding-right:0px;
}
}
#issues li.selected img {
#issues li.selected img {
Line 95: Line 98:
}
}
-
#issues h1 { color: #497567; font-size:17pt; }
+
#issues h1 { color: #497567; font-size:17pt; font-family: Helvetica, sans-serif; }
 +
#issues li p {height:auto !important; width: 580px; padding-left:0px;}
 +
.participants {display: none;}
-
#prev, #next { color: #757575; }
+
 
 +
#prev, #next { color: #757575; font-size:25pt; }
Line 137: Line 143:
    
    
    
    
-
   $().timelinr();
+
   $(function(){
 +
$().timelinr();
 +
});
-
   setTimeout((function() {$('#issues').css('width', parseInt($('#issues').css('width').replace('px', '')) + 3000 +"px" ); }), 2000);
+
  // hack to increase the width of float element so the last item will display.
 +
   setTimeout((function() {$('#issues').css('width', parseInt($('#issues').css('width').replace('px', '')) + 500 +"px" ); }), 1500);
   //$('#issues').css('width', parseInt($('#issues').css('width').replace('px', '')) + 3000 +"px" );
   //$('#issues').css('width', parseInt($('#issues').css('width').replace('px', '')) + 3000 +"px" );

Latest revision as of 14:45, 20 January 2013