Select tagliate in IE7? Un piccolo script per risolvere

Di Davide De Maestri - gleenk  //  Archivio Articoli, jQuery  //  Nessun Commento

Problema delle select tagliate in IE 6 e 7

Ecco, quello che vedi nella foto è ciò che accade esattamente quando si cerca di dare una dimensione fissa ad una select. Purtroppo quelli che, a mio avviso, non possono più considerarsi “browser” come li pensiamo noi, tagliano brutalmente i contenuti delle tendine senza alcuna pietà.

Se per IE6 l’unica strada percorribile è quella di utilizzare script che “trasformano” la select in un div (ma vi assicuro che potreste uscirne davvero pazzi), per IE7 è stato realizzato uno script da Craig Hoover (reso pubblico su css-tricks.com)che, inserito rigorosamente prima della chiusura del <body>, e come ultimo script, permette di ottenere anche su IE7 lo stesso tipo di renderizzazione grafica che si ha per le opzioni delle select nei browser moderni.

tasto per vedere la demo del tutorial
(da visualizzare con Internet Explorer 7)

jQuery per risolvere…

Vi riporto quindi, così come è stato pubblicato, il codice da incollare affinchè questo odioso problema si risolva.

// Safely use $
(function($) {
 
        $.fn._ie_select=function() { 
 
                return $(this).each(function() { 
 
                        var a = $(this),
                            p = a.parent();
 
                        p.css('position','relative');
 
                        var o = a.position(),
                            h = a.outerHeight(),
                            l = o.left,
                            t = o.top;
 
                        var c = a.clone(true);
 
                        $.data(c,'element',a);
 
                        c.css({
                                zIndex   : 100,
                                height   : h,
                                top      : t,
                                left     : l,
                                position : 'absolute',
                                width    : 'auto',
                                opacity  : 0
                        }).attr({
                                id    : this.id + '-clone',
                                name  : this.name + '-clone'
                        }).change(function() {
                                $.data(c,'element')
                                        .val($(this).val())
                                        .trigger('change')
                        });
 
                        a.before(c).click(function() {
                                c.trigger('click');
                        });
 
                }); // END RETURN
 
        }; // END PLUGIN
 
        // Usage
        if ($.browser.msie) {
                $('select')._ie_select();
        }
 
})(jQuery); // END SAFETY

Da notare come in chiusura di script venga effettuata la verifica del browser affinchè lo script venga eseguito solo sui browser microsoft.
Se invece si volesse eseguire lo script unicamente se viene riconosciuta la versione 7 di Explorer, è possibile sostituire con:

var isIE7 = $.browser.msie && parseFloat($.browser.version) == 7;
if (isIE7) {
    $('select')._ie_select();
}

E tu che tecnica utilizzi di solito?

Immagini e fonte dello script: css-tricks.com

Altri articoli che potrebbero interessarti

  1. 5 semplici trucchi per risolvere grandi problemi SEO
  2. Didascalie per immagini con jQuery hover e animate
  3. Simulare una fonte di luce dinamica in JavaScript
Webdesign Feed Rss
Scarica l'articolo in formato PDF

Autore: Davide De Maestri

Davide De Maestri - DMSDVD86L27F704W

Privacy Policy