Javascript Fix Up For Internet Explorer Select Options Truncation

OK, that is a long title, but the issue has real world implications. Since there are still requirements that require support for Internet Explorer 8, it would behoove me to have an elegant pattern that fixes the limitations of IE8 and enhances the user experience.

My initial pass is adapted from http://css-tricks.com/select-cuts-off-options-in-ie-fix/. I found it some what long winded and only solved part of the problem.

function dropDownListFixup(sender, args) {
    var el,
        ua = $.browser,
        up = (sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null,
        selects = $("select", up);
    if (ua.msie && Number(ua.version) < 9) {
        selects
            .each(function () {
                el = $(this);
                el.data("oWidth", el.outerWidth());
            })
            .mouseenter(function () {
                $(this).css("width", "auto");
            })
            .bind("blur change", function () {
                el = $(this);
                el.css("width", el.data("oWidth"));
            });
    }
    selects.each(function (e) {
        this.title = $(":selected", $(this)).text();
    });
}

$(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(dropDownListFixup);
    dropDownListFixup();
    $("body").delegate("select", "change", function (e) { 
        this.title = $(":selected", $(this)).text();
    });
});

After some refactoring and extending, I came up with a solution that is slightly more compact, but provides slightly more functionality and handles drop down lists in update panels. Since even if the drop downs are in modern browsers, the text may be truncated on the closed display if the width is set too small. To fix this issue, I set the title on the drop down so that if the user hovers over the control, the tool tip will display with the value.

// Adapted from: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
function dropDownListSetTitles(sender, args, e) {
    var selects = $("select", ((sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null));
    selects.each(function (e) {
        var el = $(this);
        el.data("oWidth", el.outerWidth());
        setDropDownListTitle.apply(this, [e]);
    });
}
function setDropDownListTitle(e) {
    this.title = $(":selected", $(this)).text();
}
$(function () { // dropDownListFixup
    dropDownListSetTitles();
    if ($.browser.msie && Number($.browser.version) < 9) { //// mouseenter  mouseleave
        $("body").delegate("select", "focus", function () {
            $(this).css("width", "auto");
        })
        .delegate("select", "blur change", function () {
            var el = $(this);
            el.css("width", el.data("oWidth"));
        });
    }
    $("body").delegate("select", "change", setDropDownListTitle);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dropDownListSetTitles);
});

Visual Studio 2008 Post-Build Event and Minify Using YUI Compressor

A time tested way to shrink and optimize JavaScript and CSS is to minify and obfuscate your files. Yahoo (High Performance Web Sites Rule 10) and Google (Minimize Payload Size) have best practices recommending minifying JavaScript.

The YUI Compressor is an excellent open source tool for this; the best I have found. My real world use reduced the size of the regular CSS and JavaScript files by 45%. Gzipping the files reduced CSS files by an additional 25% and JavaScript files by an additional 36%. Resulting in 75%+ smaller files.

Here is a batch file snippet which should speed up implementing this into your build process:

SET YUICOMPRESSOR=%Minify%\yuicompressor-2.4.2.jar
IF "%JAVA_HOME%" == "" (
 ECHO Searching for Java...
 for /f %%j in ("java.exe") do (set JAVA_HOME=%%~dp$PATH:j)
)
ECHO Java: %JAVA_HOME%
ECHO YUICOMPRESSOR: %YUICOMPRESSOR%
IF EXIST "%YUICOMPRESSOR%" (
 IF NOT "%JAVA_HOME%" == "" (
  ECHO Deleting Minified files, TFS can make these readonly and the compressor will not overwrite read only files...
  del /F "%CD%\<Path To Script Directory>\core.min.js"
  del /F "%CD%\<Path To Styles Directory>\core.min.css"
  ECHO Done.

  "%JAVA_HOME%java" -jar "%YUICOMPRESSOR%" -v --type JS -o "%CD%\<Path To Script Directory>\core.min.js" "%CD%\<Path To Script Directory>\core.js"
  "%JAVA_HOME%java" -jar "%YUICOMPRESSOR%" -v --type CSS -o "%CD%\<Path To Styles Directory>\core.min.css" "%CD%\<Path To Styles Directory>\core.css"
 ) ELSE (
  ECHO ERROR: Java is not installed, no Minification
 )
) ELSE (
 ECHO ERROR: YUI Compressor not found.
)

Also note that if a build event echos a line starting with "ERROR", not sure if it is case sensitive, the Visual Studio and Team Foundation Server will set that step as a failure and alert as expected. Remove the "ERROR:" text from the echo lines to allow the build to proceed if it cannot find the compressor or java.

User Interface Engineering

It must be a reoccurring trend that every 6 months I find myself searching for new User Interface best practices. I figured I would blog about it, so I can reference it later and update it as I find new gems.


Jakob Nielsen is a user interface design expert and has a lot of information on his web site (http://www.useit.com) and blog (http://www.useit.com/alertbox/).  Some of his styles might seem a bit bland, but his design principles are very useful.  One post in particular "Top Ten Mistakes in Web Design" (http://www.useit.com/alertbox/9605.html), is a be very useful starting point in designing pages and general content.

There are 2 best practice rules of thumb that stem from #8 summary in the link above:
1) look at how other sites handle the situation and pick the best one
2)  people will spend most of their time using other sites, so unless the company is a web innovator, follow the heard and don't stray too far from it.

Donald Norman (http://www.jnd.org) is another user interface design expert.  He focuses on emotional design and human-centered design.  He does a good job of analyzing interface design in many areas most people probably don't think about (not just for the web) and does it
without getting into technical jargon.  He has a lot of blogs (http://www.jnd.org/index.xml) and essays (http://www.jnd.org/dn.pubs.html) on his site for free.

Jef Raskin (http://en.wikipedia.org/wiki/Jef_Raskin) is one of the most famous interface design experts.  He is credited with the interface design for the Apple Macintosh UI.  He focuses on intuitive interface design.  He wrote an excellent book called "The Humane Interface" (http://books.google.com/books?id=D39vjmLfO3kC&dq=jef+raskin&printsec=fr
ontcover&source=bl&ots=COpDb3aX-a&sig=oNwG4mfm_cALGt3NlRAQr9UJOnA). I read it in college.  "Jef Raskin on 'Intuitive Interfaces'" (http://www.asktog.com/papers/raskinintuit.html) would be a good read to further understand Jakob's #8.

- Other good references -
Rules of Thumb for Web Design
http://www.firelily.com/opinions/thumb.html

Yale Style Manual - Web Style Guide
http://www.webstyleguide.com/index.html?/contents.html