How to scroll up by tapping status bar in Cordova/PhoneGap

Holy, moly! This issue has been chasing me for more than 3 years! I’ve always been a passionate Cordova/PhoneGap developer, even if many people don’t like it: I personally think it’s not a bad platform if you got experience and you know what you’re doing.

However, since apps built with Cordova/PhoneGap completely rely on webkit and html, scrolling usually feels a little slow which is the reason why many people use a trick: They blow up a div element to 100% width and height and use -webkit-overflow-scrolling:touch to get smooth momentum scrolling within the div.

Now, this works pretty good but the tradeoff is that you loose the ability to easily scroll up in your app by simply tapping the status bar on the top of the screen in iOS. This is a big usability issue and needs to be fixed imho.

So, here’s the fix:

First, you need to install this plugin: cordova-plugin-statusbar
You can do so by simply opening terminal, cd to your project folder an run:

cordova plugin add cordova-plugin-statusbar

This plugin will fire an event when status bar is tapped. You need to listen to this event in JavaScript:

document.addEventListener("deviceready", function () {
    window.addEventListener("statusTap", function () {
        scrollUp(); // Now, let's implement this, shall we? :D
}, false);

You’re almost there! You only need to programmatically scroll up your container. Let’s assume the container you’re scrolling on and which you applied -webkit-overflow-scrolling:touch on has id “wrapper“.

<div id="wrapper">
    Lots of stuff here to scroll..

So what you want to do is:

var isScrollingUp = false,
    scrollTime = 700; // Adjust scroll speed here. Lower = faster. Higher = slower.
function scrollUp () {
    if (!isScrollingUp){
        var $curpage = $('#wrapper'),
            curpage = $curpage.get(0); = 'hidden';
        isScrollingUp = true;
        $curpage.animate({scrollTop: 0}, scrollTime);
        setTimeout(function () {
            isScrollingUp = false;
        }, scrollTime + 1);
        $timeout(function () {
   = '';
        }, 10);

I know the code ain’t pretty because of all the weird timeout stuff but it magically just works.


I stripped this code snipped off a project of mine and had to do some modifications for this blog post, so I don’t know if everything still works, so please let me know if this did work for you or not.

Why I am still in love with Framework7

Disclaimler: First of all, let me state clear that I am not involved into the Framework7 project. I am not getting paid for this post. This is just my honest, personal opinion as a mobile developer.

Early steps

The first framework I used when I started mobile development was jQueryMobile. I was used to jQuery coming from Desktop programming so I thought: “Hey, it says jQuery, so I guess it must be good”. It sucked balls, just like any other Framework I tried like KendoUI, SenchaTouch or Ionic. They either sucked regarding performance, sucked about look & feel or simply sucked monkey ass ballz! Excuse me for my language but for years I couldn’t believe that it was true that there is no HTML5-framework that can deliver anything close to a native app, so I always believed that it simply wasn’t possible.

And then I discovered Framework7

Oh, boy was I blown away when I saw the first demos for iOS on their website. This was just what I was looking for. The way these apps looked, feeled and performed was 99.9% accurate to what I am used from native apps. I couldn’t believe it and so I tipped my first steps in. I quickly found out that Framework7 was not only easy to use, it just worked™. You create a few lines of HTML markup and boom, that’s it. Framework7 will take care of the rest. The looks, the page transitions all works out of the box. I couldn’t believe it and why hadn’t I heard about it before? I don’t know but since they also released a new Material Design option for Android I am absolutely convinced: This is it. The best framework you could possibly use for mobile app development with HTML5, CSS3 and JavaScript. Throw that all into a PhoneGap/Cordova container and you should be fine.


framework7 demo screenshot


For iPhone open this.
On Android open this.

The future

The biggest problem I see with Framework7 is that it doesn’t get enough attention. For years I didn’t hear anything about it and when I talk to other devs they never saw it before until I show em and they’re all completely blown away.

Also, if you search for “best html5 mobile framework” on Google you will get shitloads of so called comparison websites like “Top 10 mobile frameworks” and barely I see F7 mentioned or even find their main website in the search results. So, if you like F7 and you’d like to support, go tweet about it right now!

I just hope that developers haven’t given up on HTML5 for apps yet. Since the hype of Facebook’s React framework many people seem to transition there.

Oh, boy I need to go back coding. This is so much fun <3

How to set user agent for file_get_html() in dom.php

The problem with file_get_html ()

I really like the Simple HTML DOM Parser for PHP cause of its simplicity but today I encountered the problem of grabbing different HTML for different devices, so I checked the docs but couldn’t find any option how to do it.

So, I dugg into the lib code myself, ready for some manual patching, when I found out that there is actually a way to do this the proper way.

The solution

Let’s assume, you open a connection like this:

$html = file_get_html ($url);

In order to set a user agent for iPhone 5 for example, simply do this:

$opts = array(
    'header'=>"User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53\r\n"
$context = stream_context_create($opts);
$html = file_get_html($url, false, $context);

As you can see, you can even set more headers if you want.

Damn, that was easy, wasn’t it? :-)

How to add dots every 3 digits in currency values with JavaScript

If you’re European like me, you’re probably used to this notation:
€ 366.432 instead of 366,432 or 366432.
In order to get this done in JavaScript you want to do the following:

// Number
var money = 366432;
// Convert to String and add dots every 3 digits
var moneyDots = money.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
// Set in HTML
$('.anywhere').text('€ ' + moneyDots);

Keep in mind that moneyDots is a String from now on! It’s not a number anymore!

Upscroller for Framework7

Wait! Read this first!

There is a better, more generic solution described here: How to scroll up by tapping status bar in Cordova/PhoneGap apps on iOS

If you still want to checkout the Upscroller plugin, feel free to read on :-)

Plugin description

I created a tiny little plugin for Framework7 that fixes the problem that users cannot scroll up a large list by simply tapping the top of the screen. To work around this, my plugin checks if the user has scrolled down a bit and then displays a nice looking blue button at the top of the screen which let the user scroll up with a cool looking slide animation.


Check out the demo here.


Grab the plugin on Github if you like.


Upscroller Screenshot

How to fix getting stuck when scrolling up in Framework7

The problem in Framework7

In most webapps for iOS (not only Framework7) that use -webkit-overflow-scrolling:touch for scrolling within elements instead of the whole body you will experience the following issue:

You scroll up to the very top of the document and then you scroll down immediately when you get the bounce back. You will notice that you’re stuck. The only way to escape from this is to release the screen, wait 1-2 seconds and then scroll.

The solution

So, here is the magic fix for you:

$scroller = $(".page-content");
$scroller.each(function (i, el) {
  var $scrollContainer = $(el);
  $scrollContainer.bind('touchstart', function (ev) {
	var $this = $(this),
	  scroller = $scrollContainer.get(0),
	if ($this.scrollTop() === 0) {
	scrollTop = scroller.scrollTop;
	scrollHeight = scroller.scrollHeight;
	offsetHeight = scroller.offsetHeight;
	contentHeight = scrollHeight - offsetHeight;
	if (contentHeight === scrollTop) {
	  $this.scrollTop(scrollTop - 1);

Toast for Framework7

I noticed that Framework7 lacks a component like this:

Toast plugin screenshot

So, in order to learn how to create a F7 plugin I did this little thing.

Check it out

How to use Toast

This is gonna be a no-brainer, trust me.

1) Add stylesheet to head

<link rel="stylesheet" href="toast.css"></link>

And add script after Framework7 script reference:

<script src="toast.js"></script>

2) Create a new instance

var app = new Framework7();
var toast = app.toast('Marked star', '<div>☆</div>', {})

As first parameter you set the message which gets displayed at the bottom. As 2nd parameter you have to set the icon. You can use free HTML here so set what ever you want (ASCii, Font-Icon, Images, SVG…). Third is reserved for options.

3) Now you can show or hide the box

// show;


// hide;

You’re done :D

Download on Github

Grab is here:

MIT License

Feel free to copy, modify, fork or do what ever you want :-)


I wanted to create a similar experience to those cards that you can swipe left and right in Tinder, but with web technology. So I did. There are already 2 libs that do this but they’re based on Ionic which I didn’t want to have a dependency on. Tindercards.js only requires jQuery and Hammer.js.

The result looks like this:

Video demo

On YouTube:


Tindercards.js demo screenshot

Live Demo

Works best on iPhone:


Tested on

  • iOS Safari

API Documentation

There are just two components that you need. A prototype object called Tindercardsjs.card and a method called Tindercardsjs.render. The signatures are like this:

 * Representation of 1 card on the stack.
 * This is a prototype object! Initialize with "new" keyword
 * @param {String} cardid Pass a unique id for each card so you know later which card is which
 * @param {String} name The name of the person on the card
 * @param {String} description The description text of that person
 * @param {String} imgpath The path to the img
Tindercardsjs.card(cardid, name, description, imgpath)
 * Renders the given stack into the given jQuery element.
 * This is a method, just call it. Parameter "cards" must be an
 * array of Tindercardsjs.card
 * @param {Array} cards An array of cards (@see Tindercardsjs.card)
 * @param {jQuery} target The target in which the stack should be rendered to
 * @param {function} onSwiped Callback function when swipe has occurred. Will pass an event object as parameter with properties event.cardid (the card id), event.card (The jQuery object that contains the card dom element) and event.direction ('left' or 'right').
Tindercardsjs.render(cards, target, onSwiped)

How to use

  1. Make sure you have hammer.js und jQuery referenced
  2. Then, add tindercards.js from /lib
  3. Initialize like this:
var cards = [
  new Tindercardsjs.card(2, 'Geordi Laforge', 'I like big butts', 'gfx/pics/01.jpg'),
  new Tindercardsjs.card(1, 'Agro Picard', 'Hates Klingons, likes beer.', 'gfx/pics/02.jpg'),
  new Tindercardsjs.card(0, 'Jean-Luc, Worf & William', 'Swipe right if you also like funny hats like us :D', 'gfx/pics/03.jpg')

And pass them to Tindercards.js like this:

Tindercardsjs.render(cards, $('#main'), function (event) {
  console.log('Swiped ' + event.direction + ', cardid is ' + event.cardid + ' and target is:');

The stack will then be rendered to a HTML container that has id “main”. You can of course change that to some other name if you want.


The html container (in this case #main) should have either position:absolute or position:relative!

Download lib & example code

Grab it on GitHub

Experiment: An iPhone app built with Framework7, TypeScript, and AngularJS

Disclaimer: Since this post is getting quite some attention I have to state some things clear, so read this first!
This example is not best practice on how to use Framework7, it’s more of an experiment to see how it works with Angular and TypeScript. Framework7 has an own templating engine called Template7 so Angular is not mandatory. Also F7 designed to work with JavaScript, rather than TypeScript.
So, if you’re new to Framework7, do not assume that this example is the way you should create F7 apps! It was an experiment to see what happens if you combine these technologies. After all I can say that I wouldn’t use TypeScript with F7 again, just stick to plain old JavaScript. If you know how to use Angular, then you should be safe using it. If you don’t know Angular, then use Template7.

If you want to learn how to use Framework7 with AngularJS, go check out my video screencast tutorial!

In my last post I created a template for Framework7 based on TypeScript and Angular. Since Angular is still such a big hype and there doesn’t seem to be any examples of Framework7 with Angular, I decided to create a little demo application that demonstrates Angular’s data binding technique with TypeScript on top of Framework7. This demo will display lists of upcoming and current movies in theaters. Tapping on a movie will show additional information. The result looks like this:


Framework7 with Angular movie list demo


Check it out here:

Before you check the code, read this!

The demo code is based on this template for Framework 7. For some people this might look a little complicated since you will have to know how to use npm and grunt. So if you want a simpler version of the template without a compile process and just pure html, css and javascript, try this.

Code explanation

Let’s dive into the code. I’ll explain piece by piece what I did. At the bottom of this post you will find a link to Github where you can clone the repo and get the sources.

The view

To build this, I simply saved all movie data into a model “movies” and bound that with Angular expression to the view. In order to not repeat to many list item elements I used ng-repeat:

  <li class="ft-movielist-item" ng-repeat="movie in movies">
    <a href="#detailsPage" ng-click="events.onListItemClicked(movie)" class="item-link">
      <div class="item-content">
        <div class="item-media">
          <img class="ft-movielist-item-img" src="{{movie.posters.thumbnail}}">
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">{{movie.title}}</div>
          <div class="item-subtitle">{{movie.stars}}</div>
          <div class="item-text">{{movie.synopsis}}</div>

TypeScript model definition

Since TypeScript is well.. strictly typed we first need to define how our model looks like:

  export interface Movie{

Data binding

I bound an empty array of this type as a model via angular scope:

var movies:Movie[] = [];
$scope.movies = movies;

Get the data and update the model

To fill the model array with data, I start an ajax call and then copy the data from the json response into my model array:

var ajaxconfig:ng.IRequestConfig = {
  method: 'JSONP',
  url: (type == 'upcoming' ? this.API_URL_UPCOMINGLIST : this.API_URL_THEATERSLIST)
// Do ajax call to rotten api
  .success((data: Movies.AjaxResultData, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
    // Update angular model
    angular.copy(data.movies, this.movies);
  .error((data: Movies.AjaxResultData, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
    alert('Failed connecting to rotten tomatoes db. Status code ' + status);

And boom! That’s it. Angular will automatically display the data in the view. When ever you modify the model, Angular will sync this to HTML.

No jQuery. No DOM manipulation. Enjoy :-)

Full source code

Download on GitHub

Lessons learned

Angular will greatly help to reduce your amount of javascript code. TypeScript is cool because of strict typing and support of classes but it will make your code much much more complicated. The stuff that you saw here in this post is just a tiny small part of the whole thing which involves modules, type declarations, path references, compiler nagging and a lot more (check the full source to see the whole disaster). So at the end it eats up all the code that Angular has saved. Next time I use Angular I will stick with JavaScript and ditch TypeScript which could be interesting though for Node apps. I’ll try that next time maybe. Framework7 is still the best HTML-based iOS framework that I have ever seen. It’s super fast and perfectly mimics the look and feel of native apps. Make sure to check it out: