• create an inline block to wrap the <select> up
• set width and height of the inline block the same as the original select
• set position ‘relative’ for inline block
• set position ‘absolute’ for <select>
• when mouse over, set <select> width as ‘auto’
• when mouse click, toggle a flag ‘clicked’ (using $.data)
• when mouse out and flagged as ‘clicked’, reset <select> width
• when blur or change, reset <select> width

The reason for wrapping an inline block is that when <select> set/reset width, it would not affect the layout of other elements.

The ‘clicked’ flag is used to indicate if the <select> is ‘expanded’. If it is, the mouseout event should not reset the width.

Here is the code (and of course only effective in IE6/7):

This code is copied from a library which aims at create an overlay for modal box. From IE7 onwards, CSS style position ‘fixed’ is supported, but not in IE7’s quirks mode. So the above code would fail. The solution is let IE7 run at correct doctype. e.g.:

But the code is still fragile to the environment. In jQuery, you can use $.support to get a set of feature detect properties. So, the code can become:

But it is still based on the assumption that “no support on boxModel = no support on fixed position”, which is “politically incorrect”.

jQuery 的 API Browser 也更新了，在試用之時發覺每一個 code example 都伴隨一個 “Edit” 連結，結果是連到 JS Bin 裏可以直接修改和測試 Code，非常方便。

但 JS Bin 不是會每三個月做 house-keeping 嗎？還是特別為 jQuery 做 host 了？結果測看了其 URL，發現原來可以用 http://jsbin.com/?html=[code]&js=[code] 來發送一個完整的例子，當然這會受到 URL 的字數限制了。

I called it ‘stupid’ because it does so many things to achieve this little effect:

1. create extra divs to wrap table up
2. cloning current table header
3. put the cloned table header on top of the current table
4. synchronize width of each cell
5. synchronize scroll position when scrolling

This idea is not original. I have read it elsewhere but cannot find the source again. So I do it in jQuery way.

The good things:

• supports horizontal scroll
• work across browsers (tested on IE6/7, Firefox3.1, Opera9.5, Chrome0.2, Safari 3.1.2).

The bad things:

• in order to calculate correct cell width in different browsers, I have made certain assumptions in the default implementation: table’s border-collapse is collapse, cell have borders, etc. Therefore, you may need to make change for the width calculation. This is made possible by supplying adjustWidth to the plugin option. (However, dealing with width in table can be really troublesome. Even current implementation is not pixel perfect.)
• Firefox has a bug of missing border when placing table inside a overflow div. Some specific CSS rules has been added to the sample page to workaround this.
• It’s not pixel perfect.
• It may not perform well.
• The header cells will not get resized when the table cells width changes. This can be done by re-calculate the cells width and add custom event to the table for triggering. I’ll leave it to someone who has interest in doing so…

To support IE6, I have worked around the z-index bug by hiding <select> component. The reason for not using iframe hack is that it will get flashy when scroll.

Feel free to check the demo and doc .

$(":text:visible:enabled:eq(0)").focus();

This query means to find the first of input text field(s), which is/are visible and enabled. However, this would also extract text field(s) which is/are under a display:none parent(s). So a more complete way would be:

$(":text:visible:enabled").filter(function(){
     return $(this).parents(":hidden").size()==0;
 }).slice(0,1).focus();

The filter here would try to determine if the text field is a descendant of a hidden ancestor. The usage of slice(0,1) instead of get(0) is to keep the chainability. A test page is put up here .

Finally, you may wrap it up with a plugin:

(function($){
    $.fn.focusFirstField = function(){
        $this = this;
        $this.find(":text:visible:enabled").filter(function(){
            return $(this).parents(":hidden").size() == 0;
        }).slice(0,1).focus();
        return this;
    }
})(jQuery)

So that you can do this:

$("#form1,#form2").focusFirstField(); //form1 or form2 may be 'hidden' dynamically

I just wonder if there is any ‘selector-only’ solution for this?

Update: It turns out that the child’s visiblity would override parent’s visibility. So the filter should only check display none:

$(":text:visible:enabled").filter(function(){
     return $(this).parents.filter(function(){ 
         return this.style.display == "none"; })
    .size()==0;
 }).slice(0,1).focus();

I’ve updated the demo page .

 <div id="error" style="display:none"><ul></ul></div>
 <form id="form1">
     <input type="hidden" name="fff" id="fff" value="" class="special" />
 </form>

 $.validator.addMethod("special", function(value, element, params){
    //validate....
    return result;
 }, "This is a special checking");
 
 $(document).ready(function(){
     $("#form").validate({
		messages:{ fff: {special: "This is a special checking!"} },
		errorContainer: "#error",
		errorLabelContainer: "#error ul",
		wrapper: "li"
     });
 });

結果怎樣也出不到那個自訂的 validation rule，苦苦深研追踪 source code 後才發現，問題在於 addMethod 裏的 method 參數問題，而正確的寫法是：

 $.validator.addMethod("special", function(){
    //validate...
    return result;
 }, "This is a special checking");

那個 method 的參數數量如果大於 3，plugins 會認為你所加的是有參數的 validation，即在 element class 可能是 {special:abc} 之類，所以當看到 input 裏只是 special 就不會偵測到。

這樣很「正路」吧？但花了不少時間去看才知道。