articolo html.it, risolvere il problema delle select tagliate

[pietro09]

http://blog.html.it/14/01/2009/risol...lect-tagliate/

dopo avere letto l'articolo ho usato questo codice

<!--[if IE]>
$(function() {

    $("#DropDownList1")

        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
        })

        .mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));
        });

});

<![endif]-->

Non ho usato la classe come selettore, ma l'id.

Non funziona con IE7. Nel senso che, se passo il mouse nel DropDown, questo effettivamente adatta la sua lunghezza. Clicco per aprirlo e, andando col mouse nelle varie voci, appena il mouse esce dalla parte superiore, si chiude il dropdown e riprende le dimensioni originali.

Cosa sbaglio? :master:

[dottwatson]

sbagli questo

.mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));

mi sembra di capire che l'evento è legato all' ogetto che fa aprire l'apertura, non alla tendina che si apre

[pietro09]

Originariamente inviato da dottwatson
sbagli questo

.mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));

mi sembra di capire che l'evento è legato all' ogetto che fa aprire l'apertura, non alla tendina che si apre

purtroppo non ho capito; io non vedo differenze. Ho copiato con copia-incolla dall'articolo originale

[dottwatson]

mi spiego meglio:

l'evento di ridimensioanmento si scatena nel momento in cui sei sulla tendina e la apri.

Probabilmente IE non vede il mouseover quando vai sulla option, quindi, in teoria, dovresti semplicemente ciclare le options e assegnargli lo stile css ad ogni option.

in pratica:

$(function() {

    $("#DropDownList1")

        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
                for(var x=0; x < $(this).options.length; x++)
                  {
                  $(this).options[x].style['width']=$(this).css("width");
                  }
        })

        .mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));
            for(var x=0; x < $(this).options.length; x++)
              {
              $(this).options[x].style['width']=$(this).data("origWidth");
              }

        });

});

non sò se sia corretta la sintassi ma spero che sia chiaro il concetto