Template:Kyoto/small countdown
From 2014.igem.org
(Difference between revisions)
Line 9: | Line 9: | ||
top: 30px; | top: 30px; | ||
right: 10px; | right: 10px; | ||
- | |||
- | |||
height: 30px; | height: 30px; | ||
+ | width: 300px; | ||
+ | padding: 30px 10px; | ||
+ | display: none; | ||
+ | |||
+ | /* text */ | ||
line-height: 30px; | line-height: 30px; | ||
font-size: 30px; | font-size: 30px; | ||
- | + | font-family: sans-serif; | |
+ | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | ||
- | + | /* color */ | |
+ | background-color: #aaa; | ||
+ | border: 4px solid #888; | ||
+ | color: #eee; | ||
+ | |||
+ | /* border radius */ | ||
+ | border-radius: 20px; | ||
+ | -webkit-border-radius: 20px; | ||
+ | -moz-border-radius: 20px; | ||
+ | |||
+ | /* select cancel */ | ||
+ | user-select: none; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -khtml-user-select: none; | ||
} | } | ||
</style> | </style> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | //<![CDATA[ | ||
+ | |||
$(function(){ | $(function(){ | ||
- | /* October | + | /* October 17 wiki FREEZE at 12:00PM EDT */ |
- | var | + | var year = </html>{{{year|2014}}}<html>; |
+ | var month = </html>{{{month|10}}}<html>; | ||
+ | var day = </html>{{{day|10}}}<html>; | ||
+ | var freeze = Date.UTC(year, month-1, day, 4, 00, 0); | ||
function get_current_utc() { | function get_current_utc() { | ||
Line 63: | Line 87: | ||
var timer = setInterval(function() { | var timer = setInterval(function() { | ||
- | var countdown = document.getElementById("kyoto_alert"); | + | //var countdown = document.getElementById("kyoto_alert"); |
+ | var $countdown = $("#kyoto_alert"); | ||
var current_utc = get_current_utc(); | var current_utc = get_current_utc(); | ||
var interval = (freeze - current_utc)/1000; | var interval = (freeze - current_utc)/1000; | ||
if (interval < 0) { | if (interval < 0) { | ||
- | countdown. | + | $countdown.hide(); |
} else if (interval < 4 * 24 * 3600) { | } else if (interval < 4 * 24 * 3600) { | ||
if (interval < 1 * 3600) | if (interval < 1 * 3600) | ||
- | countdown. | + | $countdown.css("color", "#f00"); |
else if (interval < 24 * 3600) | else if (interval < 24 * 3600) | ||
- | countdown. | + | $countdown.css("color", "#ff0"); |
var time = []; | var time = []; | ||
Line 80: | Line 105: | ||
time.push(itos(minute_qr[1], 2) + 'm'); | time.push(itos(minute_qr[1], 2) + 'm'); | ||
time.push(itos(minute_qr[0], 2) + 'h'); | time.push(itos(minute_qr[0], 2) + 'h'); | ||
- | countdown. | + | $countdown.text(time.reverse().join(' : ')); |
- | countdown. | + | $countdown.show(); |
} else { | } else { | ||
var time = []; | var time = []; | ||
Line 90: | Line 115: | ||
time.push(itos(hour_qr[1], 2) + 'h'); | time.push(itos(hour_qr[1], 2) + 'h'); | ||
time.push(itos(hour_qr[0], 3) + 'd'); | time.push(itos(hour_qr[0], 3) + 'd'); | ||
- | countdown. | + | $countdown.text(time.reverse().join(' : ')); |
- | countdown. | + | $countdown.show(); |
} | } | ||
}, 200); | }, 200); | ||
+ | var kyoto_alert_wrapper = { | ||
+ | x : undefined, | ||
+ | y : undefined, | ||
+ | is_down : false | ||
+ | }; | ||
+ | |||
+ | $("#kyoto_alert").mousedown(function(e) { | ||
+ | kyoto_alert_wrapper.x = e.pageX; | ||
+ | kyoto_alert_wrapper.y = e.pageY; | ||
+ | kyoto_alert_wrapper.is_down = true; | ||
+ | }).mousemove(function(e) { | ||
+ | if (kyoto_alert_wrapper.is_down) | ||
+ | if (kyoto_alert_wrapper.x !== undefined) | ||
+ | if (kyoto_alert_wrapper.y !== undefined) { | ||
+ | var x = e.pageX, | ||
+ | y = e.pageY; | ||
+ | var offset = $(this).offset(); | ||
+ | offset.left += x - kyoto_alert_wrapper.x; | ||
+ | offset.top += y - kyoto_alert_wrapper.y; | ||
+ | $(this).offset(offset); | ||
+ | kyoto_alert_wrapper.x = x; | ||
+ | kyoto_alert_wrapper.y = y; | ||
+ | } | ||
+ | }).mouseup(function(e) { | ||
+ | kyoto_alert_wrapper.x = undefined; | ||
+ | kyoto_alert_wrapper.y = undefined; | ||
+ | kyoto_alert_wrapper.is_down = false; | ||
}); | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | //]]> | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 00:14, 11 September 2014
count down