שיחה ההאקר Emad
11 באוגוסט 2012 – 21:50 | 31 תגובות

קבוצת ההאקרים הפועלת תחת שמו של אימעד מורניה, RememberEmad, ופרסמה כי פרצה לשרתי חברת ההוסטינג WebGate, פרסמה היום קובץ נוסף ובו כ-500 פרטים נוספים ובהם שמות משתמש וסיסמאות של אתרים שאוחסנו ב-WebGate. נראה כי העימות בן קבוצת …

המשך קריאה »
geek

חנון זה מגניב. תרבות החיים האינטרנטית-טכנולוגית-גאדג'טית. הדברים שמבדילים את הנערים מהגברים.

הרשת

סיפורים מהרשת, בעיקר זו הישראלית. מה קורה, מי קורה ולמה קורה.

וורדפרס

בעיקר תבניות מתורגמות לעברית ולפעמים דברים שקשורים לבלוגים ובלוגרים.

מערכות ניהול תוכן

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

פלטפורמות חברתיות

על רשתות חברתיות, כלים לבניית רשתות ופלטפורמות חברתיות וכל מה מכונה web 2.0

ראשי » בניית אתרים, וורדפרס

גלילה אופקית ב-RTL פלאגין ל-jQuery

מאת ארז וולף בתאריך 9 בספטמבר 2011 – 9:2720 תגובות

פוסט טכני על יצירת גלילה אופקית באתר עמוד אחד בעברית (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 (ובטח גם בחבריו האפילו יותר מפגרים ממנו). לי אישית לא ממש אכפת ושמיקרוסופט יטפלו במשתמשים שלהם, לי נגמרה הסבלנות לנסות להתאים אתרים לדפדפנים המחורבנים שלהם.

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

שתף את הפוסט בטוויטר

20 תגובות »

הוסף תגובה!

הוסף את תגובתך בהמשך הדף, או טראקבק מאתרך. תוכל גם עקוב אחר תגובות לפוסט זה באמצעות RSS.

שמור על תגובה נקיה, הגב לעניין. בלי ספאם.

בלוג זה תומך ב-Gravatar. אם אין לך עדיין גראווטר, תוכל ליצור לך אחד על-ידי הרשמה ב: Gravatar.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

123 queries in 0.807 seconds.