CSS3HTML5

As the use of HTML5 continues to become more common, you may be looking for resources to help you learn more about it. In this post we have gathered a number of resources that teach various aspects of HTML5, including tutorials, explanations and guides. With the help of these resources you should be able to learn more (or just brush up on your knowledge) about the specific aspects of HTML5 that are of interest to most designers and developers.

Getting Started with HTML5:

Introduction to HTML5

Periodic Table of Elements

10 Major Advantages of HTML5

HTML5 Canvas Cheat Sheet

HTML5 Visual Cheat Sheet

28 HTML5 Features, Tips, and Techniques You Must Know

• An Introduction to HTML5
• Dive Into HTML5
• HTML5 Differences from HTML4
• HTML5: The Facts and the Myths
• Structural Tags in HTML5
• HTML5 Element Index
• HTML5 Tag Reference
• HTML5 Reset Stylesheet
• HTML5 Tutorial – Getting Started
• Avoiding Common HTML5 Mistakes
• HTML5 Features You Should be Using Right Now
• Yes, You Can Use HTML5 Today!

Specific HTML5 Elements:

• The Header Element
• The Footer Element
• The Nav Element
• The Section Element
• The Article Element
• The Canvas Element
• Canvas from Scratch
• The Video Element
• The Audio Element
• HTML5 Form Elements
• New HTML5 Form Features
• When Can I Use…?

Audio and Video on HTML5:

HTML5 Audio and Video: What You Must Know

Synching Content with HTML5 Video

• Video + Canvas = Magic
• Audio and Video in HTML5
• Fallback Options in HTML5 Audio and Video Tags

Website Build Tutorials:

Coding an HTML5 Layout from Scratch

Buidling Web Pages with HTML5

Design and Code a Cool iPhone App Website in HTML5

Code a Vibrant Professional Web Design in HTML5/CSS3

Creating a Minimal Blog Design Using HTML5, CSS3, and jQuery

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

How to Code a Clean Website Template in HTML5 and CSS3

Easily Coding a Jeweler’s Website to HTML5 and CSS3 from a PSD

Simple Website Layout Tutorial Using HTML5 and CSS3

Other HTML5 Tutorials:

Building Persistent Sticky Notes with Local Storage

Tooltips Courtesy of HTML5 Data Attributes

Bring Your Forms Up to Date with CSS3 and HTML5 Validation

Building a Custom HTML5 Video Player with CSS3 and jQuery

How to Make an HTML5 iPhone App

• Drag and Drop – Overview
• Getting Offline Access with HTML5 Application Cache
• Building a Live News Blogging System in PHP Spiced with HTML5, CSs3, and jQuery
• Create Offline Web Applications on Mobile Devices with HTML5

Published March 12th, 2012 by Steven Snell

Hiding the iPhone Address Bar

Most mobile browsers, including the iPhone, implement a dynamic chrome hide that provides a valuable increase in content rendering area on small screens.

Many websites employ a JavaScript scrolling trick which triggers this process.

The hide occurs as soon as the scroll is executed, which itself is often delayed by a timeout to ensure a successful hide.

Without checks, this can be annoying. If we have scrolled manually the page still jumps back to the top :-/

This problem is especially prevalent on slower mobile device connections, the very devices upon which the trick is used.

The objective here is to implement an auto-scroll that doesn’t annoy the user at all.

The Solution

First, unsupported scenarios are excluded:

• Large screens. Laptop and desktop PC browsers.
• Viewports with inset scrollbars.
• Standalone (fullscreen web app) mode.
• A ‘short’ page, not tall enough to scroll.

We abort if space saving measures that are normally coupled with chrome hiding are not employed and if the screen is large enough that fixed chrome is standard.

Next, scenarios where the scroll would be annoying or unlikely to do anything useful are excluded:

• A viewport scale that is not 1:1. Scroll jump is more noticeable.
• Existing scroll from the user or browser scroll history.
• Slow page load. Address bar auto-hide at this point is distracting.

The following code demonstrates this decision making process.

// Hide address bar on devices like the iPhone
//---------------------------------------------
function hideAddressBar(bPad) {
// Big screen. Fixed chrome likely.
if(screen.width > 980 || screen.height > 980) return;

// Standalone (full screen webapp) mode
if(window.navigator.standalone === true) return;

// Page zoom or vertical scrollbars
if(window.innerWidth !== document.documentElement.clientWidth) {
// Sometimes one pixel too much. Compensate.
if((window.innerWidth - 1) !== document.documentElement.clientWidth) return;

}

setTimeout(function() {
// Already scrolled?
if(window.pageYOffset !== 0) return;

// Perform autoscroll
window.scrollTo(0, 1);

// Reset body height and scroll
if(bodyTag !== undefined) bodyTag.style.height = window.innerHeight + 'px';
window.scrollTo(0, 0);

}, 1000);

}

In situations where the page is not tall enough to support a 1px scroll the script offers an automatic padding solution.

// Check that the current page can be scrolled first. Pad content if necessary.
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
// Extend body height to overflow and cause scrolling
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; // Viewport height at fullscreen

}

The vertical page scroll is reset to zero after the hide. This means that single pixel highlights on elements that are at the top of the page are not lost.

If previously modified, the body height is also reset to exactly the window innerHeight.

Quick Fix

Even if we don’t go to all the above trouble it is much better to increment the scroll position instead of setting it to 1. This basic change would minimise the jump.

// Quick address bar hide on devices like the iPhone
//---------------------------------------------------
function quickHideAddressBar() {
setTimeout(function() {
if(window.pageYOffset !== 0) return;
window.scrollTo(0, window.pageYOffset + 1);

}, 1000);

}

Source Code

You can reconstruct the idea from the given source or view the example source here.

Comments

Comments, suggestions or feedback via Optic Swerve on Twitter please.

This article started with a simple question. How do I get the current viewport scale in a website or web app?

While focused on the iPhone/iPad, the following JavaScript solution is as generic as possible and provides access to the current viewport scale if available.

Demo

Try a pinch-to-zoom, assuming you are on a supported device. The values below will reflect the current scale within the parameters of this page’s viewport settings.

The current viewport settings are:

<meta name="viewport" content="maximum-scale=1.6, minimum-scale=0.25" />

Note, minimum-scale does not necessarily match how far the page will zoom out. On the iPhone the page will zoom out to fill the screen and no further.

Technique

The method takes advantage of window.innerWidth variation in relation to page scale.

We assume that a browser supporting full viewport scaling also takes the modern superimposed scrollbar approach.

This assumption allows us to implement a check on screen width vs. viewport width since superimposed scrollbars do not steal space otherwise occupied by the viewport.

Once the check has been passed the calculation is a very simple one. First we need the orientation corrected screen width.

The viewport scale can now be calculated. Browsers that don’t use a viewport magnification system deliberately return ‘undefined’ when scale is queried. This includes most desktop browsers.

// Get current scale
//-------------------
this.getScale = function() {
// Get viewport width
var viewportWidth = document.documentElement.clientWidth;

// Abort. Screen width is greater than the viewport width (not fullscreen).
if(screen.width > viewportWidth) {
console.log('Aborted viewport scale measurement. Screen width > viewport width');
this.viewportScale = undefined;
return;

}

// Get the orientation corrected screen width
this.updateOrientation();
this.screenWidth = screen.width;

if(this.orientation === 'portrait') {
// Take smaller of the two dimensions
if(screen.width > screen.height) this.screenWidth = screen.height;

}
else {
// Take larger of the two dimensions
if(screen.width < screen.height) this.screenWidth = screen.height;

}

// Calculate viewport scale
var pageScale = viewportWidth / window.innerWidth;
var scaleRatio = viewportWidth / this.screenWidth;
this.viewportScale = pageScale / scaleRatio;
return this.viewportScale;

};

The code allows for an immediate scale query at any point. If monitoring it like this page you will need to keep track of pinch-to-zoom, double tap (if really keen, not implemented here) and orientation change.

The iPhone’s elastic scaling animation affects viewport scale measurement. A delay was built in to ensure that the viewport bounce has settled.

// Update
//--------
this.update = function(callback) {
// Clear timeout if already set
if(this.timeout !== undefined) {
clearTimeout(this.timeout);
this.timeout = undefined;

}

if(this.delay > 0) {
// Delay compensates for viewport bounce
var viewScale = this;

this.timeout = setTimeout(function() {
viewScale.getScale();
if(callback !== undefined) callback();

}, this.delay);

}
else {
// Immediate scale update
this.getScale();
if(callback !== undefined) callback();

}

};

Usage

FlameViewportScale.getScale() gets the current viewport scale.

var viewScale = new FlameViewportScale();
var currentScale = viewScale.getScale();

You can also supply a callback function to FlameViewportScale.update() to be called once the viewport scale has been recorded after a short delay that ensures a settled viewport.

viewScale.update(function() { alert('Scale measure complete'); });

Support

This code has been tested on iPhone and iPad and works correctly.

It should work on most other modern, standards compliant mobile/tablet web browsers as well. I have not tested this and I’d be interested in other people’s experiences, let me know on Twitter.

The interesting cross-over will be fullscreen browsers like Safari on OS X Lion with superimposed, non-intrusive scrollbars at maximum screen width.

Source Code

Available here.

Comments

Comments, suggestions or feedback via Optic Swerve on Twitter please.