How to make sure your og:image is used by Facebook

You can define custom meta tags on your website to decide it will appear when shared on Facebook. One of them is the og:image tag. Unfortunately, it does not work reliably, and even their Open Graph debugger won’t help you. For instance, I got the following message: og:image should be larger: Provided og:image is not […]

How to throttle scroll events in AngularJS

If you watch the scroll event, you will probably find yourself handling far more events than you need. The scroll event fires really quickly, and that can be a problem on mobile devices. The following Angular directive will call a specified scroll event every 250 milliseconds. angular.module(‘hereApp.directive’).directive(‘onScroll’, function($timeout) { ‘use strict’; return { scope: { […] does not work on iOS

The recommended method to give a text field focus and select its contents is the following: document.getElementById(‘myInput’).select(); However, this does not work in iOS. The correct way to do it is to use setSelectionRange on an already focused input. var input = document.getElementById(‘myInput’); input.focus(); input.setSelectionRange(0,99999); setSelectionRange will not work on iOS if the element doesn’t […]

How to use the HTML5 full screen API (with examples)

The new HTML5 fullscreen API allows you to build full screen web applications very easily. Before we get started, there are a few things you need to know: Only user events (click, keyup etc.) can trigger full screen mode. This prevents pop up ads from going full screen. The API is supported by IE9+, Chrome […]

Mobile web design: how to disable zooming on your mobile sites

When you are making a mobile website, you might want to disable sideways scrolling and zooming. Although I wouldn’t personally recommend disabling zooming, it’s easily done. In your head tag, insert the following meta tag: <meta content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′ name=’viewport’ /> This tag is recognized by all major browsers, including Chrome on Android and […]