Permalink
Browse files

cleaning code. Addingdescription text to demo

  • Loading branch information...
addyosmani committed Oct 27, 2010
1 parent c24e651 commit f07a1fb43820df647e451af07bc38f3fd2fa7cd6
Showing with 175 additions and 62 deletions.
  1. +4 −2 demo/app.js
  2. +13 −60 demo/demo.html
  3. +158 −0 demo/demos.css
View
@@ -57,7 +57,9 @@
slide: function(event, ui) {
$('#coverflow').coverflow('select', ui.value, true);
$('.coverflowItem').removeClass('ui-selected');
- $('.coverflowItem:eq(' + (ui.value-1) +')').addClass('ui-selected');
+
+ $('.coverflowItem:eq(' + (ui.value) +')').addClass('ui-selected');
+ setCaption($('.coverflowItem:eq(' + (ui.value) +')').html());
}
});
@@ -168,7 +170,7 @@
{
var q = item * 5;
- var qx = -40;
+ var qx = -35;
$('#slider-vertical').slider('value', q);
$('#sortable').css('top', -q + qx);
View
@@ -13,65 +13,10 @@
<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer (download at http://paulbakaus.com/projects) -->
<script src="../external/sylvester.js" type="text/javascript"></script>
<script src="../external/transformie.js" type="text/javascript"></script>
-
- <style type="text/css">
- body { background-color:#000;}
-
- #coverflow {
- height: 300px; width: 2600px; padding: 42px;
- position: absolute; top: 0px; left: 0px;
- margin-top:50px;
- }
-
- #coverflow img {
- width: 260px; height: 260px;
- float: left; position: relative; margin: -35px;
-
-
- }
-
- div.wrapper {
- height: 390px; width: 600px; padding: 10px;
- overflow: hidden; position: relative; margin:0 auto;
- background-color:#000;
- }
-
- #demo-frame {
- overflow: hidden;
- }
-
- #slider {
- margin-top: 10px;
- }
-
- #sortable {
- list-style-type:none;margin:0 auto;padding:0;width:100%;
-
- }
- #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
- #sortable li span { position: absolute; margin-left: -1.3em; }
- .ui-selected { background: #F39814; color: white; }
- .pageWrapper { margin:0 auto; width:960px}
-
- #imageCaption { margin:0 auto; width:400px; color:white; font-family:Arial;display:block; font-size:12px; text-align:center; margin-top:360px;}
-
-
-/* css for scrollbar below here*/
-#scroll-pane { float:left;overflow: auto; width: 620px; height:172px;position:relative;margin-left:50px;margin-bottom:25px;display:inline}
-#sortable {position:absolute;top:0;left:0}
-.scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;}
-#slider-wrap{float:left;background-color:lightgrey;height:172px;width:20px;border:1px solid gray;border-left:none;}
-#slider-vertical{margin-left:5px;position:relative;height:100%}
-.ui-slider-handle{width:20px;height:10px;margin-left:5px;background-color:darkgray;display:block;position:absolute}
-
-.listholder { width:750px; margin:0 auto;}
-
- </style>
-
- <script src="jquery.mousewheel.min.js" type="text/javascript"></script>
-
- <script src="app.js" type="text/javascript"></script>
+ <!-- Include mousewheel dependancies and app files -->
+ <script src="jquery.mousewheel.min.js" type="text/javascript"></script>
+ <script src="app.js" type="text/javascript"></script>
</head>
@@ -121,15 +66,23 @@
</ul>
</div>
-<div id="slider-wrap"><div id="slider-vertical"></div></div>
-
+<div id="slider-wrap">
+<div id="slider-vertical"></div>
+</div>
</div>
+<div class="pageInfo">
+ Interaction supported: Cover-click, Slider, Playlist-click, Keyboard-Navigation, MouseWheel.
+</div>
+
</div>
+
+
+
</body>
</html>
View
@@ -332,3 +332,161 @@ div.demo-description {
#widget-docs .ui-widget-content a:hover,
#widget-docs .ui-widget-content a:active { color:#0b559b; }
+
+
+/* UI Overrides*/
+
+
+
+
+body {
+ background-color: #000;
+}
+
+#coverflow {
+ height: 300px;
+ width: 2600px;
+ padding: 42px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ margin-top: 50px;
+}
+
+#coverflow img {
+ width: 260px;
+ height: 260px;
+ float: left;
+ position: relative;
+ margin: -35px;
+}
+
+div.wrapper {
+ height: 390px;
+ width: 600px;
+ padding: 10px;
+ overflow: hidden;
+ position: relative;
+ margin: 0 auto;
+ background-color: #000;
+}
+
+#demo-frame {
+ overflow: hidden;
+}
+
+#slider {
+ margin-top: 10px;
+}
+
+#sortable {
+ list-style-type: none;
+ margin: 0 auto;
+ padding: 0;
+ width: 100%;
+}
+
+#sortable li {
+ margin: 0 3px 3px 3px;
+ padding: 0.4em;
+ padding-left: 1.5em;
+ font-size: 1.4em;
+ height: 18px;
+}
+
+#sortable li span {
+ position: absolute;
+ margin-left: -1.3em;
+}
+
+.ui-selected {
+ background: #F39814;
+ color: white;
+}
+
+.pageWrapper {
+ margin: 0 auto;
+ width: 960px
+}
+
+#imageCaption {
+ margin: 0 auto;
+ width: 400px;
+ color: white;
+ font-family: Arial;
+ display: block;
+ font-size: 12px;
+ text-align: center;
+ margin-top: 360px;
+}
+
+/* css for scrollbar below here*/
+
+#scroll-pane {
+ float: left;
+ overflow: auto;
+ width: 620px;
+ height: 176px;
+ position: relative;
+ margin-left: 50px;
+ margin-bottom: 25px;
+ display: inline
+}
+
+#sortable {
+ position: absolute;
+ top: 0;
+ left: 0
+}
+
+.scroll-content-item {
+ background-color: #fcfcfc;
+ color: #003366;
+ width: 100px;
+ height: 100px;
+ float: left;
+ margin: 10px;
+ font-size: 3em;
+ line-height: 96px;
+ text-align: center;
+ border: 1px solid gray;
+ display: inline;
+}
+
+#slider-wrap {
+ float: left;
+ background-color: lightgrey;
+ height: 172px;
+ width: 20px;
+ border: 1px solid gray;
+ border-left: none;
+}
+
+#slider-vertical {
+ margin-left: 5px;
+ position: relative;
+ height: 100%
+}
+
+.ui-slider-handle {
+ width: 20px;
+ height: 10px;
+ margin-left: 5px;
+ background-color: darkgray;
+ display: block;
+ position: absolute
+}
+
+.listholder {
+ width: 750px;
+ margin: 0 auto;
+}
+
+.pageInfo{
+ margin:0 auto;
+ width:700px;
+ clear:both;
+ color:white;
+ font-size:12px;
+ text-align:center;
+}

0 comments on commit f07a1fb

Please sign in to comment.