Team:TU Delft/scroll calendar

From 2010.igem.org

(Difference between revisions)
 
(115 intermediate revisions not shown)
Line 2: Line 2:
<script src="https://2010.igem.org/Team:TU_Delft/files/jquery.scrollTo-1.4.2-min.js?action=raw&ctype=text/javascript"></script>
<script src="https://2010.igem.org/Team:TU_Delft/files/jquery.scrollTo-1.4.2-min.js?action=raw&ctype=text/javascript"></script>
<style>
<style>
-
#textWrapper table { margin: 10px; }  
+
table th,td { border: none; }
-
table.calendar          { margin: 0; padding: 10px; }
+
#calview table.month  {  
-
table.calendar td      { margin: 0; padding: 2px; vertical-align: top; }
+
  width: 180px; height: 180px; border-width: 0px;  
-
table.month .heading td {  
+
  display: inline-table;
-
padding:2px; background-color:#d4d4d4; color:#aaa; text-align:center; font-size:120%; font-weight:bold; }
+
  overflow: hidden;
-
table.month .dow td    { color:#aaa; text-align:center; font-size:110%; }
+
  background-color: #fff;
-
table.month td.today    { background-color:#ddd;}
+
  border-collapse:collapse;
-
table.month td {
+
}  
 +
#calview .month .heading td {
 +
  background-color:#fff;
 +
  color:#000;
 +
  text-align:center;
 +
  font-size:120%;
 +
  font-weight:bold;
 +
}
 +
 
 +
#calview table.month td.today    { background-color:#00aeef; color: #fff;}
 +
#calview table.month td {
     border: none;
     border: none;
     margin: 0;
     margin: 0;
-
     padding: 1.5pt 2pt;
+
     padding: 0px;
     font-weight: bold;
     font-weight: bold;
     font-size: 10pt;
     font-size: 10pt;
     text-align: center;
     text-align: center;
-
    background-color: #eee;
 
}
}
-
#bodyContent table.month a { background:none; padding:0 }
+
#calview .month .dow td  { color:#fff; text-align:center; font-size:110%;}
-
.day-active { color:#0000cc }
+
#calview .month .dow { background-color: #216085; }
-
.day-empty  { color:#cc0000 }
+
#calview .odd { background-color: #f2fcff; }
 +
#calview table { text-align: center; left: 0px; top: 0px; border-spacing: 0px 0px; }
 +
#calview table.month a { padding:4px; background: none; }
 +
#calview .day-active { color:#0000cc; }
 +
#calview .day-empty  { color:#ccc; }
 +
/*#calview a:hover { background-color: #ccc; text-decoration: none; } */
/* Calendar START */
/* Calendar START */
Line 29: Line 43:
font-weight: bold;
font-weight: bold;
}
}
 +
#calview {
#calview {
overflow: hidden;
overflow: hidden;
-
width: 160px;
+
width: 180px;
-
height: 180px;
+
height: 185px;
}
}
-
.calbox_mb {
+
.cal_btn {
 +
font-weight: bold;
 +
text-color: black;
cursor: pointer;
cursor: pointer;
-
background-color: #999999;
+
}
-
display:inline-block;
+
 
-
width: 80px;
+
#calscene {
-
height: 20px;
+
-
margin: 0px 0px;
+
-
text-align: center;
+
}
}
Line 50: Line 64:
<html>
<html>
-
<div id="calbox">
+
<div id="calview">
-
  <div class="calbox_mb" id="calbox_prevmonth"> << </div>
+
<div id="calscene">
-
  <div class="calbox_mb" id="calbox_nextmonth"> >> </div>
+
-
    <div id="calview">
+
</html>
</html>
-
 
+
{|
-
{| style="background:transparent;"
+
|-valign="top"
|-valign="top"
|{{#calendar: query=year=2010 | month=03 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=03 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=04 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=04 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=05 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=05 | title=Team:TU_Delft}}
-
|-valign="top"
 
|{{#calendar: query=year=2010 | month=06 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=06 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=07 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=07 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=08 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=08 | title=Team:TU_Delft}}
-
|-valign="top"
 
|{{#calendar: query=year=2010 | month=09 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=09 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=10 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=10 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=11 | title=Team:TU_Delft}}
|{{#calendar: query=year=2010 | month=11 | title=Team:TU_Delft}}
|}
|}
-
 
+
<html>
-
</html>
+
</div>
</div>
</div>
</div>
-
<html>
+
 
 +
<script type="text/javascript">
 +
 
 +
var active_month;
 +
var month_elems = [];
 +
 
 +
function setActiveMonth(mo) {
 +
  if (mo < 0) mo = 0;
 +
  if (mo > 8) mo = 8;
 +
   
 +
  active_month = mo;
 +
  var el = month_elems[mo];
 +
  $('#calview').scrollTo(el, {duration: 200} );
 +
}
 +
 
 +
function setCalendarLinks(fnGetURL) {
 +
// process each day entry to change the link
 +
  $("#calview .month").each(function() {
 +
    var month = $.trim( $(".month_heading", this).text() );
 +
 
 +
    $("a", this).each(function() {
 +
      var day = $.trim( $(this).text() );
 +
      if ($(".day-active", this).length > 0)
 +
        this.title = this.href = fnGetURL(day, month, true);
 +
      else
 +
        this.title = this.href = fnGetURL(day, month, false);
 +
    });
 +
  });
 +
}
 +
 
 +
 
 +
function initScrollCalendar() {
 +
  $("#calview .heading td").each(function() {
 +
    var mo = $(this).text();
 +
    var elem = $(this).parent().parent().parent();
 +
    month_elems.push(elem);
 +
 
 +
    $(this).before('<td class="cal_btn prevmonth_btn"><img src="https://static.igem.org/mediawiki/2010/3/3d/TU_Delft_blog_calendar_prev.png" border="0" /></td>')
 +
          .attr('colspan', 5)
 +
          .addClass('month_heading')
 +
          .after('<td class="cal_btn nextmonth_btn"><img src="https://static.igem.org/mediawiki/2010/2/2f/TU_Delft_blog_calendar_next.png" border="0" /></td>');
 +
  });
 +
 
 +
  $(".prevmonth_btn").click(function() {
 +
    if (--active_month < 0)
 +
      active_month = month_elems.length - 1;
 +
    setActiveMonth( active_month );
 +
  });
 +
  $(".nextmonth_btn").click(function() {
 +
    setActiveMonth( (active_month + 1) % month_elems.length );
 +
  });
 +
 
 +
  active_month = 0;
 +
  $('#calview').scrollTo(month_elems[active_month]);
 +
}
 +
 
 +
</script>
 +
</html>

Latest revision as of 10:44, 13 October 2010

March
MTWTFSS
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
April
MTWTFSS
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
May
MTWTFSS
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
June
MTWTFSS
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
July
MTWTFSS
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
August
MTWTFSS
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
September
MTWTFSS
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
October
MTWTFSS
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
November
MTWTFSS
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

Retrieved from "http://2010.igem.org/Team:TU_Delft/scroll_calendar"