diff --git a/index.html b/index.html index fd65f46..517be23 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,10 @@
-
- +

ease.js is a collection of CommonJS modules intended to “ease” the transition into JavaScript from other Object-Oriented languages. It @@ -39,5 +41,11 @@

+ + + + diff --git a/scripts/ui.js b/scripts/ui.js new file mode 100644 index 0000000..f21a3b1 --- /dev/null +++ b/scripts/ui.js @@ -0,0 +1,55 @@ +/** + * Page enhancements for ease.js website + * + * Copyright (C) 2010 Mike Gerwitz + */ + +( function() +{ + var $trybox = null; + + $( document ).ready( function() + { + appendTry(); + } ); + + + function appendTry() + { + $( '
' ) + .attr( 'id', 'try' ) + .text( 'Try It!' ) + .mousedown( function( event ) + { + // prevent dragging from highlighting the text (so it looks more + // like an image) + event.preventDefault(); + } ) + .click( function( event ) + { + var $try = getTry(); + + $( this ).text( + ( $try.is( ':visible' ) ) + ? 'Try It!' + : 'Hide It' + ); + + $try.slideToggle(); + } ) + .appendTo( '#header' ); + } + + + function getTry() + { + return $trybox || ( function createTryBox() + { + return $trybox = $( '
' ) + .attr( 'id', 'trybox' ) + .hide() + .prependTo( '#content' ); + } )(); + } +} )(); + diff --git a/style.css b/style.css index 71405d3..c5e9b59 100644 --- a/style.css +++ b/style.css @@ -98,3 +98,58 @@ p.copyright a, p.copyright a:link { color: #babdb6; } +#try { + position: relative; + width: 100px; + margin: 0px auto; + top: -2em; + + background-color: #f57900; + color: white; + font-size: 2em; + font-weight: bold; + text-shadow: black 2px 2px 5px; + cursor: pointer; + text-align: center; + + padding: 0.25em 0.5em; + + border: 1px solid #ce5c00; + border-radius: 0.25em; + -moz-border-radius: 0.25em; + + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(245,123,0)), + color-stop(1, rgb(206,93,0)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(245,123,0) 0%, + rgb(206,93,0) 100% + ); +} + +#trybox { + border: 1px solid #eeeeec; + border-radius: 0.5em; + -moz-border-radius: 0.5em; + + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(186,189,182)), + color-stop(1, rgb(238,238,236)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(186,189,182) 0%, + rgb(238,238,236) 100% + ); + + height: 350px; +} +