Interface improvements, typo fixes

dce · Jun 13, 2009 · 2125aff · 2125aff
1 parent aeecda3
commit 2125aff
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 36 deletions.
diff --git a/public/javascripts/jquery.jquinote.js b/public/javascripts/jquery.jquinote.js
@@ -9,6 +9,13 @@
         $('div.lightbox').fadeOut().find("iframe").attr("src", "spinner.html");
       });
 
+      option_code = '<div class="options">' +
+          '<a href="#" class="prev">&larr;</a>' +
+          '<a href="#" class="next">&rarr;</a>' +
+        '</div>';
+
+      $("body").append(option_code);
+
       slides.css({ "width": slideList.size() * container.width() });
 
       slides.current = (location.hash == "") ? 0 : location.hash.substr(1);
@@ -33,26 +40,18 @@
 
       slides.update();
 
-      option_code = '<div class="options">' +
-          '<a href="#" class="next">&rarr;</a>' +
-          '<a href="#" class="prev">&larr;</a>' +
-        '</div>';
-
-      slideList.append(option_code);
-
-      $("li:first a.prev", slides).addClass("disabled");
-      $("li:last  a.next", slides).addClass("disabled");
-
-      $("a.prev", container).click(function() {
+      $("a.prev").click(function() {
         slides.prev();
         return false;
       });
 
-      $("a.next", container).click(function() {
+      $("a.next").click(function() {
         slides.next();
         return false;
       });
 
+      slideList.append('<div class="buttons" />');
+
       $("body").keydown(function(key) {
         switch(key.which) {
         case 37:
@@ -67,29 +66,27 @@
       });
 
       $("div.executable", container).each(function() {
-        codeBlock = $(this);
-
         applyButton = $('<a href="#" class="apply-js">DO IT</a>').click(function() {
-          code  = $(this).parents("div.code");
+          code  = $(this).parents("li").find("div.code");
           frame = frames[frames.length - 1];
 
           frame.eval($("pre",code).text());
           frame.eval('$("#notice").fadeIn().find("span").text("' + code.attr("title") + '");');
           return false;
         });
 
-        codeBlock.append(applyButton);
+        $(this).parents("li").find("div.buttons").append(applyButton);
       });
 
       $("span.url", container).each(function() {
         url = $(this).hide().text();
 
-        showButton = $('<a href="' + url + '">site</a>').click(function() {
+        showButton = $('<a href="' + url + '" class="siteButton">site</a>').click(function() {
           $("div.lightbox").show().find("iframe").attr("src", $(this).attr("href"));
           return false;
         });
 
-        $(this).parents("li").find(".options").append(showButton);
+        $(this).parents("li").find("div.buttons").append(showButton);
       });
     });
   };

diff --git a/public/slides.html b/public/slides.html
@@ -92,7 +92,7 @@ <h2>First Impressions</h2>
           </tr>
 
           <tr>
-            <td>&lt; 10 seconds</td>
+            <td>&gt; 10 seconds</td>
             <td>gone</td>
           </tr>
         </table>
@@ -309,9 +309,7 @@ <h2>JSON</h2>
   });
 }; 
 
-$("img.spinner:first").each(function() { 
-  $(this).loadBagfactor();
-});
+$("img.spinner:first").loadBagfactor();
 </pre>
 
         </div>
@@ -324,7 +322,7 @@ <h2>Best and Worst Solution</h2>
 
         <ul>
           <li>Most information in least time</li>
-          <li>Completely obtrusive</li>
+          <li>Degredation fail</li>
           <li>Optimize for users' needs</li>
         </ul>
       </li>

diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -27,6 +27,7 @@ a.disabled {
 }
 
 h1 {
+  display: none;
   padding: 10px;
   margin: 0 0 10px 0;
   background-color: #003;
@@ -52,25 +53,26 @@ div#slide-container {
   position: relative;
 }
 
-div#slide-container .options {
+div.options {
   position: absolute;
-  bottom: 10px;
-  left: 10px;
+  top: 10px;
   right: 10px;
-  text-align: center;
-  padding-top: 10px;
-  border-top: 1px dotted #ccc;
 }
 
-div#slide-container .options a {
-  float: left;
-  margin-right: 5px;
+div.options a {
+  margin-left: 5px;
+  background-color: #999;
+}
+
+div.buttons {
+  display: block;
+  position: absolute;
+  top: 10px;
+  right: 5px;
 }
 
-div#slide-container .options a.prev,
-div#slide-container .options a.next {
-  float: right;
-  margin: 0 0 0 5px;
+div.buttons a {
+  margin-left: 5px;
 }
 
 ol#slides {