פתרון לבעיית אורך 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 לפני יישום הפתרון הזה.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. 🙂

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: , , פורסם בקטגוריה: jQuery Scripts

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.