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

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.

Demo

Check out the demo here.

Download

Grab the plugin on Github if you like.

Screenshot

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 wait 1-2 seconds and then scroll down.

The solution

So, here is the magic fix for you:

var $scroller = $(".page-content");
  $scroller.bind('touchstart', function (ev) {
    var $this = $(this);
    var scroller = $scroller.get(0);
 
    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = scroller.scrollTop;
    var scrollHeight = scroller.scrollHeight;
    var offsetHeight = scroller.offsetHeight;
    var 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
toast.show(true);

or

// hide
toast.show(false);

You’re done 😀

Download on Github

Grab is here: https://github.com/valnub/Toast-for-Framework7

MIT License

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

Tindercards.js

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: https://youtu.be/LqZ3wqvvZwE

Screenshot

Tindercards.js demo screenshot

Live Demo

Works best on iPhone: http://www.timo-ernst.net/misc/tindercardsjsdemo/

Dependencides

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:');
  console.log(event.card);
});

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.

Important

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

Download lib & example code

Grab it on GitHub