"
Team:TU Delft/scroll calendar
From 2010.igem.org
(Difference between revisions)
| (136 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <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> | ||
| - | + | table th,td { border: none; } | |
| - | table. | + | #calview table.month { |
| - | table | + | width: 180px; height: 180px; border-width: 0px; |
| - | + | display: inline-table; | |
| - | + | overflow: hidden; | |
| - | + | background-color: #fff; | |
| - | table.month td.today { background-color:# | + | 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: | + | padding: 0px; |
font-weight: bold; | font-weight: bold; | ||
font-size: 10pt; | font-size: 10pt; | ||
text-align: center; | text-align: center; | ||
| - | |||
} | } | ||
| - | # | + | #calview .month .dow td { color:#fff; text-align:center; font-size:110%;} |
| - | . | + | #calview .month .dow { background-color: #216085; } |
| - | . | + | #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 44: | ||
} | } | ||
| - | + | ||
| + | #calview { | ||
| + | overflow: hidden; | ||
| + | width: 180px; | ||
| + | height: 185px; | ||
| + | } | ||
| + | |||
| + | .cal_btn { | ||
| + | font-weight: bold; | ||
| + | text-color: black; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | #calscene { | ||
| + | } | ||
</style> | </style> | ||
</html> | </html> | ||
| - | < | + | <html> |
| - | + | <div id="calview"> | |
| - | {| | + | <div id="calscene"> |
| + | </html> | ||
| + | {| | ||
| + | |-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}} | ||
| - | |||
|{{#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}} | ||
| - | |||
|{{#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> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <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
|
|
|
|
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
