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

reference spletnih strani
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

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]-->

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:

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

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

2x komentirano na “Select – dropdown – width – internet explorer”

  1. อาหารเสริมลดน้ำหนัก je napisal:

    Hello everyone, it's my first visit at this site, and post is really fruitful in favor of me, keep up posting such articles.

  2. เช่าชุดราตรี je napisal:

    Thanks on your marvelous posting! I definitely enjoyed reading it, you could be a great author.
    I will be sure to bookmark your blog and may come back
    from now on. I want to encourage continue your great job, have a nice
    afternoon!

Dodaj komentar