Mac Web Based Till System – Infinite scrolling with jQuery and Safari

1 Jan
2011

As well as being able to scan barcodes to get products, I wanted staff to be able to keyword search products or simply scroll through the list of all products.

I have uploaded a quick video of the infinite scroll to youtube, so please take a quick peek and see how it’s done below…

First, let’s take a look at the code for the scroll div itself:

1
2
3
4
5
6
<div id="stocklookupContainer">
     <form id="barcodeKeywordSearchForm" method="get">
          <input id="barcodekeyword" class="barcodekeyword" name="barcodedata[Barcode][keyword]" type="search" />
          <input style="display: none;" type="submit" />
     </form>
</div>

We then have a document.ready function that fills it with the default set of products (cached with CakePHP’s view caching from the controller). The scrolling detection is then done like so…

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var elem = $('#stocklookup');
var inner = $('#stocklookup div.inner'); // the div.inner comes from our initial AJAX call
$('#stocklookup').scroll(function(){
     if((parseInt(elem.height(), 10)+parseInt(elem.scrollTop(), 10))==$('#stocklookup div.inner').innerHeight()){
          $('#stocklookup div.inner').append('<div id="page'+thispage+'"><\/div>');
          getInfiniteAjaxContent(infiniteAjaxURL+thispage+'/'+currentkeywords, 'page'+thispage, thispage);
    }
});
</script>

The

1
parseInt(elem.height(), 10)

is interesting, as if you fail to put the 10 as the 2nd argument (indicating we are talking base 10), the system will work fine until it comes across a number ending with 8. When it finds this, it will automatically assume we want to be working in base 8.

I will talk about the other elements on this page in further detail as soon as I have time…

I do realise these documents are hastily put together and I will go back and tidy them, but the till system must be installed tomorrow!

Comment Form

top