Question

It’s the super-boring super-annoying IE-select-box issue!

I had solved it successfully…

JQUERY:

$(function(){
    if($.browser.msie){
        $("select:not(#wrkTimeFrm,#wrkTimeFrm1,#wrkTimeTo,#wrkTimeTo1)")
            .focus(function(){
            $(this).css("width","auto");
            $(this).css("position","absolute");
        });
        $("select:not(#wrkTimeFrm,#wrkTimeFrm1,#wrkTimeTo,#wrkTimeTo1)")
            .blur(function(){
            $(this).css("width","145px");
            $(this).css("position","inherit");
        });
    }
})

…but that was only until now.

As you can see the :not(id)s are the select boxes whose size is/should be less than 145px, i.e. it should not change. It was working fine. But the list of such select boxes is way too much to handle that way. Moreover the ids are dynamic and I’ve no idea whose width is more/less than 145px(the options are dynamic…obviously).

So now, I’m trying to update the width of select box only if the its auto width is more than its current width.
Something like:

$(function(){
    if($.browser.msie){
        $("select").focus(function(){
            if(autoWidth>currentWidth){
            do_the_rest();
            }
        });
    }
});

And I’m running sort of ideas for ‘autoWidth’ and ‘currentWidth'($(“.dd”).outerWidth() gives the width as 145, but I’m afraid if I can use it for currentWidth as I got more than one select boxes on same jsp with same css class ‘dd’, although event is fired for ‘this’ select box only. May be someone could let me know how to get the class name of the select box under focus…maybe!…..and than the outerWidth.).

So please help!

Answer 1

I’m finding it really hard to understand what you mean, specially because you didn’t include any fiddles or even the generated HTML code… but I think maybe what you want to do is this:

$(function(){
    if($.browser.msie){
        $("select").focus(function(){
            if($(this).width()>145){
              $(this).css("width","auto");
            }
        });
    }
});

UPDATE:

$(function() {
    $("select").focus(function() {
        if ($(this).width() > 95) {
            var prevWidth = $(this).width();
            $(this).css("width", "auto");
            if ($(this).width() < 100) {
                $(this).css("width", 100 + "px");
            }
            $(this).blur(function() {
                $(this).css("width", prevWidth + "px");
            });
        }

    });

});​