T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Implementacija Google maps v spletno stran
Hitri vnos/uvoz podatkov v MySQL preko LOAD DATA INFILE »
23rd October

Select – dropdown – width – internet explorer

HTML select seznam se v Internet explorerju ne prilagaja vsebini, ampak je vedno enako širok. Firefox za razliko lepo opravi z različno dolgo vsebino in je spustni seznam širok enako kot je široka najširša opcija. Obstaja pa kar nekaj rešitev kako dodati to funkcionalnost tudi v Internet Explorer brskalniku.

Yahoo - fix select ie width

PLAIN TEXT
HTML:
  1. <!--[if IE]>
  2.     <script src="yahoo_2.0.0-b3.js" type="text/javascript"></script>
  3.     <script src="event_2.0.0-b3.js" type="text/javascript"></script>
  4.     <script src="dom_2.0.2-b3.js" type="text/javascript"></script>
  5.     <script src="ie-select-width-fix.js" type="text/javascript"></script>
  6. <![endif]-->

PLAIN TEXT
JAVASCRIPT:
  1. // Implementiramo Yahoo IE select width fix na vse drop down - select elemente
  2. jQuery(document).ready(function(){
  3.     if (jQuery.browser.msie) {
  4.         jQuery("select").each(function(){
  5.             new YAHOO.Hack.FixIESelectWidth(this.id);
  6.         });
  7.     }
  8. });

Primer inštalacije ter vse potrebne skripte dobite na demo spletni strani. V primeru uporabe te rešitve vas zna motiti sprožitev focus eventa ob preletu miške (onmouseover) preko select HTML elementa. Slaba lastnost tega je, da se zaradi focus eventa sproži scrolling v IE 6,7,8 brskalnikih, kar zna biti neugodno pri daljših vsebinah. Na srečo je popravek enostaven, pojdite v ie-select-width-fix.js skripto ter zakomentiraje el.focus(); vrstico.

jQuery rešitev:

PLAIN TEXT
JAVASCRIPT:
  1. $("#dropdown").mousedown(function(){
  2.         if($.browser.msie) {
  3.                 $(this).css("width","auto");
  4.         }
  5. });
  6. $("#dropdown").change(function(){
  7.         if ($.browser.msie) {
  8.                 $(this).css("width","175px");
  9.         }
  10. });

Rešitev brez uporabe javascript knjižnic

PLAIN TEXT
HTML:
  2. select{width:100px}
  3. </style>
  4.  
  6. <select <!--[if IE]>onmousdown="this.style.position='absolute';this.style.width='auto'" onblur="this.style.position='';this.style.width=''"<![endif]-->>
  7.   <option>Prva opcija</option>
  8.   <option>Druga opcija, ki je predolga in jo zato IE odreže</option>
  9. </select>
  10. </html>

Dodatne informacije

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript koledar – izbira datuma – jQuery date picker
  2. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  3. Operacije nad seznami – Javascript DOM – HTML select – HTML option
  4. Microsoft Internet Explorer 8 kot obvezna nadgradnja
  5. jQuery – traversing – dodatki – javascript frameworks
  6. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  7. Internet Explorer 8 CSS hack
  8. jQuery each snippet
  9. Javascript – fade efekt – jQuery – fadeIn – fadeOut – setTimeout – removeChild
  10. Zakaj odsvetujemo uporabo brskalnika Internet Explorer?

Antony || Friday, October 23rd, 2009 ob 11:32 pm || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


Dodaj komentar