MonthJuly 2012

Dynamic Link Tag Injection

Using jquery to inject a style sheet seems to break IE7/8. The scenario was when a user passed in a custom param via the URL the code would inject that particular css. Ideally I should have gone with the native javascript way to create the element since it’s still clean and simple. This may not be an issue, but for my particular scenario it was the case.

jQuery version:


$('head').append($('<link rel="stylesheet" type="text/css" />')
         .attr('href', 'http://www.somedomain.com/css/cool.css'));

Native version:


var link = document.createElement('link');
    link.href = 'http://www.somedomain.com/css/cool.css';
    link.rel = 'stylesheet';
    link.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(link);

A List of HTML5 Features for the Mobile Web

This will be an on going list of HTML5 features that can be used on the mobile web today!.

Meta Tags

Note: some of these are iPhone specific, but it wont break your page on Android or Windows devices.


// This disabled pinch/zoom (works in all devices)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

// This meta tag makes your web app fullscreen when you have saved it to your home screen (iOS only)
<meta name="apple-mobile-web-app-capable" content="yes">

// This just makes the status bar a different color. I have it set to black here. (iOS only)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

// This tag adds homes screen icon. (iOS only)
<link rel="apple-touch-startup-image" href="icon.png" />

// This tag adds is used to add a launch screen before your app is fully loaded. (iOS only)
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon.png" />

More information about some of the iOS specific ones can be viewed here.

Storage

There is a good article over at HTML5 Rocks that better covers this area.

Events

There are several good javascript library’s that handle touch events. Below is a few of them.

  • Zepto.js – Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
  • Quojs – Micro javascript library that simplifies your mobile projects.

A Simple Backbone.js View

This is our html which includes a template within script tags.

This is our backbone code.

View this example on JSFilddle

© 2017 Aldo Lugo

Theme by Anders NorenUp ↑