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

Having used TextMate for a while I have grown quite accustomed to being able to fold sections of code, particularly function declarations, so I can glance through the file to see what functions and variables I have defined. However, I recently made a totally nerd bragging rights based decision to test out MacVim. Well it wasn’t all bragging rights, being able to navigate a file without having to move my fingers from ‘home base’ would be a big plus.

The project I’m currently working on though has a couple of really large javascript files and navigating them quickly in MacVim without the foldings was something I found to be quite difficult so I started looking at the Vim help files and found the ability to create folds. Due to a disciplined use of tabs to indent code blocks :set foldmethod=indent worked fairly well but eventually it started to bug me because the of the fold was actually the first line of the content which meant the folds looked something like functionName: function() {
+ - - if (test) {
}, There had to be a better way. I realized what I wanted to do was create a fold on the line with the function declaration down to the line with the ending brace. I could not find an easy command to do this so I created a simple javascript filetype plugin (addfoldings vim plugin).

In order to get this to work I had to add filetype plugin on to my .vimrc file and I had to create the ~/.vim/ftplugin/javascript directory and drop the addfoldings.vim file into it. By default the foldings are all open but they have been created.

Update: Things are of course never as easy as they seem. The above works fine as long as you don’t add lines to the file you’re working on which is of course absurd, additionally it won’t update the foldings as you go which sort of limits the usefulness. Hopefully I’ll be able to update this to be more useful.