Permalink
Browse files

Initial upload

  • Loading branch information...
maggiewachs committed Jan 17, 2012
0 parents commit 1c65e34079b17ec6ea8a2549a78e8ad380c52826
@@ -0,0 +1,10 @@
+Code Examples from the book [Designing with Progressive Enhancement](http://filamentgroup.com/dwpe)
+================================
+
+This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit).
+
+Those who purchase the book can access all of the examples from the book at the following URL: http://filamentgroup.com/dwpe#codeexamples.
+
+All examples use the [jQuery JavaScript library](http://jquery.com).
+
+These code examples use the [EnhanceJS framework](https://github.com/filamentgroup/EnhanceJS) for applying progressive enhancement based on browser capabilities testing.
@@ -0,0 +1,3 @@
+/* Page styles */
+body, input { font-family: "Segoe UI", Arial, sans-serif; }
+legend { font-weight: bold; }
@@ -0,0 +1,25 @@
+/* Page styles */
+body { font-size:62.5%; }
+form { margin:20px 0; padding:3em 20px; border:2px solid #aaa; background:#fafafa; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; width:630px; }
+fieldset { border:0; margin:1em 0 0; border-top:1px dotted #aaa; }
+legend { font-size:2em; padding:0; margin:0; color:#222; }
+legend span { position:relative; top:-.1em; left:-10px; background:#fafafa; padding-right:10px; }
+label { font-size:1.6em; margin-right:15px; float:left; clear:left; width:130px; text-align:right; }
+.question { overflow:auto; padding:1.4em 0; }
+.slider-status { float:left; font-weight:bold; font-size:1.5em; color:#444; }
+input#price,input#bedrooms,input#baths { float:left; font-size:1.3em; font-weight:bold; width:55px; border:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:.2em; }
+input#search { background:#666 url(../images/bg-button.png) 50% repeat-x; color:#fff; padding:.4em 1.3em; border:2px solid #444; font-size:1.7em; font-weight:bold; -moz-border-radius:1.3em; -webkit-border-radius:1.3em; border-radius:1.3em; cursor:pointer; margin:1em 0 0 150px; width: 200px; }
+input#search:hover { background-image:url(../images/bg-button-hover.png); }
+#subway,#water,#walking { display: none;}
+
+/* slider styles */
+.ui-slider { position:relative; top:.8em; width:293px; float:left; margin-right:15px; text-align:left; height:1em; background:#ebebec url(../images/bg-slider.png) top repeat-x; border:1px solid #aaa; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+.ui-slider .ui-slider-handle { position:absolute; z-index:2; width:1.6em; height:1.6em; top:-.5em; margin-left:-.8em; cursor:pointer; border:2px solid #444; background:#fff url(../images/bg-slider-handle.png) 50% repeat-x; -moz-border-radius:.9em; -webkit-border-radius:.9em; border-radius:.9em; }
+.ui-slider .ui-slider-handle:hover,.ui-slider .ui-slider-handle:focus { background-image:url(../images/bg-slider-handle-hover.png); }
+.ui-slider .ui-slider-handle:active { background-image:none; }
+.ui-slider .ui-slider-range { position:absolute; z-index:1; font-size:.7em; display:block; border:0; top:0; height:100%; background:#999 url(../images/bg-slider-range.png) 50% repeat-x; left:0; }
+
+/*slider label key*/
+.sliders-labels { height:2em; margin-left:145px; width:293px; background:url(../images/bg-continuum.png) bottom left no-repeat; padding-top:1em; }
+.sliders-labels span.label-first { float:left; }
+.sliders-labels span.label-last { float:right; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+ <title>Slider from input</title>
+ <link href="css/basic.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script>
+ <script type="text/javascript">
+ // Run capabilities test
+ enhance({
+ loadScripts: [
+ '../-shared/jquery.min.js',
+ '../-shared/jqueryui.min.js',
+ 'js/jQuery.peSlider.js',
+ 'js/example.js'
+ ],
+ loadStyles: [
+ 'css/enhanced.css'
+ ]
+ });
+ </script>
+</head>
+<body>
+
+
+<form method="get" action="#">
+ <fieldset id="criteria">
+ <legend><span>Apartment Criteria</span></legend>
+
+ <div class="question">
+ <label for="price">Max Rent ($):</label>
+ <input type="number" name="price" id="price" value="2000" min="0" max="5000" size="4" data-units="dollars" />
+ </div>
+ <div class="question">
+ <label for="bedrooms">Min bedrooms:</label>
+ <input type="number" name="bedrooms" id="bedrooms" value="2" min="0" max="10" size="2" data-units="bedrooms" />
+ </div>
+ <div class="question">
+ <label for="baths">Min baths:</label>
+ <input type="number" name="baths" id="baths" value="2" min="0" max="10" size="2" data-units="baths" />
+ </div>
+ </fieldset>
+
+
+
+ <fieldset id="amenities">
+ <legend><span>Amenity Preferences</span></legend>
+
+ <div class="question">
+ <label for="subway">Subway access:</label>
+ <select name="subway" id="subway">
+ <option value="a">Not important</option>
+ <option value="b">Somewhat important</option>
+ <option value="c">Pretty Important</option>
+ <option value="d">Must have</option>
+ </select>
+ </div>
+
+ <div class="question">
+ <label for="water">Water views:</label>
+ <select name="water" id="water">
+ <option value="a">Not important</option>
+ <option value="b">Somewhat important</option>
+ <option value="c">Pretty Important</option>
+ <option value="d">Must have</option>
+ </select>
+ </div>
+
+ <div class="question">
+ <label for="walking">Walking paths:</label>
+ <select name="walking" id="walking">
+ <option value="a">Not important</option>
+ <option value="b">Somewhat important</option>
+ <option value="c">Pretty Important</option>
+ <option value="d">Must have</option>
+ </select>
+ </div>
+ </fieldset>
+ <input type="submit" name="search" id="search" value="Search apartments" />
+</form>
+
+
+
+</body>
+</html>
@@ -0,0 +1,28 @@
+// Run the script on DOM ready:
+$(function(){
+
+ //create input sliders
+ $('input#price').peSlider({range: 'min'});
+ $('input#bedrooms,input#baths').peSlider({range: 'min'});
+
+ //create select sliders
+ $('select')
+ .attr('aria-hidden','true')
+ .after('<div class="slider-status" aria-hidden="true"></div>')
+ .peSlider({
+ slide:function(e,ui){
+ $(this).next().next().text( $(this).find('a:eq(0)').attr('aria-valuetext') );
+ }
+ })
+ .each(function(){
+ $(this).next().text( $(this).prev().find('a:eq(0)').attr('aria-valuetext') );
+ });
+
+ //add select labels
+ $('<div class="sliders-labels" aria-hidden="true"><span class="label-first">'+ $('#subway option:first').text() +'</span><span class="label-last">'+ $('#subway option:last').text() +'</span></div>')
+ .insertAfter('#amenities legend');
+
+});
+
+
+
@@ -0,0 +1,117 @@
+/**
+ * --------------------------------------------------------------------
+ * jQuery peSlider plugin
+ * Author: Scott Jehl, scott@filamentgroup.com
+ * Copyright (c) 2009 Filament Group
+ * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
+ * --------------------------------------------------------------------
+ */
+$.fn.peSlider = function(settings){
+
+ //configurable options (none so far)
+ var o = $.extend({},settings);
+
+ if( !$('body').is('[role]') ){ $('body').attr('role','application'); }
+
+ return $(this).each(function(){
+ var thisLabel = $('label[for=' + $(this).attr('id') + ']').attr('id', $(this).attr('id') + '-label').attr('id');
+ var thisUnits = $(this).attr('data-units') || '';
+ var slider = $('<div></div>');
+
+ if( $(this).is('input') ){
+ var input = $(this);
+ var thisUnits = input.attr('data-units');
+ var friendlyVal = input.val() + ' ' + thisUnits;
+ var sliderOptions = $.extend(o,{
+ min: parseFloat(input.attr('min')),
+ max: parseFloat(input.attr('max')),
+ value: parseFloat(input.val())
+ });
+
+ slider
+ .insertBefore(input)
+ .slider(sliderOptions)
+ .bind('slide', function(e, ui){
+ input.val(ui.value);
+ friendlyVal = input.val() + ' ' + thisUnits;
+ slider.find('a').attr({
+ 'aria-valuenow': ui.value,
+ 'aria-valuetext': friendlyVal,
+ 'title': friendlyVal
+ });
+ })
+ .find('a')
+ .attr({
+ 'role': 'slider',
+ 'aria-valuemin': input.attr('min'),
+ 'aria-valuemax': input.attr('max'),
+ 'aria-valuenow': input.val(),
+ 'aria-valuetext': friendlyVal,
+ 'title': friendlyVal,
+ 'aria-labelledby': thisLabel
+ });
+
+ input
+ .keyup(function(){
+ var inVal = parseFloat(input.val());
+ if( !isNaN(inVal) ){
+ slider.slider('value', inVal);
+ input.val(slider.slider('value'));
+ }
+ })
+ .blur(function(){
+ var inVal = parseFloat(input.val());
+ if( isNaN(inVal) ){
+ input.val(0);
+ }
+ });
+
+ if( !settings.step ){
+ var step = Math.round( parseFloat(input.attr('max')) / slider.width());
+ if(step > 1){ slider.slider('option','step',step); }
+ }
+
+ }
+ else {
+ var select = $(this);
+ var friendlyVal = select.find('option').eq( select[0].selectedIndex ).text() + ' ' + thisUnits;
+ var sliderOptions = $.extend(o,{
+ min: 0,
+ max: select.find('option').length-1,
+ value: select[0].selectedIndex
+ });
+
+ slider
+ .insertBefore(select)
+ .slider(sliderOptions)
+ .bind('slide', function(e, ui){
+ select[0].selectedIndex = ui.value;
+ friendlyVal = select.find('option').eq( select[0].selectedIndex ).text() + ' ' + thisUnits;
+ slider.find('a').attr({
+ 'aria-valuenow': ui.value,
+ 'aria-valuetext': friendlyVal,
+ 'title': friendlyVal
+ });
+ })
+ .find('a')
+ .attr({
+ 'role': 'slider',
+ 'aria-valuemin': 0,
+ 'aria-valuemax': select.find('option').length-1,
+ 'aria-valuenow': select[0].selectedIndex,
+ 'aria-valuetext': friendlyVal,
+ 'title': friendlyVal,
+ 'aria-labelledby': thisLabel
+ });
+
+ select.bind('keyup change', function(){
+ slider.slider('value', select[0].selectedIndex);
+ });
+ }
+
+
+ });
+};
+
+
+
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2010 Filament Group, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

0 comments on commit 1c65e34

Please sign in to comment.