פתרון לבעיית אורך Select באינטרנט אקספלורר 6

אינטרנט אקספלורר 6 מזמן לנו לפרקים הרבה כיף והנאה מעצם קיומו. בין שלל הבאגים והבעיות שיש בו ניתן גם למצוא את בעיית אורך ה-Select. קל יחסית להדגים את הזוועה. נכין select וניתן לו תכונה של רוחב:

אפשרות ארוכה ונחמדה, ארוכה ונחמדהעוד אפשרות ארוכה ונחמדה, ארוכה ונחמדהוהנה עוד אפשרות ארוכה ונחמדה, ארוכה ונחמדה

באינטרנט אקספלורר 6, אם נלחץ על ה-select, הוא יחתוך את הטקסט שיש באפשרויות. השוו לכל דפדפן נורמלי אחר…

דרך פשוטה היא לשנות באמצעות JavaScript את הרוחב של שדה ה-select ברגע הלחיצה ולהחזיר את הרוחב המקורי לאחר הבחירה. הבעיה היא שברוב האתרים יש אפשרות שברגע שהרוחב של שדה ה-select ישתנה, כל ה-Layout יהרס. בנוסף, מסתבר שבאינטרנט אקספלורר, כאשר אנו לוחצים על ה-select, מתקיים גם אירוע בחירה ולפיכך קשה גם לבצע toggle נורמלי.

הפתרון – שינוי רוחב ה-select בד בבד עם מתן תגיות CSS שיגרמו ל-select הארור לרחף. בנוסף יצירת toggle עם שלושה מצבים שאחד מהם הוא null.

אפשרות ארוכה ונחמדה, ארוכה ונחמדהעוד אפשרות ארוכה ונחמדה, ארוכה ונחמדהוהנה עוד אפשרות ארוכה ונחמדה, ארוכה ונחמדה

אם תבדקו את העניין באמצעות אינטרנט אקספלורר 6, תראו את השינוי והשיפור.

הפתרון מבוסס על jQuery ויש בו חסרון אחד – הוא לא עובד כל עוד הדף לא נטען לחלוטין ואירוע ה-ready מתחיל לעבוד. הנה קוד המקור:

<p><script type="text/javascript"> 
$(document).ready(function() {
	$('#myselect').toggle(
		function() {
			if (navigator.appName == 'Microsoft Internet Explorer')
			$('#myselect').css({'position' : 'absolute' , 'z-index' : '9999', 'width' : 'auto'});
		},
		function() {
		},
		function() {
			if (navigator.appName == 'Microsoft Internet Explorer')
			$('#myselect').css({'position' : '' , 'z-index' : '', 'width' : ''});
		}
	)
 });
</script></p> 

<select id='myselect' style="width: 100px;">
<option>אפשרות ארוכה ונחמדה, ארוכה ונחמדה</option>
<option>עוד אפשרות ארוכה ונחמדה, ארוכה ונחמדה</option>
<option>והנה עוד אפשרות ארוכה ונחמדה, ארוכה ונחמדה</option>
</select>

אל תשכחו כמובן לכלול הפניה לקוד ספרית ה-jQuery לפני יישום הפתרון הזה.