If you refresh or come back to a site often, it’s handy to have JQuery UI tabs remember which tab you were last on as you left. This simple script will handle that for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

jQuery(function($) {
    var index = 'qpsstats-active-tab';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    var oldIndex = 0;
    //  Start magic!
    try {
        // getter: Fetch previous value
        oldIndex = dataStore.getItem(index);
    } catch(e) {}
 
    $( "#tabs" ).tabs({        active: oldIndex,
        activate: function(event, ui) {
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            try {
                dataStore.setItem( index, newIndex );
            } catch(e) {}
        }
    });
});

No other code is necessary. Add your tab markup as you normally would (Remember to give it a matching ID):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="tabs">	<ul>
		<li><a href="#tabs-1">Tab 1</a></li>
		<li><a href="#tabs-2">Tab 2</a></li>
		<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
	<div id="tabs-1">
		first tab
	</div>
	<div id="tabs-2">
		second tab
	</div>
	<div id="tabs-3">
		third tab
	</div>
</div>

Demo

Read More »

Preface: These APIs are still quite new and subject to change. As of the time of writing, the following tutorial works in Chrome 18.0.1025.168. Firefox 12 supports full screen but not mouse lock.

I’ve been having a little play with some HTML5 features and worked up an example of Pointer Lock and Full Screen APIs. As it stands at the moment, pointer lock is tightly coupled with full screen, so you won’t be able to use it without first loading up full screen mode.

You’ll need to enable Enable Pointer Lock in about:flags in Chrome then restart the browser for mouse lock to work.

You may request full screen mode like so:

1
2
3
4
5
6

element.requestFullScreen =
	element.requestFullScreen    ||
	element.mozRequestFullScreen ||
	element.webkitRequestFullScreen;
 
element.requestFullScreen(element.ALLOW_KEYBOARD_INPUT);

Once in full screen mode, pointer lock should become available:

1
2
3
4
5
6
7
8
9

navigator.pointer = navigator.pointer || navigator.webkitPointer;
navigator.pointer.lock(element,
	function() {
		console.log('Pointer lock');
	},
	function() {
		console.log('No pointer lock');
	}
);

Note in the above two scripts, element is a DOM element

Check out the working demo here. I’ve also added some JS to determine the direction the locked pointer is travelling and output the data to the screen. View page source for details.

Read More »

Even though it hasn’t worked for quite some time now, my previous PHP WebSocket chat application has garnered quite a bit of attention and is still one of my most heavily trafficked posts. As a result I thought I’d provide you all with a working script as of Feb 15, 2012. Also, because I’m your typical lazy developer, I’ll be building on top of other peoples’ work – most notably PHPWebSocket.

You can download the final script here. According to the Wikipedia article on WebSockets, it should work in IE10+, Firefox 7+ and Chrome 14+. Personally I tested with Chrome 17.0.963.46 and Firefox 10.0.1.

I want to stress that this tutorial is designed to be extremely basic and as such does not give alot of functionality out of the box (but provides all the tools required to add more). It’s simply a working example of a PHP-based WebSocket server.

Read More »

If you’re reading this page (or my blog in general) it’s a pretty safe bet you already have Google+. If you’ve uploaded any photos to Google+ from Chrome or FF, you would also have noticed its snazzy HTML5 file uploader at work. This weekend I took it upon myself to whip up a quick and dirty version of that uploader and share its inner workings with the world.

Google+ Image Uploader

Here’s a short video of my uploader at work:

https://www.youtube.com/watch?v=AXx8cu6rxV4

Requirements:

• PHP4+
• HTML5-enabled browser (File API – including drag and drop, XHR2)
• Some images to upload

Disclaimer: Currently only Firefox and Webkit based browsers meet the requirements above. Opera supports the File API and probably XHR2 (I haven’t tested), however it doesn’t have drag and drop so this tutorial won’t work with it. If you’re curious about whether or not IE will work with this tutorial, I’m already laughing at you.

Download the finished script here.

Read More »

I’m currently working on a mobile version of an existing website utilizing the Responsive Web Design paradigm. One problem I instantly came across was a perplexing page width issue on Android. Even with a blank, HTML5 webpage, the page width was appearing at almost twice the width of my phones native resolution (and 2.5x that of my browsers width). For the record, I’m using Android 2.3.3 vanilla with the default browser on a Nexus One.

Firstly an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' />
<script type='text/javascript'>
	$(document).ready(function() {
		document.body.innerHTML = $(window).width();
	});
</script>
</head>
<body>
</body>
</html>

The above code gives a blank, HTML5 webpage that will display the pages width on load. When loaded, it would print ‘800’ on the screen – indicating the page was set to an 800px width. This was clearly wrong.

I quickly noticed that using the following doctype:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

gave me the width I was expecting – 320px. Obviously this isn’t an acceptable solution for responsive web design and so another was needed. Meet viewports. With the addition of a simple META tag I was able to fix the issue (albeit losing the ability to zoom in the process). Simply add the following to your HEAD tag and you should be good to go:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

With this line added, my page now prints 320 to the screen as it should.

For more information, please see this StackOverflow post on the issue.

Read More »

Here’s another little gem for you HTML5 fans out there – link prefetching. Adding the following into a HTML meta or link tag will result in the target being loaded in the background after your current page.

<link rel="prefetch" href="/images/big.jpeg">
or
<link rel="next" href="2.html">
or
<meta http-equiv="Link" content="/images/big.jpeg" rel=prefetch">

Both ‘prefetch’ and ‘next’ are accepted.

Here are a few advantages of using this method:

• It’s HTML compliant
• It’ll dramatically speed up the resulting page/file if successfully prefetched
• It doesn’t slow current page load
• No same-origin restriction – any domain is accepted

There are several limitations to this method that should be noted:

• Firefox only (for now)
• Only HTTP protocol is accepted
• No URLs with querystrings accepted

To learn more about link prefetching check out the Link Prefetching FAQ at Mozilla Developer Center

Read More »

Let me preface this post by stating that I have the design talent of the average developer – that is to say: none. So when I decided to start learning about CSS3 @font-face I thought I was going to be in for a night of pain; boy was I right.

The post headings on site are rendered in the Museo font using Cufon. Cufon is an amazing piece of JavaScript that allows you to embed fonts into webpages making them visible in all browsers. It works as advertised, however it has a habit of causing pains for visitors on slower connections. For this site, the cufon script is 17.8KB and Museo font package is an added 190.4KB – a hefty download. At this point, the developer in me would declare the benefits not to be worth the drawbacks and scrap it all together. Luckily for all of you though, I’m constantly surrounded by talented designers, namely That Stevens Guy and begrudgingly blindly follow what they tell me to do in that department. So cufon has stayed. Is there a better solution though? Meet @font-face.

Read More »

Recently while randomly browsing I came across a method of displaying multiple tabs using only HTML and CSS (see here for the explanation or here for an amazing demo). This presented an interesting concept – tabs with no JavaScript. There are quite a few drawbacks but in the right conditions this could be a good addition to your site.

Read More »

UPDATE 15 Feb 2012: This post is woefully out of date. See my new PHP WebSocket Chat Application 2.0 post for a working tutorial compatible with the latest WebSocket spec as of Feb 15, 2012.

Today I’ll be doing an in-depth tutorial on how to create a simple, real-time chat application with HTML5 web sockets.

Disclaimer: Due to the relative infancy of web socket technology, this tutorial will currently only work on Google Chrome and the spec isn’t finalized yet so it may break in the future (specifically during the handshake phase).

UPDATE Nov 14, 2010: Since the writing of this post, the handshake spec has changed in such a way that browsers requiring the new spec will return the error code INVALID_STATE_ERR upon connection. I checked the PHPWebSocket page for an updated version but it looks like the developer hasn’t released one yet so instead I now recommend using Bohuco’s excellent websocket script instead.

Read More »