On a project I’ve been working on recently we are making use of a number of 24-bit PNG images. This has cause a number of problems in IE6 because we’re also making use of a number of opacity animations using the MooTools javascript framework. This results in a lot of black crap showing up when you animate or change the visibility or opacity of the transparent PNGs in Internet Explorer 6 and 7.

The first solution was easy, disable opacity animations on transparent PNGs. This fixed the problem almost completely but on a page with a flash movie and a number of things still changing opacity at the same time (even though it was from 0 to 1 which was basically a visibility toggle) the black overlay still appeared from time to time. The most successful attempts at a solution without eliminating the opacity changes were inspired by an article about developing Mimeo which was also quite educational about how IE6 handled 24-bit PNGs and some image retrieval in general. The most informational part is included below..

The apply method is basically used to tell the filter to capture it’s current state in terms of layout and visibility and track changes between then and a call to the play method. It really shouldn’t be necessary to call this in the AlphaImageLoader’s case because there’s no transition, but for whatever reason, this change alone, seemed to make this bug disappear. I say “seemed” because it still appeared every now and then. Later we noticed that once we were no longer including the gAMA header in the PNGs we generated the problem went away entirely. Since we didn’t need gamma settings, this was the final solution to the problem for us. Whether or not the apply call is still needed at this point is unknown as there was no sense in removing something that originally had solved the problem and introduced no performance impact.

Of course I attempted the apply method and removing the gAMA header which rather than fixing the entire problem still only mostly fixed the problem. After being stuck at this point for a while, attempting to find more information and another way to basically fix the way IE6 handled these images without removing the transparency I had something of an epiphany. Since I was already not animating the elements with the transparent background images why not just move them rather than changing the visibility or opacity. It turns out this incredibly simple and solution worked fantastically for me. The elements in question were already using position: absolute; and so all I had to do was set left to something outrageously off the screen, in this case I used -15000px.

Of course the elements won’t always already be absolutely positioned but this technique can still be used if you store the original value of position and whatever position attribute (top/left/bottom/right) used to place the element off-screen. That’s all there is too it!

As I’ve mentioned previously I’ve been developing my own Wordpress theme. During the course of this I found, as many others have, the ‘Search’ widget available in the Wordpress sidebar does not use the searchform.php file which template developers can provide. This irritated me and I was pretty sure the behavior of the ‘Search’ widget could be overridden in functions.php. I was right… I found the beginning of the answer in the Wordpress Widget API but to me the language of

It is possible for theme authors to define replacement widgets within functions.php. Replace an existing widget by registering its name with a new callback. An empty callback will unregister a widget.

was a little convoluted. As it turns out you need to do two things.

First, define a new function to use as the ‘widget callback’ or the function that is called when the widget is included in the page.

    function bjs_widget_search($args) {
        extract($args);
        echo $before_widget;
        echo $before_title;
        _e("Search");
        echo $after_title;
        include (TEMPLATEPATH . '/searchform.php');
        echo $after_widget;
    }

Second, re-register the search widget using your new function name as the callback function.

    $widgetOptions = array('classname' => 'widget_search', 'description' => ( "A search form for your blog"));
    wp_register_sidebar_widget('search',('Search'),'bjs_widget_search',$widgetOptions);

And that’s all there is to it. You may notice that I actually did more than just make the search widget include searchform.php I also added a header tag with a title for the widget. Keep in mind if you use ids for your search form elements this may invalidate your markup if the search form appears (or can) more than once on your page

About two months ago now a friend of mine asked me to help him out by building him a website for a startup he was working with. Naturally I asked for some more information about the company and he told me they were going to do roadside barbeque and catering. For me, living in New York City, this seemed like a crazy idea but then I took a step back and considered where he was living (Central Pennsylvania) and thought this could work. Fortunately he wasn’t asking me for money or any kind of investment save some time and expertise.

What he needed was a web presence for this company and what I needed was a project I had heavy front-end involvement in but didn’t sit behind a login screen. There were not a lot of design assets for the company or website, basically a color scheme and a logo. The major feature he needed was a calendar to quickly illustrate where the company affiliated trucks were going to be. So I went with a fairly simple design which resembled a business flyer but provided plenty of space for content.

Since the calendar section was the big piece of dynamic content I spent the most time developing it and considering how the interaction would play out. Overall I’m pretty pleased with how it turned out. The catering section of the site is, as yet, incomplete but since the company kicked off sales on the first of May they were a little anxious to have some kind of web presence even if they didn’t have the catering content ready yet. So as of this writing the gallery section has no images (but they just need to be dropped into a folder on the server to work) and the catering section is under construction, however, my first solo freelance project has gone live and I wanted to share.

Check out the Banty Brothers website