Mercurial > mozilla-the-big-picture

changeset 13:317fba5f0d11

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added header and 'countdown' timer as images load.
author Atul Varma <varmaa@toolness.com>
date Sat, 28 Nov 2009 01:12:37 -0500
parents ca9a6348bf91
children 554846abfc9c
files mbp.css mbp.html mbp.js
diffstat 3 files changed, 25 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/mbp.css	Sat Nov 28 00:40:20 2009 -0500
+++ b/mbp.css	Sat Nov 28 01:12:37 2009 -0500
@@ -1,9 +1,26 @@
 body {
     background: white;
+    font-family: helvetica;
+}
+
+#countdown {
+    padding-top: 4em;
+    text-align: center;
+    font-size: 24pt;
+    color: #eeeeee;
+}
+
+#container {
+    margin: 0 auto;
+    width: 45em;
+}
+
+#container h1 {
+    padding: 0 4pt 0 4pt;
+    margin: 0;
 }
 
 .mbp-entry {
-    font-family: helvetica;
     font-size: 12pt;
     width: 10em;
     float: left;
--- a/mbp.html	Sat Nov 28 00:40:20 2009 -0500
+++ b/mbp.html	Sat Nov 28 01:12:37 2009 -0500
@@ -7,7 +7,9 @@
   <title>Mozilla: The Big Picture</title>
 </head>
 <body>
+<div id="countdown"></div>
 <div id="container" style="display: none;">
+<h1>mozilla: the big picture</h1>
 <div class="mbp-entry">
   <a class="link"
      href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/">
--- a/mbp.js	Sat Nov 28 00:40:20 2009 -0500
+++ b/mbp.js	Sat Nov 28 01:12:37 2009 -0500
@@ -13,7 +13,7 @@
         this.addEventListener(
           "load",
           function() {
-            loadsLeft--;
+            $("#countdown").text(--loadsLeft);
             var clip = $(this).css("clip");
             var parts = clip.match(rectRegexp);
             var crop = {top: parts[1],
@@ -36,10 +36,13 @@
                           canvas.width,
                           canvas.height);
             $(this).remove();
-            if (loadsLeft == 0)
+            if (loadsLeft == 0) {
+              $("#countdown").remove();
               $("#container").fadeIn();
+            }
           },
           false
         );
       });
+    $("#countdown").text(loadsLeft);
   });