Archives for August, 2006
Here’s a Great CSS Trick
While I’m handing out tips, I think I’ll share a CSS trick that I picked up somewhere (but can’t remember where) not too long ago. This cool little method will pre-load the images for your site theme without the need for any JavaScript. It’s too simple not to use it!
First, add an id selector to your stylesheet similar to the following:
#preload {
width: 0;
height: 0;
display: inline;
background-image: url(images/background.gif);
background-image: url(images/banner.gif);
background-image: url(images/logo.gif);
background-image: url();
}
The critical thing here is the size (width/height: 0), to display it inline (no box of it’s own) and that the last background image url be empty so nothing shows as a background (even though the width/height is 0).
Then in your page, right after the “<body>” tag, add an empty div element as such;
<div id="preload"></div>
That’s it. As soon as your page loads, the style images are downloaded and stored in the browser cache. No need for a JavaScript function to do it anymore. Slick, huh? Works great for those who prefer to browse with JS disabled too.
Yes, it adds just a little superfluous code to the page, but it’s far less cumbersome than the JS alternative, and far more manageable when you want to add or remove images.
There you have it. Enjoy!
One for the Wordpress Users
Here’s a little hint for the Wordpress users that smacked me square between the eyes yesterday in one of those “a-hah!” moments while dinking with the theme files for my site.
A lot of people will tuck an “All content © 2003-2006 So-and-so” or similar notice in the footer of their site. If you’re one of those who do, and you’re bugged by the fact that you have to change (or forget to change) the latter year every time a new year rolls around, there’s a quick and simple solution for you.
It dawned on me, since Wordpress themes are based on the PHP language (this works with any PHP based template system really), why not just tuck the date function into my template footer in place of the latter year? That way it will automatically change when it’s supposed to, and I won’t have to remember anything. So, in place of the following:
<p>All content © 2004-2006 jimmitchell.org</p>
I simply did this:
<p>All content © 2004-<?php echo date("Y") ?> jimmitchell.org</p>
Yippie! No more having to remember to change the footer on January 1st.
Overly simple? Yes. Painfully obvious? Only to those further along the path to web development enlightenment than myself. To the other neophytes like me, it’s one of those moments where we start to wonder “If I can do that, could I do this?” I hope this helps to bring one of those moments to your own work, be it for fun or profit.
Happy Birthday, JMO
Two years today. Can you believe it? That’s how long the site has officially been online. In that time I’ve gone through at least a half-dozen new looks, and heaven knows I’m sure to go through that many, if not more, in the next two.
For those of you who read on a regular basis, I’d like to say thanks for everything. You’ve made this little experiment on the web a whole bunch of fun. Be on the lookout for things to kick into high gear as we move into the fall season.
Here’s to another 2 years, and beyond!