The Firefox Marketplace Aurora Android was released last week so developers can start submitting their HTML5 based apps.

I’ve been working on the interval timer app on and off for some time now and have been using it for experimentation and proof points around HTML5.

In playing with user interface options I wanted a mechanism that would let athletes set the size of the main display element to whatever they wanted. The trick for my app is that they need to be able to do it with little dexterity (like with gloves or hand wraps on) and I wanted it to work on a PC with, or without a mouse, and on an Android Tablet.

So my idea was to allow each important element of the app to be re-sized in one of three ways.

  1. The app is running on a PC with a mouse wheel and when the user places the mouse inside the element and scrolls the wheel, the element will grow or shrink depending on the direction of the scroll action (larger for Up-Scroll and smaller for Down-Scroll).
  2. The app is running on a PC whose mouse does not have a scroll wheel, in which case the user can click and drag to change the element size.
  3. The app is running on a tablet of phone and they should be able to swipe an element to re-size it. (Note: I don’t want to use pinch in this case because my users may be wearing gloves.)

So, I put together a demo.

The demo starts with this……

And after using any of the three methods above the element is re-sized as ….

Note that the resizing actions only work when the mouse or touch events are on the specific element that is to be re-sized.

As is so often the case, there are jQuery plugins handle all of these UI desires.

The code is below. Simple stuff, but another example of a feature that I started out with saying “you can’t do that in HTML.

You can run the dmo HERE


<!doctype html>
<html>
   <head>
      <title>Mousewheel font resizer</title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <script src="js/jquery.js"></script>
      <script src="js/jquery.mousewheel.js"></script>
      <script src="js/jquery.event.move.js"></script>
      <script src="js/jquery.event.swipe.js"></script>
      
      <script type="text/javascript">

         var TextSize = 1;

         $(function() {
			 
             var currentTime = new Date()
             var month = currentTime.getMonth() + 1;
             var day = currentTime.getDate();
             var year = currentTime.getFullYear();
             $('#TimeDisplay').html(day + "/" + month + "/" + year);


             $('#TimeDisplay')
               .mousewheel(function(event, delta, deltaX, deltaY) {
                  var o = '';
                  if (delta > 0) {               
                     o = delta;
				 }
                 else if (delta < 0)
                     o = delta;
                  
                  if( o != '' )
                     size( o );
                  return false; // prevent default
               });
               
               
               $('#TimeDisplay').on('swipeleft', function(e) {
					size(-1);
				});
               
               $('#TimeDisplay').on('swiperight', function(e) {
					size(1);
				});
				
               $('#TimeDisplay').on('swipeup', function(e) {
					size(1);
				});
      
               $('#TimeDisplay').on('swipedown', function(e) {
					size(-1);
				});
            
            function size(msg) {
               TextSize += msg;
               if (TextSize < 1) {
                   TextSize = 1;
               }
            $('#TimeDisplay').css('font-size', TextSize + 'em');
            };
         });
      </script>
   </head>
   <body>
      <br /><br />
      <div id="TimeDisplay">s</div>
      <br />
   </body>
</html>