Disable Firefox Image Drag

Firefox 3 has a behavior where clicking an image and moving your mouse will start to drag a preview of that image around. The behavior even occurs with the background images for elements.

While this drag and drop behavior for images in Firefox can be really usefull for the visitor, this behavior can be a real problem if you're writing an application that depends on JS to drag around elements that contain images or have background images.

Placing the image or element inside a container and attaching event listeners to that container instead of the image or element with a background seems like an obvious answer, but it will only work for the first click. If the visitor drops the element and tries to drag it again Firefox will start up with the drag and drop behavior.

What does work though is having your mousedown event listener prevent the default action, which seems to be that drag and drop behavior.

Within the event handler you're assigning to your mousedown event, assuming you're argument list includes an event object, as is the case with most jQuery event handlers, your function declaration might look like this.

var callback = function(event){
 if(event.preventDefault)
 {
  event.preventDefault();
 }
 // Other code...
}

Nice and easy.

gtk-stock and gdk_cairo_set_source_pixbuf

It took me the better part of a day to work out how to use a gtk-stock icon as the source for a cairo_paint operation. Basically what I was doing was drawing a magnified section of the screen and painting an eyedropper over it in the middle for the Picksel colorpicker project. I was using a PNG loaded at runtime in the beginning but since GTK has a stock eyedropper icon I figured I might as well use that.

I was having segfault and other issues when I tried gtk_image_create_from_stock and then gtk_image_get_pixmap on the resulting GtkWidget. Apparently the storage method is done in such a way that you can't obtain a GdkPixmap or GdkPixbuf.

What did work though, and actually turned out to be easier was gtk_widget_render_icon. The second and third arguments are the same as the ones used for gtk_image_create_from_stock, the last argument I just left blank, and for the first GtkWidget argument I just passed the reference to my main application window for the stock icon settings to be taken from.

The return from gtk_widget_render_icon is a GdkPixbuf which I used with gdk_cairo_set_source_pixbuf before finally drawing the icon to my destination with cairo_paint.

Here's a brief example.

GtkWidget *window;
GdkPixmap *buffer;
GdkPixbuf *eyedropper;
cairo_t *ctx;


ctx = gdk_cairo_create(buffer);
eyedropper = gtk_widget_render_icon (window, GTK_STOCK_COLOR_PICKER, GTK_ICON_SIZE_MENU, "");
gdk_cairo_set_source_pixbuf (ctx, eyedropper, x, y);
cairo_paint(ctx);

Fancy Blogger Labels Widget

I just noticed Blogger has a post labels widget the other day. After adding it to my layout I discovered I was using quite a few one-time-use labels for my posts. I spent a little while going through my labels & trying to consolidate some of the one-timers into better upper-level groups.
Even after doing this there was still a huge list of words running down the right side of the layout, and I really didn't like how that worked.

So, I fixed it.

With the widget added to my layout, I then modified the HTML used so it was a little cleaner as well as matching the rest of the layout. Blogger templates seem to like using <h2> elements for sidebar items and I like to use <h6> elements.

<b:widget id='Label1' locked='false' title='By Subject' type='Label'>
<b:includable id='main'>
 <span class='top'><span/></span>
 <div class='content' id='by-subject'>
  <b:if cond='data:title'><h6><data:title/></h6></b:if>
  <ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/><a expr:href='data:label.url'><data:label.name/></a></b:if> <small><data:label.count/></small></li></b:loop></ul>
 </div>
 <span class='bottom'><span/></span>
</b:includable>
</b:widget>

With that, I have a clean matching list of labels in the event JS is disabled.

Now for the fancy part.
I'm having jQuery split that list up into smaller lists, much like the Last 50 Posts navigation works with the dates.
Here's the JS I'm using to do that, note that it's among the things that happen after the document has loaded.

var tags = $('<ul/>');
var branch;
var label = {start:'', end:''};
var tagIndex = 0;
$('#by-subject li').each(function(){
 tagIndex++;
 label.end = $(this).children('a').text().toLowerCase();
 switch(tagIndex){
  case 1:
   branch = $('<ul/>');
   label.start = label.end;
  break;
  case 10:
   tagIndex = 0;
   var at = $('<li><a href="#">(' + label.start + ') -- (' + label.end + ')</a></li>');
   at.children('a').click(function(){
    $(this).siblings('ul').slideToggle(500);
    return false;
   });
   branch.slideUp(1);
   branch.appendTo(at);
   at.appendTo(tags);
  break;
 }
 $(this).appendTo(branch);
});
var at = $('<li><a href="#">(' + label.start + ') -- (' + label.end + ')</a></li>');
at.children('a').click(function(){
 $(this).siblings('ul').slideToggle(500);
 return false;
});
branch.slideUp(1);
branch.appendTo(at);
at.appendTo(tags);
$('#by-subject ul').replaceWith(tags);

Basicly, the list is split up into sections of 10 items & each section is labeled with the first and last items in each section. I'll probably switch it to 20 items sometime in the future.

Silky Directory Indexes

I really like the Silk Icons at famfamfam, alot more than the default FancyIndex icons used by Apache2 in fact.
So, now seems like a good time to patch those icons into my directory indexes for FancyIndexing.

First I get the zipfile fill of icons, which is actually a zipfile that has two readme files & a directory called icons in it.

Next I navigate to the directory Apache is already using for icons

Alias /icons/ "/usr/share/apache2/icons/"

In my case it's /usr/share/... look for "Alias /icons" in your *.conf file for Apache to find out where it is for you.

Now, I extract the icons folder from the zipfile into Apaches' icons directory & rename the extracted directory to "silk" so that I have the following.

/usr/share/apache2/icons/silk/

Now to change the icons in the Virtual Host container for the site in question, *.htaccess files could also be used to use different icons per-directory.
I'll start with the ones that have listings already, making the following changes to the AddIcon lines.

    AddIconByEncoding (CMP,/icons/silk/page_white_zip.png) x-compress x-gzip

    AddIconByType (TXT,/icons/silk/page_white_text.png) text/*
    AddIconByType (IMG,/icons/silk/picture.png) image/*
    AddIconByType (SND,/icons/silk/sound.png) audio/*
    AddIconByType (VID,/icons/silk/film.png) video/*

    AddIcon /icons/silk/application_double.png .exe
    AddIcon /icons/silk/application_xp_terminal.png .bin
    AddIcon /icons/silk/page_white_zip.png .Z .z .tgz .gz .zip
    AddIcon /icons/silk/page_white_code.png .shtml
    AddIcon /icons/silk/page_white_acrobat.png .pdf
    AddIcon /icons/silk/page_white_zip.png .txt
    AddIcon /icons/silk/page_white_c.png .c
    AddIcon /icons/silk/page_white_cplusplus.png .cpp
    AddIcon /icons/silk/page_white_dvd.png .dvi
    AddIcon /icons/silk/page_white_gear.png .ini .conf .sh .shar .csh .ksh .tcl
    AddIcon /icons/silk/page_white_actionscript.png .as
    AddIcon /icons/silk/page_white_flash.png .fla .swf
    AddIcon /icons/silk/page_white_freehand.png .fh3 .fh4 .fh5 .fh7 .ft7 .fh8 .ft8 .fh9 .ft9 .fh10 .ft10 .fhx
    AddIcon /icons/silk/page_white_h.png .h
    AddIcon /icons/silk/page_white_php.png .php .php3 .php4 .php5
    AddIcon /icons/silk/page_white_office.png .docx .docm .dotx .dotm
    AddIcon /icons/silk/page_white_powerpoint.png .pptx .pptm .potx .potm .ppam .ppsx .ppsm
    AddIcon /icons/silk/page_excel.png .xlsx .xlsm .xltx .xltm .xlsb .xlam
    AddIcon /icons/silk/page_white_ruby.png .rb
    AddIcon /icons/silk/page_white_word.png .doc
    AddIcon /icons/silk/css.png .css
    AddIcon /icons/silk/html.png .html .htm
    AddIcon /icons/silk/xhtml.png .xhtml
    AddIcon /icons/silk/script_code.png .js
    AddIcon /icons/silk/database_table.png .sql
    AddIcon /icons/silk/script_gear.png .inc .pl .py
    AddIcon /icons/silk/help.png .chm
    AddIcon /icons/silk/music.png .wav .mp3 .ogg

    AddIcon /icons/silk/folder_delete.png ..
    AddIcon /icons/silk/asterisk_yellow.png README
    AddIcon /icons/silk/folder_add.png ^^DIRECTORY^^
    AddIcon /icons/blank.gif ^^BLANKICON^^


    DefaultIcon /icons/silk/page_white.png

Followed by a restart of Apache for good measure.

sudo /etc/init.d/apache2 restart

I now have silky icons on my directory indexes, but apparently it's going to need a little tweeking to tell the difference between "text/text", "text/html", & "text/css" somewhere.