Team:UCLondon/Templates/timeline-struct

From 2012e.igem.org

(Difference between revisions)
 
(84 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></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>
-
<script type="text/javascript">
+
-
$(function(){
+
-
$().timelinr()
+
-
});
+
-
</script>
+
-
<div id="timeline">
+
 
 +
<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>
+
   </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>
+
   </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 38: Line 21:
   #timeline{  
   #timeline{  
-
           width:90%;
+
           width:600px;
 +
          margin:auto !important;
 +
          overflow: hidden;
 +
          position: relative;
}
}
 +
#dates {
 +
width:600px;
 +
height: 60px;
 +
overflow: hidden;
 +
}
 +
#dates li {
 +
list-style: none;
 +
float: left;
 +
width: 100px;
 +
height: 50px;
 +
font-size: 16px;
 +
text-align: center;
 +
                               
 +
}
 +
 +
#dates a {
 +
line-height: 23px;
 +
padding-bottom: 10px;
 +
        color: #757575;
 +
}
 +
 +
#dates .selected {
 +
        font-size: 23px;
 +
}
 +
 +
 +
#issues {
 +
width: 600px;
 +
height: 300px;
 +
overflow: hidden;
 +
}
 +
 +
/* check here */
 +
#issues li {
 +
width:600px;
 +
height: 300px;
 +
list-style: none;
 +
float: left;
 +
                                position:relative;
 +
                                left: -30px;
 +
                                padding-left: 0px;
 +
                                padding-right:0px;
 +
}
 +
#issues li.selected img {
 +
-webkit-transform: scale(1.1,1.1);
 +
-moz-transform: scale(1.1,1.1);
 +
    -o-transform: scale(1.1,1.1);
 +
    -ms-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 46: Line 110:
</style>
</style>
 +
 +
<script type="text/javascript">
 +
 +
$(document).ready(function(event) { 
 +
    // get all the elements which meet the {{{class}}} and .tl-item
 +
    var list = $('.tl-item.</html>{{{class}}}<html> > ul');
 +
    //alert(list.length);
 +
    var target = $('#timeline.</html>{{{class}}}<html>');
 +
 +
    /*
 +
    $(target).children('#dates').append(list[0]);
 +
    $(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')  );
 +
  }
 +
 +
 +
 +
 +
  /*
 +
  target.children('ul').html( str );
 +
  var nHeight = $('.MBContent').height();
 +
  $('.MBWikiStyle').css('height', nHeight);
 +
  */
 +
 +
 
 +
 
 +
  $(function(){
 +
$().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');
 +
                       
 +
 +
 
 +
});
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</script>
</html>
</html>

Latest revision as of 14:45, 20 January 2013

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