פוסט טכני על יצירת גלילה אופקית באתר עמוד אחד בעברית (RTL) ו-jQuery פלאגין שיצר דניאל שטרנליכט לפתרון בעיות ב-RTL.

הפוסט הזה נכתב בעקבות הרצאה בוורדקמפ 2011 על אתר עמוד אחד עם גלילה מבוסס וורדפרס (פרטים על ההרצאה כאן)

אתר עמוד אחד בוורדפרס

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

הגלילה נעשית באמצעות הסקריפט jQuery ScrollTo, בהשראת הפוסט Coding a CSS3 & HTML5 One-Page Website Template ואת היישום על וורדפרס, כאמור אציג בכנס.

מגלילה אנכית לגלילה אופקית

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

ראשית, כדי להשתמש בסקירפט ScrollTo לגלילה אופקית, יש להעביר לו פרמטר נוסף, axis=x.
$.scrollTo( this.hash || 0, 1500,{axis:'x'});
פרמטר זה מורה לגלילה להתבצע על ציר ה-X בלבד.

פתרון ניווט הגיוני, יהיה ליצור איזור שיהיה קבוע ולא יגלל (באמצעות position: fixed) ובו יוצג התפריט.
למשל כך:

<header> <!-- This will get position:fixed -->
<hgroup><h1>logo<h1></hgroup>
<nav></nav>
</header>
<section id="container"> <!-- This is the rest of the site that will be scrolled -->
<article id="link1"></article>
<article id="link2"></article>
</section>


בדוגמת הקוד למעלה, <header> הנו האיזור שיהיה קבוע ולא יגלל וכל השאר כן.
כעת אצור קונטיינר שבו אציג את האלמנטים (איזורי התוכן השונים) אשר יגללו. בקוד למעלה <article> יהיו אזורי התוכן הנגללים. לשם כך, אתן רוחב קבוע לכל איזורי ה-article ואקבע להם float: right. כדי שהם יסתדרו בשורה אלו ליד אלו אצטרך להגדיל את רוחב האתר (כדי שכולם יכנסו בשורה אחת). בדוגמה זו רואים את האלמנטים בשורה מסודרים בשורה.

כעת אוסיף את הסקריפט ותפריט כדי ליצור את הגלילה האנכית, כפי שניתן לראות בדוגמה זו. עכשיו גם אפשר לראות את הבעיה העיקרית: כאשר מתבצעת גלילה של המסך (לא מדובר כאן על קרוסלות אלא גלילה מלאה של כך המסך כולו), המסך נגלל עד לקצה השמאלי של הדפדפן. בלחיצה בדוגמה 2 על הלינק הרביעי בתפריט אפשר לראות שהוא נגלל ונצמד לגבול השמאלי ולא לגבול הימני של המסך.

אייטם צמוד לגבול השמאלי

כדי לטפל בבעיה זו, נוכל להוסיף לכל אייטם, padding-left, כדי "לדחוף" אותו לצד הימני של המסך. הבעיה, שאיננו יודעים מה הרזולוציה של מסך המשתמש, כלומר, לא נדע כמה לדחוף אותו ימינה. לשם כך יש לבצע חישוב:
רוחב המסך (של המשתמש) פחות רוחב האייטם – זה המרחק שנרצה לדחוף שמאלה, כלומר להוסיף לאייטם ב-padding-left.
הבעיה שחישוב כזה יצמיד את האייטם ממש לגבול הימני של המסך, ויתעלם מריווח ימני שניתן לאלמנט עצמו (נניח ונרצה שהוא יופיע קבוע מהגבול הימני באמצעות padding-right.
לשם כך, יש לבצע מחדש את החישוב:
רוחב המסך (של המשתמש) פחות רוחב האייטם, פחות רוחב הריווח הימני שניתן לאייטם – זה יהיה הסכום שנרצה להרחיק את האייטם מהגבול השמאלי. חישוב כזה גם יבטיח כי כל אייטם יופיע לבד ובאופן מלא על המסך (ולא יופיעו שניים או יותר).

חישוב הריווח השמאלי לאייטם

rtlScroll.js

הפתרון נוצר על ידי דניאל שטרנליכט (למי שלא מכיר, הבלוג שלו בנושא עיצוב ובניית אתרים מומלץ) שהכין jQuery plugin שמבצע את החישוב הדרוש. כדי להשתמש בפלאגין יש להעביר לו את הקונטיינר שמכיל את האלמנטים אותם נרצה לגלול. הסקריפט סופר את האלמנטים, מחשב את הרוחב של כל אחד ומזהה אם קיים לו padding-right, מזהה את רוחב המסך של המשתמש ומבצע את החישוב. בשימוש בסקריפט, אין צורך כבר לתת רוחב גבוה לקונטיינר, הסקריפט יתן את הרוחב המדוייק הנדרש.

בהתייחס לקוד הדוגמה שלמעלה, הקריאה תהיה כזו

$('#container').rtlScroll();

זוהי הדגמה אחרונה ומלאה של שני הסקריפטים ביחד. את הקוד המלא להדגמה אפשר להוריד מכאן (כולל את הפלאגין של דניאל  - ועליו לבנות מה שתרצו).

הערה חשובה: הגלילה מימין לשמאל (כאשר האתר הוא ב-RTL) לא עובדת בIE9 (ובטח גם בחבריו האפילו יותר מפגרים ממנו). לי אישית לא ממש אכפת ושמיקרוסופט יטפלו במשתמשים שלהם, לי נגמרה הסבלנות לנסות להתאים אתרים לדפדפנים המחורבנים שלהם.

קרא פוסטים נוספים בנושא זה:

• הצגת תמונות בבלוג – איך לשפר את ה-CSS
• אתר עמוד אחד בוורדפרס – הרצאה בוורדקמפ 2011
• קהילת jQuery הישראלית – קדימה להתפקד
• למה CSS3 טוב ליהודים ולערבים
• תבנית וורדפרס בעברית- Elegant Grunge