A good way to start a Monday morning...

This is an issue I first ran into several years ago, but I've recently helped two different people who had the same problem and thought it was worth blogging.

If you ever run into a situation where form fields step getting posted to the server after you've done some DOM manipulation, check to make sure your <form/> tag is in a valid location. If the <form/> tag resides as a direct child of either a <table/> or <tr/> tag, then you're going to have problems when the form once you've modified a child element of the <form/> tag.

This behavior does not occur in IE, but it happens in Firefox and several other browsers (I believe Safari exhibits the same behavior.)

Any of the following will break your form post submission:

<table><form><tr> .... </tr></form></table>

<table><tr><form> .... </form></tr></table>

<table><tbody><form> ... </form></tbody></table>

To correct the problem, just place the <form/> tag outside of the <table/> tag:

<form><table><tr> ... </tr></table></form>

I've usually only seen this type of markup on older sites, where I believe the intent of putting the <form/> tag inside the <table/> was to prevent any margins from being inserted into the document. However, this is invalid markup and will come back to haunt you.

NOTE: You can do <table><tr><td><form> .... </form></td></tr></table>. That's perfectly valid HTML. You just need to make sure the <form/> tag is placed somewhere were visible text is allowed.

I was looking for a way to programmatically refresh some specific folders in my workspace anytime I ran my ANT script. Eclipse provides several ant tasks that you can use for various purposes, once of which is the <eclipse.refreshLocal /> tag:

<eclipse.refreshLocal resource="MyProject/MyFolder" depth="infinite"/>

• resource is a resource path relative to the workspace 
• depth can be one of the following: zero, one or infinite

However, when I first tried adding this task to my ANT script, I was getting an error that looked like:

BUILD FAILED
c:\path\folder\build.xml:85: Problem: failed to create task or type eclipse.refreshLocal
Cause: The name is undefined.
Action: Check the spelling.

Needless to say, I was pretty confused. So after some brief research, it turns out I accidentally running ANT outside of the Eclipse JRE. To fix this, go open up the External Tools Dialog (Run > External Tools > Open External Tools Dialog...) and make sure the JRE tab is set to "Run in the same JRE as workspace."

I'm not sure how that setting got changed, but I'm glad I found the fix. This also has sped up the first time execution of my ANT scripts.

Here's a video segment about Akeem Havens, a 14 year old quadriplegic who got his wish to play video games with Ben Roethlisberger. The Steelers FO office signed Akeem to a 1 day contract and he even got to practice with the Steelers team.

Addressing some more behavior issues being brought up (and adding a few new features,) Giva just released a new version of the mcDropdown plug-in:

• Added focus() method
• Fixed autocomplete list from showing dropdown when go back levels in FF3
• Fixed autocomplete list corruption in when go back levels after using mouse
• Added tabindex="-1" to the dropdown arrow (so it shouldn't recieve focus on tabbing)
• Fixed tabbing behavior so hitting [TAB] should go to the next element in the tabindex
• Autocomplete no longer shows (by default) if the input is empty and recieves focus (use the setting.showACOnEmptyFocus to control this behavior)
• Added setting.showACOnEmptyFocus (used for controlling whether the autocomplete list shows on focus if list is empty; default = false)
• Fixed noConflict() bug (where $ wasn't being properly scoped)

Just a quick note that over the weekend I updated the code to the jQuery mcDropdown Plug-in to v1.1a. The update contains:

• Fixed Safari keyboard support
• Added mouse support for keyboard autocomplete box
• Menu mouseout behavior should be functioning better

I've noticed this behavior for a while, but was just asked about this by a co-worker. The Google link: operator does not really work as most people expect and certainly not the way I originally expected it to work. Google has this to say about the link: operator:

The query [link:] will list webpages that have links to the specified webpage. For instance, [link:www.google.com] will list webpages that have links pointing to the Google homepage. Note there can be no space between the "link:" and the web page url.

Notice they don't explicitly say anything about the accuracy or volume that will be returned, just that it will return pages that have links. Well, that's not even really true. Sometimes it will return empty results (even when there are legitimate external links to a page (could be even thousands of links.)

If you're really trying to find external links to your site, the best method Google provides is via their Google Webmaster Tools (see How can I see links to my site?.) Even this method apparently won't reveal all external links, but it's much more accurate.

If you have any great tips for listing external links, make sure to share them in the comments.

I've been running my different versions of Firefox under different profiles, that way I can keep each instance unique. This works great, but I still couldn't figure out how to open both Firefox 2 & 3 at the same time. Turns out I was missing the -no-remote command line parameter in my Firefox 3 shortcut.

Here's a great write up on how to run Firefox 2 and Firefox 3 simultaneously—which provides you with full instructions on setting your shortcuts up so you can run Firefox 2 & 3 at the same time.

Back in April, I posted a preview of a multicolumn dropdown plug-in I was developing for a project at work. Well today we finally officially released the mcDropdown plug-in. I was hoping to release the plug-in sooner, but other projects took precedence and releasing it just got delayed.

I'm really proud of the plug-in and think it provides a really unique form control.

Here's a list of the features:

• Creates a multi-column hierarchical select UI component
• Binds a text input field or div element to a list element (included nested lists)
• Menus are automatically split into columns as needed
• Menus are positioned to always stay on the screen
• Autocomplete keyboard entry (only valid options are allowed)
• Menu automatically scrolls into viewport when opened

You can view a live example over at the plug-in page.

mcDropdown jQuery Plug-in

If you like what you see, make sure to digg it.

Now that Firefox 3 has been released, I really wanted a couple of icons that I could easily identify as either v2 or v3 for my Windows Quick Launch bar. Since I couldn't find any icons out there, I threw together 2 icons which just add the version as an overlay to the original Firefox icon.

I'm not a designer or artist, so I'm sure I could have selected better colors of green, but the contrast works well for what I needed. I can now clearly see which version of Firefox I'm getting ready to load up.

Hopefully someone else will find the icons useful.

Download Firefox 2 & 3 icons for Windows (.ico)

It looks like Firefox 3 is officially released. The servers are a bit overwhelmed at the moment, so you need to use a little perseverance to get the download pages to come up. I think there may be some delays in propagation of the actual Firefox 3 download page as well.

Massimiliano Balestrieri posted a neat little script today in honor of Firefox 3 Download Day 2008. The concept is simple, change the appearance of the page in IE6 slightly by making it show up in black and white. So if you really want to protest IE6, this is a comical way to do it on your blog. I just find the effect hysterical.

/* 
 * 
 * Black'n'White plugin 1.0 
 * $Date: 2008-06-17 15:38:15 +0200 (mar, 17 giu 2008) $ 
 * $Rev: 177 $ 
 * @requires jQuery v1.2.6 
 * 
 * Copyright (c) 2008 Massimiliano Balestrieri 
 * Examples and docs at: http://maxb.net/blog/ 
 * Licensed GPL licenses: 
 * http://www.gnu.org/licenses/gpl.html 
 * 
 */ 
 
if(!window.BlacknWhite) 
    var BlacknWhite = {}; 
 
BlacknWhite = { 
    init     : function(options) 
    { 
        options = jQuery.extend({minor : 7}, options); 
 
           if(jQuery.browser.msie && jQuery.browser.version < options.minor) 
            jQuery("html").css("filter","gray"); 
    } 
}; 
 
jQuery(document).ready(function(){ 
    BlacknWhite.init(); 
    //BlacknWhite.init({minor : 8}); 
}); 

You'll need jQuery on your page to use this script (at least as-is) but it would be simple to adapt to either plain JS or another JS framework. The only thing really going on is it's setting a filter on the <html/> tag to show the whole page in gray.

I've added this script to this blog entry so you can easily view the effect.

Paginating data is one of those commonly required tasks. In previous version of MS SQL Server it's been tricky to handle, but made easy via the use of stored procedures that handle the pagination logic for you. However, if you're using SQL Server 2005 there's a much easier way to handle pagination and that's to use a Common Expression Table (CTE.)

Microsoft created the CTE syntax to make solving complicated tasks easier (such as returning a query of hierarchical tree data.) When you create a CTE, you're essentially creating a virtual table you can query against. CTEs generally perform very well and can often replace the need for creating temp tables.

Let's look at an example of query out records 11-20 from a Employee database:

-- create the Common Table Expression, which is a table called "pagination"
with pagination as
(
    -- your normal query goes here, but you put your ORDER BY clause in the rowNo declaration
    select
        row_number() over (order by department, employee) as rowNo,
        -- a list of the column you want to retrieve
        employeeId, employee, department 
    from 
        Employee
    where 
        disabled = 0
)
-- we now query the CTE table
select 
    -- add an additional column which contains the total number of records in the query
    *, (select count(*) from pagination) as totalResults
from
    pagination
where 
    RowNo between 11 and 20     
order by
    rowNo

The first part of the query creates the table expression we'll actually query against when we grab the actual results from the database. In the CTE you're going to write the SQL you'd normally write to grab all the records with one exception—you use the row_number() function to generate a virtual column that orders your result rows for you. The actual "order by" clause you want to use will actually go in the row_number() declaration—this makes SQL Server assign the correct row number for each record.

It's important to remember that a CTE can be as complex as you need it to be. You can do joins, pivots, etc—whatever you need.

The next step is to actually query against the CTE you created. This query will virtually be the same for all pagination queries you write. You are simply grabbing all of the columns and then limiting the returned data to just the rows you want to display (in this case rows 11 - 20.)

In this example, I added an additional column that contains the total results that were returned from the CTE. This is not needed, but it's handy if you need to do something like "Results 11 - 20 of 4,567 records." There are many ways you could generate the total records, this is just one method.

If you've upgraded to SQL Server 2005 and haven't started using CTEs yet, you really need to start getting familiar with them as they really simplify many tasks in SQL Server that previously were very difficult to solve.

This idea is pretty clever, but is probably best done with a 2 liter (since I think anyone would get suspicious of an smaller 20oz bottle that was already open.)

How To Build A Mentos And Diet Coke Booby Trap

I saw this a week or so ago and thought it was worth watching again. Even if your not a fan of the game, I recommend watching the video just so see what an incredible job the guys at Rockstar did creating a realistic environment.

The video contains no violence and just shows some camera panning around the city. In the first scene, just watch the sky. It's amazing how realistically the clouds move and it's cool watching the occasional plane fly over head.

Liberty City Beats

The author of the video had this to say:

"As I was playing the game, I realized the potential for time lapse filmmaking thanks to the day/night cycle and all the varying weather patterns.

This work was achieved by using one particular motorbike in the game (and the odd helicopter) which offers an uncluttered frame, free of any bodywork in shot. The shots required cramp-inducing holds on the controller for sustained periods of time, in order to get slow and steady shots. Slow pans required delicate movement of the thumb sticks. There is no way to cheat it. Everything is done in-game without glitches, just lots of experimentation and patience.

Fortunately, Rockstar Games gave the means to turn off the HUD, etc, and created a world vibrant enough to allow this type of creative outlet."