r3147 committed - labs overview: fixed buttons, removed buggy hover feature for FF
Revision: 3147
Author: paul.bakaus
Date: Thu Aug 27 01:39:36 2009
Log: labs overview: fixed buttons, removed buggy hover feature for FF
http://code.google.com/p/jquery-ui/source/detail?r=3147
Modified:
/branches/labs/assets/style.css
/branches/labs/index.html
=======================================
--- /branches/labs/assets/style.css Thu Aug 27 00:14:20 2009
+++ /branches/labs/assets/style.css Thu Aug 27 01:39:36 2009
@@ -44,12 +44,19 @@
-webkit-transition: all 0.3s;
position: relative;
}
+
+/* Safari */
+@media screen and (-webkit-min-device-pixel-ratio:0)
+{
+ #projects ul li:hover {
+ top: -1em;
+ }
+}
#projects ul li:hover {
background-color: rgba(240,240,240, 0.4);
- top: -1em;
-webkit-box-shadow: 0px 2em 1em #333;
- -moz-box-shadow: 0px 2em 1em #333;
+ -moz-box-shadow: 0px 1em 1em #333;
}
#projects.compact ul li {
=======================================
--- /branches/labs/index.html Thu Aug 27 01:21:41 2009
+++ /branches/labs/index.html Thu Aug 27 01:39:36 2009
@@ -23,8 +23,16 @@
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
- $('button.download').attr('disabled', 'true');
- $('button.ui-button').button();
+ $('a.download').attr('disabled', 'true');
+ $('a.ui-button').button();
+
+ /*
+ $('#projects ul li').hover(function() {
+ $(this).stop().animate({ top: '-1em' }, 300);
+ }, function() {
+ $(this).stop().animate({ top: '0' }, 300);
+ });
+ */
$('#settings select').selectbuttonset().bind('change', function() {
@@ -56,8 +64,8 @@
<a href="button/demo.html"><img src="assets/screenshots/button.jpg"
/></a>
<p class="desc">The button widget brings to you a wealth of
interactive and highly semantic buttons, styled using the jQuery UI CSS
Framework. They come with rich icon support, button classes and many more
thrilling options.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="button/demo.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="button/demo.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -65,8 +73,8 @@
<a href="carousel/demo"><img src="assets/screenshots/carousel.jpg"
/></a>
<p class="desc">The carousel widget takes a bunch of images and
transforms them into a highly interactive 3D carousel. It can be heavily
customized controlled by mouse.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="carousel/demo/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="carousel/demo/index.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -74,8 +82,8 @@
<a href="coverflow/demo"><img src="assets/screenshots/coverflow.jpg"
/></a>
<p class="desc">Yes - jQuery UI brings you the beloved Coverflow
widget known from iTunes. It uses bleeding edge CSS Transforms in supported
browsers, and advanced matrix filters in Internet Explorer to deliver a
rich experience.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="coverflow/demo/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="coverflow/demo/index.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -83,8 +91,8 @@
<a href="daterangepicker/"><img
src="assets/screenshots/daterangepicker.jpg" /></a>
<p class="desc">The Daterangepicker goes beyond the Datepicker widget
and transforms any input into a beautiful dropdown and slide out widget
that let's users select a range of dates.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="daterangepicker/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="daterangepicker/index.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -92,8 +100,8 @@
<a href="inlineedit/demo.html"><img
src="assets/screenshots/inlineedit.jpg" /></a>
<p class="desc">The inline edit is a control that enables users to
change any text by clicking on it and transforming it into a temporary
input. Seemingly simple, but very effective!
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="inlineedit/demo.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="inlineedit/demo.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -101,8 +109,8 @@
<a href="magnifier/demo"><img src="assets/screenshots/magnifier.jpg"
/></a>
<p class="desc">Once already part of jQuery UI, the magnifier was
removed for maintenance and support reasons. This is the heavily refactored
incarnation that is ready for 2009!
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="magnifier/demo/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="magnifier/demo/index.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -110,8 +118,8 @@
<a href="mask/demos/mask/default.html"><img
src="assets/screenshots/mask.jpg" /></a>
<p class="desc">The mask widget takes a text input and enforces a
certain format, for instance, a formatted phone number.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="mask/demos/mask/default.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="mask/demos/mask/default.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -119,8 +127,8 @@
<a href="mask/demos/photoviewer/"><img
src="assets/screenshots/photoviewer.jpg" /></a>
<p class="desc">A lightweight lightbox-style plugin for the sole
purpose of viewing images. Comes with a very minimalistic and smooth
approach.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="photoviewer/demos/photoviewer/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="photoviewer/demos/photoviewer/index.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -128,8 +136,8 @@
<a href="scrollable/"><img src="assets/screenshots/scrollable.jpg"
/></a>
<p class="desc">Actually between interaction and widget, Scrollable
takes an overflowing container and appends a CSS Framework styled slider
that comes disguised as a scrollbar.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="scrollable/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="scrollable/index.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -137,8 +145,8 @@
<a href="selectmenu/"><img src="assets/screenshots/selectmenu.jpg"
/></a>
<p class="desc">Love how the OS X style select boxes open? This
plugin aims to provide you a similar experience, of course all CSS
Framework driven.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="selectmenu/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="selectmenu/index.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
<li>
@@ -146,8 +154,8 @@
<a href="selecttoslider/"><img
src="assets/screenshots/selecttoslider.jpg" /></a>
<p class="desc">This approach takes select boxes and automatically
transforms them to a rich, accessible jQuery UI slider with tooltip
captions, allowing for perfect progressive enhancement.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="selecttoslider/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="selecttoslider/index.html" class="ui-button
ui-button-zoomin view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
</ul>
@@ -160,8 +168,8 @@
<a href="pxem/"><img src="assets/screenshots/pxem.jpg" /></a>
<p class="desc">The px to em converter does exactly what the name
suggests: It takes a px value and converts it to em or vice versa.
<div class="actions">
- <button type="button" class="ui-button ui-button-zoomin view"><a
href="pxem/index.html">View demo</a></button>
- <button type="button" class="ui-button ui-button-arrowthickstop-1-s
download">Download</button>
+ <a href="pxem/index.html" class="ui-button ui-button-zoomin
view">View demo</a>
+ <a href="javascript:;" class="ui-button
ui-button-arrowthickstop-1-s download">Download</a>
</div>
</li>
</ul>