javascript, jQuery

Fissare il problema dell’overflow orizzontale IE

Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari.

Ho trovato questo plugin per jQuery che permette di fissare il problema dell’overflow orizzontale sullo stesso browser. E’ possibile seguire il progetto alla pagina dell’autore.

In particolare , Firefox e altri, se si ha un overflow orizzontale dell’elemento pone la barra di scorrimento sul lato esterno dell’elemento. In Internet Explorer, se non possiamo vedere tutto il contenuto in verticale, genera la barra di scorrimento verticale, insieme alla barra di scorrimento orizzontale.

Ma il caso peggiore si ha quando abbiamo una sola riga overflowed: la barra di scorrimento orizzontale non è estesa su tutto l’elemento, rimane comunque un piccolo spazio laterale per la barra di scorrimento verticale anche non visualizzandola.

Seguendo l’autore, una soluzione al problema è di applicare i seguenti passi, solo per Internet Explorer:

  1. trovare tutti gli elementi il cui contenuto è visualizzato con barra di scorrimento orizzontale
  2. aggiungere 20 pixel di padding-bottom agli elementi
  3. scostare la barra di scorrimento verticale

E’ possibile applicare questi tre punti tramite JavaScript:

window.onload = function () {
  // solo IE
  if (!/*@cc_on!@*/0) return;

  // trova gli element di prova
  var all = document.getElementsByTagName('*');
  var i = all.length;

  while (i--) {
    // se scrollWidth (la reale larghezza) è superiore alla 
    // alla larghezza visibile, applicare le modifiche di stile
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

o creare un plugin per jQuery con tale codice:

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });            
    } else {
      return this;
    }
  };
})(jQuery);

// uso
$('pre').fixOverflow().doOtherPlugin();

Potrebbero Interessarti

  • Crea una classifica mp3 musicale con jQuery9 Ottobre 2009 Crea una classifica mp3 musicale con jQuery La settimana scorsa ho iniziato lo sviluppo di un sito community con tematica musicale. Nel creare una prima bozza da far vedere al cliente, mi posi il problema della sezione classifiche hit della musica. Navigando alla ricerca di un plugin jQuery che faccia al caso mio, tra i pochi […]
  • Creare un menu a lista in ordine alfabetico con jQuery8 Febbraio 2010 Creare un menu a lista in ordine alfabetico con jQuery ListMenu è un plugin jQuery che permette di convertire facilmente una lunga lista di elementi, difficile da navigare, in un sistema compatto di menu a liste visualizzate in ordine alfabetico, in modo che si presenti graficamente più pulita e di rapido accesso agli […]
  • Angoli arrotondati con jQuery17 Novembre 2008 Angoli arrotondati con jQuery Dopo l'uso di tanti script per creare l'effetto arrotondato ad angoli, ho trovato questo plugin di jQuery che mi ricrea lo stesso effetto senza l'utilizzo di immagini o margini. Compatibile con i maggiori browser, anche i più datati, il plugin jQuery Corners è cartterizzato dalle […]
  • Effetto newsticker con jQuery17 Dicembre 2009 Effetto newsticker con jQuery Con questo piccolo articolo voglio illustrare un modo per visualizzare le notizie recenti con liScroll, un plugin per jQuery che trasforma qualsiasi elenco non ordinato ul in un news ticker a scorrimento. Con il termine "newsticker" si vuole intendere un box in cui si possono leggere le […]

Potrebbero interessarti

  • Quante imprecazioni prima di JQuery.

    Molti non lo sanno ma con qualche kb in più puoi risolvere delle incompatibilità (come il canale alpha dei png su IE 6) in maniera molto pulita.

    Tanto pulita che ragionando in maniera modulare (e facendo un pò di progressive enhancement) oramai sono rari i layout che si smontano al fatidico confronto con il browser microsoft e che richiedono ore extra di fixing

    16 Ottobre 2008
  • Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari. Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

    16 Ottobre 2008
  • Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

    16 Ottobre 2008
  • Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

    16 Ottobre 2008

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.