While working on a Facebook app that uses web fonts through an @font-face declaration created with Font Squirrel, I noticed a bizarre bug in IE8 in which all the text in the parent frame (ie Facebook) takes on one of the custom fonts supported with an EOT file. Despite the fact that it’s rather amusing to see all of Facebook rendered in a fancy display font, it would be very wrong and shocking for a user to see this.

Searching for a workaround, I came across a few different posts that helped me understand the issue better, but didn’t quite work in the context of a Facebook app.

The heart of the issue is this: the parent frame will take on the EOT font when that EOT loads for the iframe, if the parent frame has not already finished loading at the time.

The solution needs to be this: load the EOT for the font after the parent frame has finished loading.

To do this, we need to perform a little bit of javascript trickery (I’m using jQuery and Facebook Javascript SDK here).

1. Remove any EOT fonts from the CSS properties for all elements in your (iframed) page, but keep the @font-face declaration in your CSS file. Create a unique class for each EOT font. For example:

   @font-face {
font-family: 'CairoRegular';
src: url('cairo-webfont.eot');
src: url('cairo-webfont.eot?#iefix') format('embedded-opentype'),
url('cairo-webfont.woff') format('woff'),
url('cairo-webfont.ttf') format('truetype'),
url('cairo-webfont.svg#CairoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

   .CairoRegular {
font-family: 'CairoRegular';
}

2. Next, create a function that adds this class to the elements that need it:

   function addfonts(){
$("#header h1,#content h3,#content h6,.cssbutton").addClass("CairoRegular");
$("#header h4,#header h2,#header h3").addClass("BallparkWeiner");
}

3. And finally, add the FB.Canvas.getPageInfo() function somewhere after your FB.init function and put your font function inside the callback:

   FB.Canvas.getPageInfo(function() {
addfonts();
});

   The getPageInfo() function was the closest thing I could find to a listener for the parent page load completion. If you can find something better, by all means use that.

Just a quick heads up for anyone out there who is confounded by the existence of disabled scrollbars on their Facebook app canvas page. In your application’s advanced settings, checking Canvas Height: Fluid will add scrolling=”yes” to the iframe code, so select Settable to get rid of the scrollbars.

We all know the story about Flash and the iPhone, but with Android phones there is no such obstacle. So with the help of Paul Trani’s tutorial on Lynda.com, I was able to convert my Cupcake Invaders Flash game into an Adobe AIR application for Android.

The key steps in the conversion:

1. Instead of walking the character on an arrow button hover or arrow keydown, I used the accelerometer’s horizontal acceleration. Thus when the player tilts the device to the left or right, the character walks in that direction.
2. I converted most of the graphics from Flash vector drawings into PNGs. While a PC has the processor power to scale and move vector graphics quickly, phone processors are less beefy and have an easier time with bitmap graphics.
3. I downloaded the Adobe AIR SDK to compile the APK file and then downloaded the Android SDK to push the file to my DroidX for testing.

I haven’t published to the Android Market yet, but you can download and install the Cupcake Invaders app here.

Recently I was doing the front-end dev for a dynamically generated page that needed to have a large number of popups. I found the following script to help me enable the dialogs in a way that would be easy to integrate with dynamically generated code.

The original script

My version:

$(function() {
    var options = {
		autoOpen: false,
		resizable: false,
		width: 462,
		height: 373,
		open: function() {
    		$(this).dialog("widget").find(".ui-dialog-titlebar").hide();
		}
    };
    var n = 1;
    $(".popup").each(function(i) {
        var dlg = $('#popup-' + n).dialog(options);
        $('.opener-' + n).click(function() {
            dlg.dialog("open");
            return false;
        });
        $('#closer-' + n).click(function() {
            dlg.dialog("close");
            return false;
        });
        n++;
    });
});

What I changed:

• In the options I added a function on open to remove the title bar.
• I used the a class on the dialog div instead of the opener link to run the each loop, because there would be multiple opener links for each dialog.
• I added a close function on a closer button.

I recently had the pleasure of using the blank WordPress theme Roots for the first time. I was pleased with the experience, but I do have a few suggestions for how the theme could be improved:

Adjusting the nav bar width: Roots supports 960.gs, the grid-based CSS layout framework. For the most part this works quite well, with all elements adjusting to any width of box that you choose to put them in… except the main nav. The nav UL is set at 100% wide, so it renders at 960px. However, if you have left the right and left gutters out of your design, you’ll want a nav of 940px wide, which is achieved with the class .grid_12. However, since the nav UL is set to 100% and its parent nav#nav-main is not, you won’t get the nav bar down to 940px until you put a width of 100% on nav#nav-main as well.

Utility nav alignment: The utility nav (nav#nav-utility) has absolute positioning (top:0;right:0), but when its parent has a right margin, this does not affect the position of nav#nav-utility. Therefore you have to add the same width of the margin to the right value in the #nav-utility declaration (e.g. right:10px).

Height and width on logo image: The logo img tag has height and width values, which is generally not best practices. Very few logos will actually be those dimensions — 300×75, so if a developer forgets to delete the values in the HTML, the image will be distorted.

After a couple of Google-praising posts, it’s only fair to point out one Google Product that doesn’t work well. When typing in the new “Google Instant” search field, I kept feeling like I was mistyping words or that my keyboard was getting sticky. But on closer inspection I realized that the fault lies with Google, not my keyboard or fat fingers.

As a member of the Instant-Messaging Generation, I do indeed type at lightning speed, which means that Google is returning it’s instant results at thunder speed. Or something like that. Now I just use my Firefox search bar. It was a nice thought to try to provide me with search results before I hit enter, but it’s not worth making me feel like I can’t type. #1 rule of usability: don’t make the user feel stupid.

Just a quick post to say thanks to the Gmail team for preventing me from sending yet another embarrassing “forgot the attachment” email. I tried to send and got an alert telling me that my content had “see attached image” in it, but the email had no attachment. Whoops.

After two weeks of hard and happy work, I’ve launched this revamped portfolio site and blog. Take a look around and let me know what you think. I can always use feedback!

While building my revamped portfolio, I was happy to discover the new wp_nav_menu function in WordPress. You can drag and drop pages and categories to create any order and hierarchy you please. However, there is one drawback. When you’ve made a category a child item of a page, for example…

• Portfolio (page)
  • Web (category)
  • Animation (category)
  • Graphics (category)

The parent (Portfolio) will not have the current-menu-ancestor class (or any current-related class) even though its child (Web) has the current-menu-parent class. Therefore whatever CSS you’ve used to highlight your active menu items will not be applied.

A Google search uncovered fellow developers who were having the same problem, but no solutions. So I came up with one of my own, using Javascript (see below). While editing the PHP code of the wp_nav_menu function itself (in nav-menu-template.php) would have been a cleaner solution, the Javascript hack was quicker and just as effective.

If you’re having the issue I’ve described above, go ahead and create a .js file with the following code and reference it in your header.php file.

function findAncestor(){
	var currentParentLi = document.getElementsByClassName("current-menu-parent");
	if(currentParentLi){
		var currentAncestorLi = currentParentLi[0].parentNode.parentNode;
		if(currentAncestorLi && currentAncestorLi.tagName=="LI"){
			currentAncestorLi.className += " current-menu-ancestor";
		}
	}
}
function addEvent(obj, evType, fn){
	if (obj.addEventListener){
		obj.addEventListener(evType, fn, false);
		return true;
	} else if (obj.attachEvent){
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} else {
		return false;
	}
}
addEvent(window, 'load', findAncestor);

Kudos to the UI team at Google for making some vast improvements to the design of Google Image Search.

Some new and awesome features:

• Results page: image info pops up only on hover, reducing distractions as the user scans and compares the set of images
• Results page: image expands on hover, helping user decide whether or not to click-thru to full-size
• Results page: filter by color theme, very helpful for visual-types like yours truly
• Image drill-down page: full-size image is immediately displayed in modal, eliminating the need for an extra click or scrolling