הנה משהו ממש נחמד שיצא לי להשתמש בו לא מזמן בפרויקט מסוים – תכונת Resize. כרגע התכונה הזו נתמכת רק בפיירפוקס, כרום, אופרה וספארי. אינטרנט אקספלורר 9 לא תומך בכך וחבל. מה ש-Resize עושה הוא לתת למשתמש יכולת לשנות גודל של תיבה מסוימת על ציר X או Y או שניהם יחדיו לפי צורכו.
למשל, בואו ונחשוב שיש לי טופס מסוים ובו יש רשימה ארוכה למדי של Radio buttons, אני יכול לירוק את הרשימה הזו לדף, אבל אני יכול לתחום אותה באמצעות Div שיש לו overflow: hidden. למשל:
התיבה שלעיל הוכנה על ידי הקוד הבא כמובן:
<div style="width: 250px; height: 150px; overflow-x: scroll; overflow-y: hidden; border: 1px solid black;">
<ul>
<li><input type="radio" name="whatever" />פריט מספר 1</li>
<li><input type="radio" name="whatever" />פריט מספר 2</li>
<li><input type="radio" name="whatever" />פריט מספר 3</li>
<li><input type="radio" name="whatever" />פריט מספר 4</li>
<li><input type="radio" name="whatever" />פריט מספר 5</li>
<li><input type="radio" name="whatever" />פריט מספר 6</li>
<li><input type="radio" name="whatever" />פריט מספר 7</li>
<li><input type="radio" name="whatever" />פריט מספר 8</li>
<li><input type="radio" name="whatever" />פריט מספר 9</li>
<li><input type="radio" name="whatever" />פריט מספר 10</li>
<li><input type="radio" name="whatever" />פריט מספר 11</li>
</ul>
</div>
כדי לתת למשתמש אפשר לבצע resize ובכך להקטין או להגדיל את תיבת הבחירה, אנו נשתמש בתגית resize שיכולה לקבל כמה ערכים: vertical לאפשרות שינוי בציר האנכי, horizontal לציר האופקי ו-both לשניהם. למשל:
בדוגמה שלהלן אני משתמש ב-resize: vertical כדי לאפשר הזזה אנכית של ה-div:
וכך נראה הקוד כמובן, די זהה לקודם מלבד תוספת ה-resize
<div style="width: 250px; height: 150px; overflow-x: scroll; overflow-y: hidden; border: 1px solid black;resize: vertical">
<ul>
<li><input type="radio" name="whatever" />פריט מספר 1</li>
<li><input type="radio" name="whatever" />פריט מספר 2</li>
<li><input type="radio" name="whatever" />פריט מספר 3</li>
<li><input type="radio" name="whatever" />פריט מספר 4</li>
<li><input type="radio" name="whatever" />פריט מספר 5</li>
<li><input type="radio" name="whatever" />פריט מספר 6</li>
<li><input type="radio" name="whatever" />פריט מספר 7</li>
<li><input type="radio" name="whatever" />פריט מספר 8</li>
<li><input type="radio" name="whatever" />פריט מספר 9</li>
<li><input type="radio" name="whatever" />פריט מספר 10</li>
<li><input type="radio" name="whatever" />פריט מספר 11</li>
</ul>
</div>
על מנת לא לשבור את ה-layout לחלוטין ולא לאפשר למשתמש לצמצם את האלמנט לגודל קטן מדי או להגדיל אותו יותר מדי, אנו יכולים להגדיר גובה מינימלי וגובה מקסימלי באמצעות min-height ו-max width.
למרבה הצער התכונה הזו לא קיימת עבור אינטרנט אקספלורר אלא רק עבור דפדפנים מתקדמים. אם אתם חייבים את התכונה הזו בדפדפן אינטרנט אקספלורר, תצטרכו להשתמש ב-JavaScript, אבל לכל השאר זה חסכון משמעותי של זמן בקוד אלגננטי ומודרני. טוב להכיר.
אהבתם? לא אהבתם? דרגו!
(2 הצבעות, ממוצע: 4.50 מתוך 5)
כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
תשארו בקשר!