Template:Kyoto/small countdown

From 2014.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 1: Line 1:
 +
<!-- http://github.com/iGEMKyoto/wiki_freeze_alert -->
 +
<div id="kyoto-alert">
 +
    <div id="kyoto-alert-display">count down</div>
 +
    <div id="kyoto-alert-popup">{{{popup|}}}</div>
 +
</div>
<html>
<html>
-
 
-
<!- http://github.com/iGEMKyoto/wiki_freeze_alert ->
 
-
 
-
<div id="kyoto_alert">count down</div>
 
<style type="text/css">
<style type="text/css">
-
#kyoto_alert {
+
#kyoto-alert {
   position: fixed;
   position: fixed;
   top: 30px;
   top: 30px;
Line 13: Line 14:
   padding: 30px 10px;
   padding: 30px 10px;
   display: none;
   display: none;
 +
  z-index: 300;
   /* text */
   /* text */
Line 25: Line 27:
   border: 4px solid #888;
   border: 4px solid #888;
   color: #eee;
   color: #eee;
 +
 +
  /* box sizing */
 +
  box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  -moz-box-sizing: content-box;
   /* border radius */
   /* border radius */
Line 36: Line 43:
   -moz-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -khtml-user-select: none;
 +
}
 +
#kyoto-alert:hover {
 +
    cursor: move;
 +
}
 +
#kyoto-alert-display {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
#kyoto-alert-popup {
 +
    position: relative;
 +
    top: 35px;
 +
    color: #000;
 +
 +
    /* text-shadow */
 +
    -webkit-text-shadow: 0px 0px 6px #fff;
 +
    -moz-text-shadow: 0px 0px 6px #fff;
 +
    text-shadow: 0px 0px 6px #fff;
 +
 +
    display: none;
 +
}
 +
#kyoto-alert:hover #kyoto-alert-popup {
 +
    display: block;
}
}
</style>
</style>
 +
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
//<![CDATA[
//<![CDATA[
-
 
$(function(){
$(function(){
Line 47: Line 77:
var year = </html>{{{year|2014}}}<html>;
var year = </html>{{{year|2014}}}<html>;
var month = </html>{{{month|10}}}<html>;
var month = </html>{{{month|10}}}<html>;
-
var day = </html>{{{day|10}}}<html>;
+
var day = </html>{{{day|18}}}<html>;
var freeze = Date.UTC(year, month-1, day, 4, 00, 0);
var freeze = Date.UTC(year, month-1, day, 4, 00, 0);
Line 87: Line 117:
var timer = setInterval(function() {
var timer = setInterval(function() {
-
     //var countdown = document.getElementById("kyoto_alert");
+
     var $countdown = $("#kyoto-alert");
-
     var $countdown = $("#kyoto_alert");
+
     var $display = $("#kyoto-alert-display");
     var current_utc = get_current_utc();
     var current_utc = get_current_utc();
     var interval = (freeze - current_utc)/1000;
     var interval = (freeze - current_utc)/1000;
Line 95: Line 125:
     } else if (interval < 4 * 24 * 3600) {
     } else if (interval < 4 * 24 * 3600) {
         if (interval < 1 * 3600)
         if (interval < 1 * 3600)
-
             $countdown.css("color", "#f00");
+
             $display.css("color", "#f00");
         else if (interval < 24 * 3600)
         else if (interval < 24 * 3600)
-
             $countdown.css("color", "#ff0");
+
             $display.css("color", "#ff0");
         var time = [];
         var time = [];
Line 105: Line 135:
         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.text(time.reverse().join(' : '));
+
         $display.text(time.reverse().join(' : '));
         $countdown.show();
         $countdown.show();
     } else {
     } else {
Line 115: Line 145:
         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.text(time.reverse().join(' : '));
+
         $display.text(time.reverse().join(' : '));
         $countdown.show();
         $countdown.show();
     }
     }
}, 200);
}, 200);
-
var kyoto_alert_wrapper = {
+
$("#kyoto-alert").draggable();
-
    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>

Latest revision as of 06:12, 10 October 2014

count down

Retrieved from "http://2014.igem.org/Template:Kyoto/small_countdown"