├── .repo-rt ├── images ├── bg-button.png ├── bg-form.png ├── bg-slider.png ├── bg-continuum.png ├── bg-button-hover.png ├── bg-slider-handle.png ├── bg-slider-range.png └── bg-slider-handle-hover.png ├── css ├── basic.css └── enhanced.css ├── README.md ├── js ├── example.js ├── jQuery.peSlider.js ├── enhance.js └── jquery.min.js ├── license.txt ├── index.html └── enhance.js /.repo-rt: -------------------------------------------------------------------------------- 1 | RETIRED 2 | -------------------------------------------------------------------------------- /images/bg-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-button.png -------------------------------------------------------------------------------- /images/bg-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-form.png -------------------------------------------------------------------------------- /images/bg-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-slider.png -------------------------------------------------------------------------------- /images/bg-continuum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-continuum.png -------------------------------------------------------------------------------- /images/bg-button-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-button-hover.png -------------------------------------------------------------------------------- /images/bg-slider-handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-slider-handle.png -------------------------------------------------------------------------------- /images/bg-slider-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-slider-range.png -------------------------------------------------------------------------------- /images/bg-slider-handle-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Slider/HEAD/images/bg-slider-handle-hover.png -------------------------------------------------------------------------------- /css/basic.css: -------------------------------------------------------------------------------- 1 | /* Page styles */ 2 | body, input { font-family: "Segoe UI", Arial, sans-serif; } 3 | legend { font-weight: bold; } 4 | /* Logo */ 5 | .header { 6 | background: #247201 url(http://filamentgroup.com/images/headerbg-new.jpg) no-repeat bottom left; 7 | } 8 | #fg-logo { 9 | text-indent: -9999px; 10 | margin: 0 auto; 11 | width: 287px; 12 | height: 52px; 13 | background-image: url(http://filamentgroup.com/images/fg-logo-icon.png); 14 | } 15 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){ 16 | #fg-logo { 17 | background-size: 287px 52px; 18 | background-image: url(http://filamentgroup.com/images/fg-logo-icon-lrg.png); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # Code Examples from the book [Designing with Progressive Enhancement](http://filamentgroup.com/dwpe) 4 | 5 | [ ](http://www.filamentgroup.com/) 6 | 7 | This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit). 8 | 9 | All examples use the [jQuery JavaScript library](http://jquery.com). 10 | 11 | These code examples use the [EnhanceJS framework](https://github.com/filamentgroup/EnhanceJS) for applying progressive enhancement based on browser capabilities testing. 12 | -------------------------------------------------------------------------------- /js/example.js: -------------------------------------------------------------------------------- 1 | // Run the script on DOM ready: 2 | $(function(){ 3 | 4 | //create input sliders 5 | $('input#price').peSlider({range: 'min'}); 6 | $('input#bedrooms,input#baths').peSlider({range: 'min'}); 7 | 8 | //create select sliders 9 | $('select') 10 | .attr('aria-hidden','true') 11 | .after('
') 12 | .peSlider({ 13 | slide:function(e,ui){ 14 | $(this).next().next().text( $(this).find('a:eq(0)').attr('aria-valuetext') ); 15 | } 16 | }) 17 | .each(function(){ 18 | $(this).next().text( $(this).prev().find('a:eq(0)').attr('aria-valuetext') ); 19 | }); 20 | 21 | //add select labels 22 | $('') 23 | .insertAfter('#amenities legend'); 24 | 25 | }); 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010 Filament Group, Inc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /css/enhanced.css: -------------------------------------------------------------------------------- 1 | /* Page styles */ 2 | body { font-size:62.5%; } 3 | 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; } 4 | fieldset { border:0; margin:1em 0 0; border-top:1px dotted #aaa; } 5 | legend { font-size:2em; padding:0; margin:0; color:#222; } 6 | legend span { position:relative; top:-.1em; left:-10px; background:#fafafa; padding-right:10px; } 7 | label { font-size:1.6em; margin-right:15px; float:left; clear:left; width:130px; text-align:right; } 8 | .question { overflow:auto; padding:1.4em 0; } 9 | .slider-status { float:left; font-weight:bold; font-size:1.5em; color:#444; } 10 | 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; } 11 | 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; } 12 | input#search:hover { background-image:url(../images/bg-button-hover.png); } 13 | #subway,#water,#walking { display: none;} 14 | 15 | /* slider styles */ 16 | .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; } 17 | .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; } 18 | .ui-slider .ui-slider-handle:hover,.ui-slider .ui-slider-handle:focus { background-image:url(../images/bg-slider-handle-hover.png); } 19 | .ui-slider .ui-slider-handle:active { background-image:none; } 20 | .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; } 21 | 22 | /*slider label key*/ 23 | .sliders-labels { height:2em; margin-left:145px; width:293px; background:url(../images/bg-continuum.png) bottom left no-repeat; padding-top:1em; } 24 | .sliders-labels span.label-first { float:left; } 25 | .sliders-labels span.label-last { float:right; } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |=0))k||l.push(u);else if(k)h[p]=false;return false},ID:function(g){return g[1].replace(/\\/g,"")},TAG:function(g){return g[1].toLowerCase()},CHILD:function(g){if(g[1]==="nth"){var h=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(g[2]==="even"&&"2n"||g[2]==="odd"&& 79 | "2n+1"||!/\D/.test(g[2])&&"0n+"+g[2]||g[2]);g[2]=h[1]+(h[2]||1)-0;g[3]=h[3]-0}g[0]=e++;return g},ATTR:function(g,h,k,l,q,p){h=g[1].replace(/\\/g,"");if(!p&&m.attrMap[h])g[1]=m.attrMap[h];if(g[2]==="~=")g[4]=" "+g[4]+" ";return g},PSEUDO:function(g,h,k,l,q){if(g[1]==="not")if((f.exec(g[3])||"").length>1||/^\w/.test(g[3]))g[3]=o(g[3],null,null,h);else{g=o.filter(g[3],h,k,true^q);k||l.push.apply(l,g);return false}else if(m.match.POS.test(g[0])||m.match.CHILD.test(g[0]))return true;return g},POS:function(g){g.unshift(true); 80 | return g}},filters:{enabled:function(g){return g.disabled===false&&g.type!=="hidden"},disabled:function(g){return g.disabled===true},checked:function(g){return g.checked===true},selected:function(g){return g.selected===true},parent:function(g){return!!g.firstChild},empty:function(g){return!g.firstChild},has:function(g,h,k){return!!o(k[3],g).length},header:function(g){return/h\d/i.test(g.nodeName)},text:function(g){return"text"===g.type},radio:function(g){return"radio"===g.type},checkbox:function(g){return"checkbox"=== 81 | g.type},file:function(g){return"file"===g.type},password:function(g){return"password"===g.type},submit:function(g){return"submit"===g.type},image:function(g){return"image"===g.type},reset:function(g){return"reset"===g.type},button:function(g){return"button"===g.type||g.nodeName.toLowerCase()==="button"},input:function(g){return/input|select|textarea|button/i.test(g.nodeName)}},setFilters:{first:function(g,h){return h===0},last:function(g,h,k,l){return h===l.length-1},even:function(g,h){return h%2=== 82 | 0},odd:function(g,h){return h%2===1},lt:function(g,h,k){return hk[3]-0},nth:function(g,h,k){return k[3]-0===h},eq:function(g,h,k){return k[3]-0===h}},filter:{PSEUDO:function(g,h,k,l){var q=h[1],p=m.filters[q];if(p)return p(g,k,h,l);else if(q==="contains")return(g.textContent||g.innerText||a([g])||"").indexOf(h[3])>=0;else if(q==="not"){h=h[3];k=0;for(l=h.length;k = 84 | 0}},ID:function(g,h){return g.nodeType===1&&g.getAttribute("id")===h},TAG:function(g,h){return h==="*"&&g.nodeType===1||g.nodeName.toLowerCase()===h},CLASS:function(g,h){return(" "+(g.className||g.getAttribute("class"))+" ").indexOf(h)>-1},ATTR:function(g,h){var k=h[1];g=m.attrHandle[k]?m.attrHandle[k](g):g[k]!=null?g[k]:g.getAttribute(k);k=g+"";var l=h[2];h=h[4];return g==null?l==="!=":l==="="?k===h:l==="*="?k.indexOf(h)>=0:l==="~="?(" "+k+" ").indexOf(h)>=0:!h?k&&g!==false:l==="!="?k!==h:l==="^="? 85 | k.indexOf(h)===0:l==="$="?k.substr(k.length-h.length)===h:l==="|="?k===h||k.substr(0,h.length+1)===h+"-":false},POS:function(g,h,k,l){var q=m.setFilters[h[2]];if(q)return q(g,k,h,l)}}},s=m.match.POS;for(var x in m.match){m.match[x]=new RegExp(m.match[x].source+/(?![^\[]*\])(?![^\(]*\))/.source);m.leftMatch[x]=new RegExp(/(^(?:.|\r|\n)*?)/.source+m.match[x].source.replace(/\\(\d+)/g,function(g,h){return"\\"+(h-0+1)}))}var A=function(g,h){g=Array.prototype.slice.call(g,0);if(h){h.push.apply(h,g);return h}return g}; 86 | try{Array.prototype.slice.call(r.documentElement.childNodes,0)}catch(B){A=function(g,h){h=h||[];if(i.call(g)==="[object Array]")Array.prototype.push.apply(h,g);else if(typeof g.length==="number")for(var k=0,l=g.length;k ";var k=r.documentElement;k.insertBefore(g,k.firstChild);if(r.getElementById(h)){m.find.ID=function(l,q,p){if(typeof q.getElementById!=="undefined"&&!p)return(q=q.getElementById(l[1]))?q.id===l[1]||typeof q.getAttributeNode!=="undefined"&&q.getAttributeNode("id").nodeValue===l[1]?[q]:v:[]};m.filter.ID=function(l,q){var p=typeof l.getAttributeNode!=="undefined"&&l.getAttributeNode("id"); 89 | return l.nodeType===1&&p&&p.nodeValue===q}}k.removeChild(g);k=g=null})();(function(){var g=r.createElement("div");g.appendChild(r.createComment(""));if(g.getElementsByTagName("*").length>0)m.find.TAG=function(h,k){k=k.getElementsByTagName(h[1]);if(h[1]==="*"){h=[];for(var l=0;k[l];l++)k[l].nodeType===1&&h.push(k[l]);k=h}return k};g.innerHTML="";if(g.firstChild&&typeof g.firstChild.getAttribute!=="undefined"&&g.firstChild.getAttribute("href")!=="#")m.attrHandle.href=function(h){return h.getAttribute("href", 90 | 2)};g=null})();r.querySelectorAll&&function(){var g=o,h=r.createElement("div");h.innerHTML="";if(!(h.querySelectorAll&&h.querySelectorAll(".TEST").length===0)){o=function(l,q,p,u){q=q||r;if(!u&&q.nodeType===9&&!w(q))try{return A(q.querySelectorAll(l),p)}catch(t){}return g(l,q,p,u)};for(var k in g)o[k]=g[k];h=null}}();(function(){var g=r.createElement("div");g.innerHTML="";if(!(!g.getElementsByClassName||g.getElementsByClassName("e").length=== 91 | 0)){g.lastChild.className="e";if(g.getElementsByClassName("e").length!==1){m.order.splice(1,0,"CLASS");m.find.CLASS=function(h,k,l){if(typeof k.getElementsByClassName!=="undefined"&&!l)return k.getElementsByClassName(h[1])};g=null}}})();var E=r.compareDocumentPosition?function(g,h){return g.compareDocumentPosition(h)&16}:function(g,h){return g!==h&&(g.contains?g.contains(h):true)},w=function(g){return(g=(g?g.ownerDocument||g:0).documentElement)?g.nodeName!=="HTML":false},fa=function(g,h){var k=[], 92 | l="",q;for(h=h.nodeType?[h]:h;q=m.match.PSEUDO.exec(g);){l+=q[0];g=g.replace(m.match.PSEUDO,"")}g=m.relative[g]?g+"*":g;q=0;for(var p=h.length;q =0===d})};c.fn.extend({find:function(a){for(var b=this.pushStack("","find",a),d=0,f=0,e=this.length;f
0)for(var i=d;i 0},closest:function(a,b){if(c.isArray(a)){var d=[],f=this[0],e,i={},j;if(f&&a.length){e=0;for(var n=a.length;e 95 | -1:c(f).is(e)){d.push({selector:j,elem:f});delete i[j]}}f=f.parentNode}}return d}var o=c.expr.match.POS.test(a)?c(a,b||this.context):null;return this.map(function(m,s){for(;s&&s.ownerDocument&&s!==b;){if(o?o.index(s)>-1:c(s).is(a))return s;s=s.parentNode}return null})},index:function(a){if(!a||typeof a==="string")return c.inArray(this[0],a?c(a):this.parent().children());return c.inArray(a.jquery?a[0]:a,this)},add:function(a,b){a=typeof a==="string"?c(a,b||this.context):c.makeArray(a);b=c.merge(this.get(), 96 | a);return this.pushStack(pa(a[0])||pa(b[0])?b:c.unique(b))},andSelf:function(){return this.add(this.prevObject)}});c.each({parent:function(a){return(a=a.parentNode)&&a.nodeType!==11?a:null},parents:function(a){return c.dir(a,"parentNode")},parentsUntil:function(a,b,d){return c.dir(a,"parentNode",d)},next:function(a){return c.nth(a,2,"nextSibling")},prev:function(a){return c.nth(a,2,"previousSibling")},nextAll:function(a){return c.dir(a,"nextSibling")},prevAll:function(a){return c.dir(a,"previousSibling")}, 97 | nextUntil:function(a,b,d){return c.dir(a,"nextSibling",d)},prevUntil:function(a,b,d){return c.dir(a,"previousSibling",d)},siblings:function(a){return c.sibling(a.parentNode.firstChild,a)},children:function(a){return c.sibling(a.firstChild)},contents:function(a){return c.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:c.makeArray(a.childNodes)}},function(a,b){c.fn[a]=function(d,f){var e=c.map(this,b,d);bb.test(a)||(f=d);if(f&&typeof f==="string")e=c.filter(f,e);e=this.length>1?c.unique(e): 98 | e;if((this.length>1||db.test(f))&&cb.test(a))e=e.reverse();return this.pushStack(e,a,Q.call(arguments).join(","))}});c.extend({filter:function(a,b,d){if(d)a=":not("+a+")";return c.find.matches(a,b)},dir:function(a,b,d){var f=[];for(a=a[b];a&&a.nodeType!==9&&(d===v||a.nodeType!==1||!c(a).is(d));){a.nodeType===1&&f.push(a);a=a[b]}return f},nth:function(a,b,d){b=b||1;for(var f=0;a;a=a[d])if(a.nodeType===1&&++f===b)break;return a},sibling:function(a,b){for(var d=[];a;a=a.nextSibling)a.nodeType===1&&a!== 99 | b&&d.push(a);return d}});var Fa=/ jQuery\d+="(?:\d+|null)"/g,V=/^\s+/,Ga=/(<([\w:]+)[^>]*?)\/>/g,eb=/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i,Ha=/<([\w:]+)/,fb=/"+d+">"},F={option:[1,""],legend:[1,""],thead:[1," ","
"],tr:[2,"","
"],td:[3,""], 100 | col:[2,"
"," "],area:[1,""],_default:[0,"",""]};F.optgroup=F.option;F.tbody=F.tfoot=F.colgroup=F.caption=F.thead;F.th=F.td;if(!c.support.htmlSerialize)F._default=[1,"div
"," ",""];c.fn.extend({text:function(a){if(c.isFunction(a))return this.each(function(b){var d=c(this);d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==v)return this.empty().append((this[0]&&this[0].ownerDocument||r).createTextNode(a));return c.getText(this)}, 101 | wrapAll:function(a){if(c.isFunction(a))return this.each(function(d){c(this).wrapAll(a.call(this,d))});if(this[0]){var b=c(a,this[0].ownerDocument).eq(0).clone(true);this[0].parentNode&&b.insertBefore(this[0]);b.map(function(){for(var d=this;d.firstChild&&d.firstChild.nodeType===1;)d=d.firstChild;return d}).append(this)}return this},wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length? 102 | d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments, 103 | false,function(b){this.parentNode.insertBefore(b,this)});else if(arguments.length){var a=c(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this.nextSibling)});else if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,c(arguments[0]).toArray());return a}},clone:function(a){var b=this.map(function(){if(!c.support.noCloneEvent&& 104 | !c.isXMLDoc(this)){var d=this.outerHTML,f=this.ownerDocument;if(!d){d=f.createElement("div");d.appendChild(this.cloneNode(true));d=d.innerHTML}return c.clean([d.replace(Fa,"").replace(V,"")],f)[0]}else return this.cloneNode(true)});if(a===true){qa(this,b);qa(this.find("*"),b.find("*"))}return b},html:function(a){if(a===v)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(Fa,""):null;else if(typeof a==="string"&&!/