rho-scrolldemo.jpg

 

You may have read a previous blog post about RhoElements' custom gesture 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 Syzmon 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:

<!DOCTYPE html> 
<html>
<head>
<title>RhoElements Scroll Demo</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css">
</head>
<body>
<div id="wrapper">
          <header><h1><a href="#" id="title" class="button nowrap"><span>RhoElements Scroll Demo</span></a></h1></header>
          <div id="content" class="scrollable">
                              <h3>
                              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.
                              </h3>
  </div>
  <div><footer><h2><span>Footer</span></a></h2></footer></div>
 </div>
</body>
</html>

 

The first key to getting the content scrollable is adding a class called "scrollable" to the content. Then in the javascript file on the page load, using jQuery syntax, we traverse through the HTML tags that have class "scrollable" and call a function that basically sets up what to do when the mousedown,mousemove,mouseup events happen.

 

$(".scrollable").each(nlt.scrollable.init);   // Traverse through all content with scrollable class and setup mouse handlers

 

Here is the snippet that setups the mouse handlers:

init: function(e) {

                              $(this).children().size() > 0 ? $(this).children().wrapAll('<a/>') : $(this).append('<a/>');

                              $(this).children(":first-child").css('top', 0);
                              $(this).children(":first-child").get(0).addEventListener('mousedown', nlt.scrollable.__down, false);
                              $(this).children(":first-child").get(0).addEventListener('mousemove', nlt.scrollable.__move, false);
                              window.addEventListener('mouseup', nlt.scrollable.__up, false);
                              window.addEventListener('resize', nlt.scrollable.__resize, false);

                              $(this).append("<span class=\"sb_scroll\"><span class=\"sb_bar\"></span></span>");
                              $(this).each(nlt.scrollable.resize);
                    }

 

This effectively using jQuery syntax to first add event handlers for the mouse events and then it adds two <span> tags. One is for the scroll bar section. The other is for the actual scroll bar itself. We are simply just refering to two classes that get specified in the CSS file:

 

.sb_scroll {
          position: absolute;
          height: 100%;
          display: block;
          width: 5px;
          top: 0;
          right: 0;
          z-index: 98;
}

.sb_bar {
          position: absolute;
          display: block;
          width: 100%;
          background: orange;
          top: 0;
          left: 0;
          z-index: 99;
}

 

You can play around with the properties to change the width and color of the scroll bar, but pretty much this is straight CSS.

 

So now the content area has been initialized to show scroll content and mouse handlers have been setup. The next part is to actually move the content inside the HTML element that is being scrolled:

__down: function (e) {
                              //e.stopPropagation();

                              nlt.scrollable.__offset = e.pageY - parseInt(e.currentTarget.style.top);
                              nlt.scrollable.__limit = Math.min(0, $(e.currentTarget).parent().height() - $(e.currentTarget).height());
                              nlt.scrollable.__self = e.currentTarget;

                              nlt.scrollable.__ratio = $(e.currentTarget).parent().innerHeight() / $(e.currentTarget).innerHeight();
                    },

                    __move: function (e) {
                              //e.preventDefault();
                              //e.stopPropagation();

                              if (nlt.scrollable.__self) {
                                        var t = Math.max(nlt.scrollable.__limit, Math.min(0, (e.pageY - nlt.scrollable.__offset)))
                                        e.currentTarget.style.top = t + 'px';
                                        $(e.currentTarget.parentNode).find(".sb_bar").css('top', -t * nlt.scrollable.__ratio);
                              }

 

Basically we are keeping track of parameters that define where the top section of the current element, where the mouse is and some limits on page and current element heights are.From this we know the direction the scroll is going in and where we should stop scrolling. Then based on this we can move the currentTarget's top property so that the content looks like it scrolls. This method works across orientation and screen size differences (load the test page inside of Chrome browser on your PC and play around with changing the browser window size to see for yourself).

 

Have a look at the full source and test app by downloading the code and either trying it inside of Chrome browser (mouse clicks work like a finger gesture) or on a device running RhoElements