(hoofbeats) Uses SimpleScrollable.

diff --git a/examples/hoofbeats/index.html b/examples/hoofbeats/index.html
index 627ca4c..207f904 100644 (file)
--- a/examples/hoofbeats/index.html
+++ b/examples/hoofbeats/index.html
@@ -33,15 +33,17 @@
         </div>
       </div>
 
-      <div class="content">
+      <div class="page content">
           {{outlet library}}
       </div>
     </script>
 
     <script type="text/x-handlebars" data-template-name="mediaItems">
-        {{#each item in controller}}
-            <li>{{item.title}}</li>
-        {{/each}}
+        <ul class="item-list striped">
+            {{#each item in controller}}
+                <li>{{item.title}}</li>
+            {{/each}}
+        </ul>
     </script>
 
     <!-- the UI framework -->

diff --git a/examples/hoofbeats/javascripts/app/views/mediaItemsView.js b/examples/hoofbeats/javascripts/app/views/mediaItemsView.js
index 41e9eb1..c751792 100644 (file)
--- a/examples/hoofbeats/javascripts/app/views/mediaItemsView.js
+++ b/examples/hoofbeats/javascripts/app/views/mediaItemsView.js
@@ -2,8 +2,11 @@
 (function(app, Ember) {
     var MediaItemsView = Ember.View.extend({
         templateName: 'mediaItems',
-        tagName: 'ul',
-        classNames: ['mediaItems item-list striped']
+        classNames: ['mediaItems ch-simple-scrollable'],
+
+        didInsertElement: function() {
+            this.$().ch_simple_scrollable('enable');
+        }
     });
 
     app.MediaItemsView = MediaItemsView;

diff --git a/examples/hoofbeats/stylesheets/hoofbeats.css b/examples/hoofbeats/stylesheets/hoofbeats.css
index d31485d..a413b08 100644 (file)
--- a/examples/hoofbeats/stylesheets/hoofbeats.css
+++ b/examples/hoofbeats/stylesheets/hoofbeats.css
@@ -1,7 +1,11 @@
 .content {
   padding-top: 40px;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  overflow: hidden;
 }
 
-.content ul, .content ol {
-  margin-left: 0;
+ul.item-list {
+  margin: 0;
 }