.&1|?" {}:+dt 4BEn!3_${E3DLVxyUq"$`ZٵXF)"30HS/2\B[Z8E(zsWݪky$/%f9kx:GrEzٿp?n% "t M\rI:XO-y/ޣ@4"wZCn}}DeSYr|S>ĉHnPjbH&1 ζCT MtZt׵aiݭRm5+YNCz 5$kfïPMJ8I0m`c:2(2LcHl'kIiFYWX0Hv>җ0>,ɲ$7u=ò톑b: cS?E2|DzbCaw:2\-EGzͨfpIs < $AKZwKSR$z}~uVF1^ h!0%TLyZܼ9ZoE%*@kf:pXh>dՂ3! s ׉o<2 1oo~iCā1=3 *yckheMW5&wx!_ߦ(hz<f̶lCΪojDQ e#C>8FP("d]jA4e>S'Z&G}@tse J N5[y-ģL7͌2!UyߖiN؝1% > RJ=KB,+?gs;(Yw2m *])6"Jֻ 5AyYA=Fӿam)ZXQxKOBYL_Fҧ>ZtZisWTƄmo/F?&OUTm4%gIo0doJ%sB6HC_ O#)1?uzR 5x{㶬&V)L.=O܁Dp}Rx)a@Ƿ% ͒ ^'w߲e'PLN5q8i&c`,g#?aT6UuLp/,zE~&cu3^M:ة`xD8DBP ؄"g|f}Y{uXEʅ˝&:{G]հ@3)׿p2Xu"])1<h䋓]KjFWPK6~QgmT$Dĩ0VeWcB_'2!3]`{ |0>َt{*_J|^ʅW"B#k\{􊸓0*-Y-ՂӠ_/WTj&άoKiT'g4ZCF%Z+);Abg&yHLk\{􊸓0BZ|]6#pHAm_ꗪw;* 0"xi%w:>ky?(g*8"-cFCĶ7%HUp$ F-5 'A$#z)7'q SYOS 8nn&,`\f(H˅և Uށ|rpKBm,YuοVXČ!}_3y60-,yϧBmӡ8nn&,`\f\ F#NWN/Ix!WDQP^NΆ* h4roTؿo$7U/ݒT#F7]"-cFCĶk hkD\"wG|,}K zaKWO|z8Lp${O40:o+G#_>ky?(g*8"-cFCĶĉ֟0) ׽AoY4VOi@0@pz]{a}=Co 3ʶAX C8kR/чG-SSI\64fsrŔ8nn&,`\f9Vcn}"=8TIZ+Z9!S?}7^Q{S.7cM!o %8nn&,`\fYKҶ~WyAw*ٸo0:.vA9 resetFilters(); }); }; var resetFilters = function () { this.priceSlider.jqxSlider('setValue', [this.priceSlider.jqxSlider('min'), this.priceSlider.jqxSlider('max')]); this.displaySlider.jqxSlider('setValue', [this.displaySlider.jqxSlider('min'), this.displaySlider.jqxSlider('max')]); this.hddSlider.jqxSlider('setValue', [this.hddSlider.jqxSlider('min'), this.hddSlider.jqxSlider('max')]); this.ramSlider.jqxSlider('setValue', [this.ramSlider.jqxSlider('min'), this.ramSlider.jqxSlider('max')]); }; var handleSlide = function (option, value) { filterItems(updateFilter(option, value)); setLabelValue(this[option + 'Slider'], option, value); }; var setLabelValue = function (slider, option, value) { var label; switch (option) { case 'price': label = 'USD'; break; case 'hdd': label = 'GB'; break; case 'display': label = 'inches'; break; case 'ram': label = 'GB'; break; } document.getElementById(option + 'Max').innerHTML = value.rangeEnd + ' ' + label; document.getElementById(option + 'Min').innerHTML = value.rangeStart + ' ' + label; }; var filterItems = function (filter) { var failed = false; for (var laptop in laptops) { for (var property in filter) { if (filter[property].max < laptops[laptop][property] || filter[property].min > laptops[laptop][property]) { failed = true; } } if (failed) { if (!laptops[laptop].marked) { markItem(laptop); } } else { if (laptops[laptop].marked) { unmarkItem(laptop); } } failed = false; } }; var resetItemFilter = function (laptop) { var laptopCells = $('.demo-laptop-cell'); for (var i = 0; i < laptopCells.length; i += 1) { laptopCells[i].css('opacity', 1); } }; var unmarkItem = function (laptop) { var domLaptop = $('#' + laptop); domLaptop.css('opacity', 1); laptops[laptop].marked = false; }; var markItem = function (laptop) { var domLaptop = $('#' + laptop); domLaptop.css('opacity', 0.5); laptops[laptop].marked = true; }; var initSliders = function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) { this.priceSlider = priceSlider; this.displaySlider = displaySlider; this.ramSlider = ramSlider; this.hddSlider = hddSlider; this.resetButton = resetButton; buildFilter(); }; var buildFilter = function () { var priceValue = this.priceSlider.jqxSlider('value'), displayValue = this.displaySlider.jqxSlider('value'), ramValue = this.ramSlider.jqxSlider('value'), hddValue = this.hddSlider.jqxSlider('value'); this.filter = { price: { max: priceValue.rangeEnd, min: priceValue.rangeStart }, display: { max: displayValue.rangeEnd, min: displayValue.rangeStart }, hdd: { max: hddValue.rangeEnd, min: hddValue.rangeStart }, ram: { max: ramValue.rangeEnd, min: ramValue.rangeStart } }; }; var updateFilter = function (option, value) { this.filter[option].min = value.rangeStart; this.filter[option].max = value.rangeEnd; return this.filter; }; return { init: function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) { drawTable(); initSliders(priceSlider, displaySlider, ramSlider, hddSlider, resetButton); addEventListeners(); setLabelValue(priceSlider, 'price', priceSlider.jqxSlider('value')); setLabelValue(displaySlider, 'display', displaySlider.jqxSlider('value')); setLabelValue(ramSlider, 'ram', ramSlider.jqxSlider('value')); setLabelValue(hddSlider, 'hdd', hddSlider.jqxSlider('value')); } }; } ($)); $(document).ready(function () { $('#catalogue').css('visibility', 'hidden'); var priceslider = $('#priceSlider'), displaySlider = $('#displaySlider'), ramSlider = $('#ramSlider'), hddSlider = $('#hddSlider'), resetButton = $('#resetButton'); priceslider.jqxSlider({ showButtons: true, height: 30, min: 500, max: 4000, step: 350, ticksFrequency: 350, mode: 'fixed', values: [500, 4000], rangeSlider: true, width: 180 }); displaySlider.jqxSlider({ height: 30, min: 9, max: 19, step: 1, ticksFrequency: 1, values: [9, 19], rangeSlider: true, mode: 'fixed', width: 180 }); ramSlider.jqxSlider({ height: 30, min: 2, max: 12, step: 1, ticksFrequency: 1, values: [2, 12], rangeSlider: true, mode: 'fixed', width: 180 }); hddSlider.jqxSlider({ height: 30, min: 150, max: 1500, values: [150, 1500], step: 135, ticksFrequency: 135, rangeSlider: true, mode: 'fixed', width: 180 }); resetButton.jqxButton({ width: 100 }); shop.init(priceslider, displaySlider, ramSlider, hddSlider, resetButton); $('#catalogue').css('visibility', 'visible'); });
Price

Screen Size

RAM

HDD