jakearchibald

<link rel="stylesheet" href="anothersheet.css" type="text/css" charset="utf-8">
<style type="text/css" media="screen">
	@font-face {
		/* etc */
	}
</style>
<!--
	The above causes rendering to block in IE6-8 until the external font has downloaded.
	
	So, to avoid blocking in IE:

jakearchibald

<style>
	@font-face {
		font-family: 'foo';
		/* this font only contains the glyphs 'f' & 'o' */
	}
	@font-face {
		font-family: 'bar';
		/* this font only contains the glyphs 'b', 'a' & 'r' */
	}
	.test {

jakearchibald

// I dislike the pattern of using string action names instead
// of creating instances and having instance methods...
var videoPlayerElement = $('#playerContainer').videoPlayer({
	loop: true
}).videoPlayer('setSrc', 'whatever.mp4').videoPlayer('play');

// and later...
videoPlayerElement.videoPlayer('stop');

jakearchibald

<div style="overflow:scroll" id="scrollableElement">
	<div>This item is in view</div>
	<div id="itemToScrollTo" tabindex="-1">This item is out of view</div>
</div>

<!--
	document.getElementById('itemToScrollTo').scrollIntoView();
	
	The above will scroll not only scrollableElement, but also the viewport. It
	will scroll both elements as much as it can to attempt to bring itemToScrollTo

jakearchibald

var images = glow.dom.get('#imagesToCycle img'),
	currentImage = 0;

images.css({ // give all the images a z-index of 1
	position: 'absolute',
	'z-index': '1'
}).slice(0, 1).css('z-index', '2'); // give the image we want to be on top a z-index of 2

function showNextImage() {
	currentImage++;

jakearchibald

/* Loading Glow */

	// Old
	gloader.load(['glow', '1', 'glow.dom', 'glow.events', 'glow.anim'], {
		async: true,
		onLoad: function(glow) {
			glow.ready(function() {
				// glow loaded & dom ready
			});
		}

jakearchibald

// this code doesn't work as expected in firebug, due to the way it eval's code
// (showing that http://www.slideshare.net/douglascrockford/crockford-on-javascript-act-iii-function-the-ultimate/9 isn't quite true)

foo(); // hello

function foo() {
	alert('hello');
}

bar(); // error 'bar is not a function'

jakearchibald

// image this is part of a "Menu"
Menu.prototype.load = function() {
	var menu = this;
	
	glow.net.get(menu.path, {
		onLoad: function(response) {
			menu.field = response.json().field;
		}
	});
};

jakearchibald

// I'm going to assume this happens in sync, just to keep things simple

Glow(2.0).ready(function(glow) {
	function MyApp() {}
	glow.util.extend(MyApp, glow.events.Target);
	
	window.myApp = new MyApp;
})

Glow(2.1).ready(function(glow) {

jakearchibald

function loadScript(url, callback) {
	var script = document.createElement('script'),
		head = document.getElementsByTagName('head')[0];
	
	// two methods for detecting when scripts have loaded
	script.onreadystatechange = function () {
		if (script.readyState == 'loaded' || script.readyState == 'complete') {
			callback();
		}
	}