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:

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…





The 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!

---

Filed under: jQuery,Till System - @ January 1, 2011 9:41 pm

Tags: epos, infinite scroll, jquery, parseInt(), pos