/mike

The talk around town is that a couple boys, in some podunk town, wrote some Javascript code that has given them more hits in the last couple days then they could have imagined. Not sure it’s all that fancy though, it still uses tables and that just won’t do.

Even with my busy schedule, I took it upon myself to help these fellows out. There’s no reason that we should be using tables for layout anymore. IE6 is a piece of crap. We all know this. Firefox 3 is getting better — or is the best in some regards, depending who you talk to — and Safari/Webkit is pretty kick ass. So why don’t we pander to the better browsers and give the rest whatever they can handle?

Enter FancyZoom, but edgier. Ok, so the tagline/name is pretty lame but whatever, I’m not a copywriter.

What’s the difference?

The biggest difference is that it uses -border-radius and box-shadow, in the browsers that support them. No more transparent PNGs and tables. The code’s slightly leaner with two divs instead of a whole table.

Don’t fret young padawans, the old way is still there for those that want to use it. In fact, the old way is the default until people start getting a little bolder in their effort to move forward. In order to see the new hotness, you’ll need to add edgy:true as an option to the first new FancyZoom call.

For example:
Prototype:
$$("div.photo a").each(function(el) { new FancyZoom(el, {edgy:true}); }) or new FancyZoom('medium_box_link', {width:300, height:200, edgy:true});.

jQuery:
$('div.photo a').fancyZoom({scaleImage:true, closeOnClick:true, edgy:true}); or $('#medium_box_link').fancyZoom({edgy:true});

Caveats

Keep in mind, when using prototype, the edgy option has to be set in the first FancyZoom call, otherwise you’ll get the old, transparent PNG version. Also remember that once edgy is set, it’s set for all FancyZoom calls on that page.

Why? Because the code for the zoomed box is only inserted once into the HTML document. It’s not inserted on the fly or for each instance of the class. This was probably done by design but adding this edgy option might change that. We’ll see.

When using the jQuery version, edgy has to be set in each call.

Check out the example I ripped made for you.

While I was mulling through my feeds tonight I saw a link to Dave Shea’s CSS Sprites2 article on A List Apart. To be honest, I haven’t actually read it — though I will soon, promise — but seeing the examples put a bug in my brain. Maybe those effects could be done with CSS3 transitions/animations.

So, I threw together a quick little navigation list and went to work putting some basic styles on it — nothing nearly as fancy as Dave did. What I wanted to do is use -webkit-gradient for a background color, then use -webkit-transition to fade or slide in a different color or background.

Unfortunately this version of the test failed. It would seem that there is no way to transition a -webkit-gradient using -webkit-transition. If I’m wrong, please let me know.

Here’s what I did find out:

• background: -webkit-gradient(...); won’t transition to another background: -webkit-gradient(...); (using -webkit-transition: background 0.3s linear;)
• You can transition an element from -webkit-gradient to a background-color (using -webkit-transition: background-color 0.3s linear;)
• You cannot transition an element from background-color to background: -webkit-gradient; (using either -webkit-transition: background 0.3s linear; or -webkit-transition: background-color 0.3s linear;)
• Transitioning multiple properties — at least in this case — background-color and color the long hand of -webkit-transition needs to be used (-webkit-transition-property: background-color, color; -webkit-transition-duration: 0.3s, 0.3s; -webkit-transition-timing-function: linear, linear;)

Check it out for yourself using this code:

<style type="text/css" media="screen">
ul#nav { float: left; list-style: none outside; width: 100%; }
ul#nav li { border-right: 1px solid; float: left; width: 24.75%; }
ul#nav li.last { border: none; }
ul#nav li a {
	/* background-color: #08c; */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,50,100,0.6)), to(rgba(40,70,150,0.6)), color-stop(0.5,rgba(30,60,125,0.6)));
	color: #000;
	display: block;
	line-height: 2;
	text-align: center;
	width: 100%;
}
ul#nav li a:hover {
	background-color: #c80;
	/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(40,70,150,1)), to(rgba(20,50,100,1)), color-stop(0.5,rgba(30,60,125,1))); */
	color: #fff;
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.7s, 0.3s;
	-webkit-transition-timing-function: linear;
}
</style>
<ul id="nav">
	<li id="home"><a href="#">Home</a></li>
	<li id="mac"><a href="#">Mac</a></li>
	<li id="iphone"><a href="#">iPhone</a></li>
	<li id="itunes" class="last"><a href="#">iTunes</a></li>
</ul>

What it looks like (best viewed in the latest version of Webkit or Safari):

• Home
• Projects
• Blog
• Misc

Today I wanted to spruce up a site design with a nicer typeface. I also wanted to stay away from image replacement techniques and sIFR, which makes the job that much harder. Obviously the major problem is what typeface can I use that will be constant on both Windows and Mac — the majority audience is on Windows so I can’t even make a case for degradation or alternates. The solution, Myriad Pro.

Myriad Pro, created and licensed by Adobe, has been on default Mac OS installs for years. After some searching around the internets — read: Wikipedia — I found that Myriad Pro has been bundled with Adobe Reader since version 7. Perfect right? No. Not perfect at all.

After installing Adobe Reader on my vanilla Windows Vista test system, I was still unable to view Myriad Pro on a web page by using the following CSS declaration:

#container h2 { font-family: "Myriad", "Myriad Pro", "MyriadPro", "MyriadPro-Regular", sans-serif; }

Adding in other variations of the name didn’t help. Both Firefox and Internet Explorer would only show the default sans-serif typeface for the headline. I searched for a solution on Google. I even searched for a solution on Live Search. I pinged a few friends. Nobody seemed to have an answer, it should just work.

So I twittered this. Unfortunately there were no new ideas. Needless to say, this frustrated and confused me even more.

I found it weird that Adobe put the Myriad typeface into a different location than the rest of the system fonts but didn’t know how to deduce if that was the problem. Adobe installs Myriad Pro into: Z:\Library\Fonts. As I later found out, this is the problem.

It turns out that software developers can install fonts almost wherever they want, to allow the font to be used by the software being installed. The problem is, the rest of the system cannot access that font, unless it’s put into C:\Windows\Fonts. GAAAHH!!

Seriously Adobe?! Just make the damn font available to the rest of the system. What have you got to lose? Oh darn, people will have more choices for web typography? Heavens to merkatroids, that would be catastrophic wouldn’t it.

Adobe, you suck. Still.

Yet another shameless promotion from me, huzzah! Today I released the long overdue update to my Random Category with Random Posts plugin. It is fully compatible with Wordpress 2.3+ and is completely broken with anything prior to it.

Check out the plugin. Read the rest of this entry »

Yes, you read that title correctly, I actually sat down and updated one of my lagging Wordpress plugins. The plugin in question would be Random Categories w/ Random Posts.

Version 0.5 includes adds the option to include the post excerpt in the random list of posts and is available for download. I’ve been told that it doesn’t work with WP 2.3 yet but that will be tonight’s task. That is all. Back to your regularly scheduled program.