DevExtreme / Cordova / PouchDB Mobile App

Back in 2012 I developed a native Android called "Trading Wisdom" for MTR Investors Group.

That app was built using Eclipse and Android SDK.  A few years back I wanted to go down the path of code-once, deploy to many platforms. At that time I started working with DevExtreme (which basically uses Cordova) to build apps.

This updated "Investing / Trading Wisdom" app was another project that I used to learn some additional mobile technologies: IndexDB and PouchDB.  When the app first starts up it takes the quotations from JSON and loads these into an IndexDB using PouchDB as the interface.

You can find this app on Google play. Soon to be launched on iOS.

Technologies:

  • DevExtreme
  • Cordova
  • HTML5
  • IndexDB
  • PouchDB
  • localStorage

HTML Page Transitions / Animiations

While developing a hybrid mobile app with DevExtreme I was looking for other options for full page transitions. I first looked at jQuery Mobile but the routing engine in jQuery Mobile conflicted with the routing engine.
 
The example below uses Bootstrap for styling, Animate.css for full page transitions and smoothState.js. The demo navigates between Home and an About Page. These are two pages, not one page with two DIVs.
 
Run Live Demo  -  Source code for this example: download the source - Animate.zip (13.9KB).

jQuery Scroll To Position Demo

This scroll demo will scroll the page to a specific DIV on the page. This demo works by calling a function and that function then scrolls the page to the DIV passed. 
function scrollToSection(containerID)
{
   var target = $('#' + containerID);

   event.preventDefault();
   $('html, body').animate({
           scrollTop: target.offset().top
   }, 1000);
}

<button onclick="scrollToSection('section2');">Scroll to Section II</button>