Vector Browser Components

I’ve updated this template on my original post, here, to include additional form elements (radio buttons, checkboxes, form and combo box fields) as well as the original vector scrollbars to make it easier to mock-up UIs in Adobe Illustrator.

Download the .AI/.EPS/.PDF (Zip)

Window Focus and Blur

In working on the new Pantone Moods this week, I needed to add a listener to the widget to halt the realtime updates if a user no longer had the page active (meaning, they switched to another browser tab or application) to prevent unnecessary traffic to the server.

The application cycles through the ten most recent Moods posts and, upon nearing the end of its cache, queried the server for a new supply. However, if someone’s focus wasn’t on the page, it makes no sense to keep collecting and displaying results.

With ActionScript 3, this task is quite easy:

stage.addEventListener(Event.DEACTIVATE, onDeactivate);
stage.addEventListener(Event.ACTIVATE, onActivate);

And it’s just as easy when programming for Mobile Applications:

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate);

With JQuery, we can now accomplish the same thing for AJAX/PHP browser applications to no longer commit resources to updating a page that isn’t being viewed:

$(function(){
	$(window).bind('blur', function(){
		onDeactivate();
	});
 
	$(window).bind('focus', function(){
		onActivate();
	});
	// IE EVENTS
	$(document).bind('focusout', function(){
		onDeactivate();
	});
	$(document).bind('focusin', function(){
		onActivate();
	});
});

Note that the second two methods must be added because Internet Explorer uses focusin/focusout rather than simply focus/blur.

Vector Scrollbars

I consistently needed a standard vector scrollbar for the browser in UI/UX mock-ups in Adobe Illustrator as I got tired of creating screenshots and tweaking lengths in Photoshop. If you do, too, grab this zip. It includes the CS4 .AI, .EPS and .PDF version of both the horizontal and vertical scrollbar. You’re welcome. I’m also thinking that someday it might be beneficial to create a vector version of the mouse hand and arrow, though I’m debating whether I should keep the stair-stepping of pixelation at that size, and how best to handle the drop shadows. If anyone has a suggestion, let me know what you think.

What is Google Chrome OS?

Telling the story of Google Chrome and how it inspired an operating system. Produced by Epipheo Studios.

BTW, I have Google Wave Preview and about a 1/2 dozen colleagues on it, yet, I still haven’t manage to catch someone online to play around with it. Will you add me so I can test with you?

Flash Plug-in Detection and Upgrading

Incorporating the SWFObject ExpressInstall to force Plug-in Installation

In our previous article (Activating an ActiveX Control’s Interface through Javascript), we recommended circumventing the Microsoft Internet Explorer update that forces users to activate media items with Geoff Stearns’s SWFObject. As a result, a number of emails flooded into era//404 with questions on browser detection to drive users to upgrade their Flash Plug-In.

External Link: This article is hosted on my company site, era404.com, and will open in a new window:
Click here for article…