You may have read a feature which allows you to do some pretty amazing things, but in this post I will be showing you how to get some simple finger gesturing into you application where you may require scrolling. Right now, the current RhoElements version does not support native finger scrolling if your HTML content is larger then what can be displayed. This means that if you enabled scrollbars in the config.xml you would see those ugly old Windows Mobile scroll bars and you would have to click on them in order to scroll.

These are not very finger friendly, and quite honestly don't behave the way we all have grown accustomed to on on mobile phones. Before I get into how to do this, I want to thank who is in our Motorola Education team for providing the code behind this.He developed a clever way to use the jQuery framework + basic CSS to enable content to be scrollable by simply giving it a "scrollable' class. There may be many other ways to do this and I would urge you to comment if there are other methods you have found, but this seems to be a way that most people can incorporate without much effort. The code behind this uses the jQuery library which is now possible because of RhoElements support for webkit and HTML5. Now jQuery has been around for a while and there are like hundreds of plug-ins for it. This sample does not use any special jQuery plugins (if anyone finds one that works better/easier than this please post a comment). I am not going to walk through jQuery itself here, there are already a ton of postings like that on the web, but really the only thing we are using it for in this example is to easily traverse the HTML tags, assign functions to mouse events and to move the content on the display.

Lets take a look at the html page:

 
          
RhoElements Scroll Demo
          
                              
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin ligula est, et eleifend metus. Quisque dolor tellus, elementum id vulputate at, porttitor et neque. Nullam ac felis libero, vel accumsan quam. Sed rutrum facilisis velit, non vestibulum nibh venenatis eget. Nullam at orci nulla. Aliquam auctor, tortor nec dictum malesuada, metus neque hendrerit ipsum, in tempus nibh mauris tristique enim. Maecenas a velit mi, sed rutrum leo. Aliquam tempus tristique leo, at accumsan lorem commodo vitae. Integer euismod consectetur ornare. Nulla at tortor eros. Donec tempus risus mauris, vitae laoreet purus. Aenean vel nulla eu diam facilisis rhoncus eu sed nunc. Vestibulum blandit venenatis quam ac scelerisque. Donec eu ipsum vel urna accumsan euismod eget quis neque. Duis a mauris mauris. Mauris porttitor risus at ante tempor pulvinar. Suspendisse lacus lorem, bibendum ut molestie eu, ullamcorper nec nibh. Curabitur eu velit vel orci luctus vestibulum ac sed elit. Quisque ultricies ante sit amet nunc volutpat et imperdiet arcu viverra. In vel orci ut enim pulvinar condimentum. Mauris in arcu nec nisl euismod suscipit. In hac habitasse platea dictumst. In venenatis hendrerit fringilla. Curabitur ac ante odio. Quisque nec odio nulla, ultrices aliquet ligula. Donec sapien enim, vulputate in vehicula non, rhoncus vitae lectus. Donec ante est, luctus at molestie vitae, tristique quis lorem. Suspendisse luctus facilisis augue rhoncus commodo. Curabitur non pellentesque purus. Nunc dolor nisi, luctus vel fermentum in, luctus in ipsum. Morbi velit elit, tincidunt tincidunt sodales at, vulputate quis lorem. Donec mauris arcu, convallis id tempus eget, tincidunt in arcu. Integer eu erat ipsum, quis accumsan velit. Nam aliquet consequat turpis, id venenatis magna rutrum in. Ut aliquet lobortis enim, sit amet euismod libero ornare id. Vestibulum at augue ut sem aliquam tempor. Praesent nisl nibh, euismod id facilisis in, eleifend vitae leo. Sed nec lorem quam, eu sagittis quam.