Team:UCLondon/Templates/timeline-struct

From 2012e.igem.org

(Difference between revisions)
 
(66 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 7: Line 7:
<div id="timeline" class="</html>{{{class}}}<html>">
<div id="timeline" class="</html>{{{class}}}<html>">
   <ul id="dates">
   <ul id="dates">
-
       <li><a href="#">date1</a></li>
+
       <!-- Stuff goes here -->
-
      <li><a href="#">date2</a></li>
+
-
      <li><a href="#">date3</a></li>
+
-
      <li><a href="#">date4</a></li>
+
-
      <li><a href="#">date5</a></li>
+
-
      <li><a href="#">date6</a></li>
+
-
      <li><a href="#">date7</a></li>
+
-
      <li><a href="#">date8</a></li>
+
   </ul>
   </ul>
   <ul id="issues">
   <ul id="issues">
-
       <li id="date1">
+
       <!-- stuff goes here-->
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date2">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date3">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date4">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date5">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date6">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date7">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
-
      <li id="date8">
+
-
        <p>Lorem ipsum.</p>
+
-
      </li>
+
   </ul>
   </ul>
-
   <a href="#" id="next">+</a> <!-- optional -->
+
  <!--<div style="clear:both; height:1px;"></div>-->
-
   <a href="#" id="prev">-</a> <!-- optional -->
+
   <a href="#" id="prev"><</a> <!-- optional -->
 +
   <a href="#" id="next">></a> <!-- optional -->
</div>
</div>
Line 50: Line 21:
   #timeline{  
   #timeline{  
-
           width:90%;
+
           width:600px;
 +
          margin:auto !important;
           overflow: hidden;
           overflow: hidden;
 +
          position: relative;
}
}
#dates {
#dates {
-
width:100%;
+
width:600px;
height: 60px;
height: 60px;
overflow: hidden;
overflow: hidden;
Line 81: Line 54:
#issues {
#issues {
-
width: 100%;
+
width: 600px;
-
height: 350px;
+
height: 300px;
overflow: hidden;
overflow: hidden;
}
}
Line 88: Line 61:
/* check here */
/* check here */
#issues li {
#issues li {
-
width: 800px;
+
width:600px;
-
height: 350px;
+
height: 300px;
list-style: none;
list-style: none;
float: left;
float: left;
 +
                                position:relative;
 +
                                left: -30px;
 +
                                padding-left: 0px;
 +
                                padding-right:0px;
}
}
-
#issues li.selected img {
+
#issues li.selected img {
-webkit-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
Line 99: Line 76:
    -ms-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
 +
}
 +
 +
 +
#issues li img {
 +
float: left;
 +
margin: 10px 30px 10px 50px;
 +
background: transparent;
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ 
 +
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */     
 +
zoom: 1;
 +
-webkit-transition: all 2s ease-in-out;
 +
-moz-transition: all 2s ease-in-out;
 +
-o-transition: all 2s ease-in-out;
 +
-ms-transition: all 2s ease-in-out;
 +
transition: all 2s ease-in-out;
 +
-webkit-transform: scale(0.7,0.7);
 +
-moz-transform: scale(0.7,0.7);
 +
    -o-transform: scale(0.7,0.7);
 +
    -ms-transform: scale(0.7,0.7);
 +
    transform: scale(0.7,0.7);
}
}
 +
#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; font-size:25pt; }
Line 111: Line 115:
$(document).ready(function(event) {   
$(document).ready(function(event) {   
     // get all the elements which meet the {{{class}}} and .tl-item
     // get all the elements which meet the {{{class}}} and .tl-item
-
     var list = $('.tl-item.</html>{{{class}}}<html> > ul li');
+
     var list = $('.tl-item.</html>{{{class}}}<html> > ul');
     //alert(list.length);
     //alert(list.length);
     var target = $('#timeline.</html>{{{class}}}<html>');
     var target = $('#timeline.</html>{{{class}}}<html>');
 +
    /*
     $(target).children('#dates').append(list[0]);
     $(target).children('#dates').append(list[0]);
     $(target).children('#issues').append(list[1]);
     $(target).children('#issues').append(list[1]);
 +
    */
 +
 +
    var str = "";
 +
    var i = 0;
 +
 +
    for (i=0; i<list.length;++i){
 +
    $(target).children('#dates').append(  $(list[i]).children('.date')  );
 +
    $(target).children('#issues').append(  $(list[i]).children('.issue')  );
 +
  }
 +
 +
Line 125: Line 141:
   */
   */
 +
 
    
    
   $(function(){
   $(function(){
-
$().timelinr()
+
$().timelinr();
});
});
 +
  // 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 li').css('width', '550px');
 +
                       
 +
    
    
});
});
 +
 +
 +

Latest revision as of 14:45, 20 January 2013

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/timeline-struct"