11
ספטמבר
12
תגובותהבייבי הראשון שלי – פלאגין jQuery חדש לגלילה אופקית בRTL
בשבוע שעבר בצעד אחרון של ייאוש פנה אלי חבר מהעבודה לעזרה. "דניאל, תעזור לי". אני, כאחד שידוע בטוב ליבי אינסטקטיבית עניתי "לא" ומיד תיקנתי בלי שישים לב ל"למה, התכוונתי ללמה לא?".
בטח שמעתם עליו, קוראים לו ארז וולף – מנהל הבלוג We-CMS שהולך להרצות מחר בכנס וורדקאמפ עליו כתבתי בפוסט הקודם. ההרצאה שלו הולכת להיות על המרת תבנית וורדפרס לOne Page Layout – אותן התבניות חסרות הדפים הפנימיים עליהן דיברתי בעבר. רעיון מגניב כשחושבים על זה – לקחת את וורדפרס, על כל יתרונותיה (מבחינת SEO וניהול תוכן פשוט ונוח) ולכווץ אותו לאתר של דף אחד שהשימוש בתפריט שלו יהיה כנויגציה בין האיזורים השונים באותו דף ולא כמעבר בין עמוד לעמוד – הכל כמובן בעזרת jQuery ופלאגין מעולה שמאפשר זאת בשם: scrollTo (בו השתמשתי גם בפורטפוליו שלי).
שימוש בפלאגין באתר בעברית במצב של גלילה אנכית נראה מעולה כמו שתוכלו לראות בדמו הזה. הבעיה התחילה דווקא בגלילה האופקית. כאשר מתבצעת גלילה של המסך הוא נגלל ונצמד עד לקצה השמאלי של הדפדפן. אם תיכנסו ללינק הזה תוכלו לזהות מיד את הבעיה במידה ותלחצו על הכפתור האחרון בתפריט שיוביל אתכם לאיזור האחרון בעמוד. שימו לב שבניגוד לציפיה, הוא נגלל ונצמד לגבול השמאלי ולא לגבול הימני של המסך.
כדי להבין את הבעיה יותר טוב תוכלו להיכנס לבלוג של ארז ולפוסט שהוא פירסם בנושא. אני דווקא רציתי לדבר על הפיתרון שבא לידי ביטוי בפלאגין שכתבתי שבא בתוספת לפלאגין scrollTo. לבייבי שלי קראתי rtlScroll (שם מקורי, אני יודע- חשבתי עליו לגמרי בעצמי!) ותוכלו להוריד אותו מכאן.
איך משתמשים ב rtlScroll?
כדי להשתמש בפלאגין כל מה שצריך לעשות זה לקרוא לסקריפט בתגית הhead של קובץ הHTML שלכם ולאחר מכן לשייך את הקונטיינר (האבא) שעוטף את איזורי התוכן שלכם לפלאגין בצורה הבאה:
1 |
$('#yourParentElement').rtlScroll();
|
לדוגמא, אם בניתם את האתר שלכם בצורה הזאת:
1 2 3 4 5 |
<ul> <li>Content area 1</li> <li>Content area 2</li> <li>Content area 3</li> </ul> |
הסלקטור אותו תשייכו לפלאגין יהיה תגית ה"ul".
בגדול מה שקורה מאחורי הקלעים של rtlScroll אלה סה"כ כמה חישובים פשוטים:
- חישוב רוחב המסך והריווחים שהמשתמש נתן לאזורי התוכן.
- ביצוע מס' פעולות מתמטיות שיקבעו בסופו של דבר את הPadding left והPadding right (הריווחים) שיווצרו בין אזור תוכן אחד לשני.
שימוש, הדגמה והורדת הפלאגין rtlScroll
השימוש בפלאגין הוא חופשי כמובן ואין צורך לבקש או לשאול – לחיצה על הלייק בתחתית העמוד / פירגון בתגובה יכולים בהחלט להספיק. במידה ונתקלתם בבעיות תוך כדי השימוש, אשמח לשמוע, לייעל ולשפר אותו.
הדגמה חיה לפלאגין rtlScroll בפעולה.
הורדת הפלאגין + דמו לשימוש תוכלו למצוא פה: http://gandtblog.com/stuff/rtlScroll/rtlScroll.zip (בקרוב אולי גם אתר רשמי?)
אשמח אם תעזרו לי להפיץ ולהראות לי דוגמאות חיות לשימוש בפלאגין. תהנו 
קצת על דניאל שטרנליכט
דניאל שטרנליכט הוא מעצב ומפתח צד לקוח ואב לשני אייפונים מקוריים. חי ונושם ווב בעבודה ובבית, משתדל ללמוד כל יום משהו חדש עם גוגל כמורה, ו- Notepad++ כמחברת. בזמנו הפנוי תמצאו אותו מנהל את הבלוג לעיצוב גרפי וטכנולוגיה וחוקר טכנולוגיות ווב חדשות.
12 תגובות לפוסט "הבייבי הראשון שלי – פלאגין jQuery חדש לגלילה אופקית בRTL"
שגיא שרייבר
תותח! כל הכבוד!
Tailor Vijay
יופי של עבודה, אבל אני לא מבין למה לא להשתמש פשוט בפלאגין jQuery קיים בשם cycle?
דניאל שטרנליכט
כי בניגוד לcycle, שנותן לך אפשרות ליצור סליידרים כאלו או אחרים, scrollTo מאפשר לך לגלול את המסך.
Tailor Vijay
למיטב ידיעתי cycle מאפשר לך את כל הפונקצינליות הזאת, כולל שימוש בטרנזישנים שונים בין אלמנט לאלמנט ושילוב של ספריות אפקטים של jQuery, כמו easing וכו'.
דניאל שטרנליכט
אם שנינו מדברים על אותו פלאגין:
http://jquery.malsup.com/cycle
לא הצלחתי למצוא בו שום אפשרות לגלילה מלאה של עמוד.
גיא בורשטיין
יפה מאד – רק שאין תמיכה באקספלורר.
דניאל שטרנליכט
אני יודע, מכיוון שהפלאגין הזה מבוסס על הפלאגין scrollTo – שלא תומך בIE מסיבה לא ברורה – גם שלי לא.
לביא
פשוט מאוד להוסיף תמיכה באקספלורר:
this.hash
שמופיע בתוך script.js צריך להיות:
$($(this).attr('href'))
(ה-rtl מחרבש את הקוד, אבל אפשר פשוט להעתיק את השורה לעיל)
לביא
תיקון למה שכתבתי לעיל (משום מה פעם עבד לי ועכשיו לא)
שלושת השורות הבאות מתקנות את הבעיה אצלי:
var hash=$($(this).attr('href'));
var totalDimensions = (parseInt(hash.css('paddingRight'))+parseInt(hash.css('paddingLeft'))+hash.width())*hash.index();
$.scrollTo( { top:0, left:totalDimensions} , 1000,{axis:'x'});
הסבר: במקום לגלול לדיב לפי ה-id שלו, גוללים לפי המיקום שלו
עושים חישוב של הקואורינטות לפי גודל הדיב (פדינג ימני+שמאלי+רוחב)
מאחר וכל הדיבים באותו הגודל, אפשר להכפיל את הגודל ב-index וכך למצוא את הקואורדינטות של כל דיב על ציר ה-x
הבן הראשון יהיה 0 כפול הגודל, השני 1 כפול הגודל השלישי 2 כפול הגודל וכו'
אסף
הי אנשים אהבתי את הפלאג מאד אך לא הצלחתי להתקינו בוורדפרס
העליתי את הקובץ כזיפ לתיקיית הפלגינס אך לא ממש יודע איך אני פותח תיקיית זיפ
וגם לא מצאתי אותו תחת השם המצוין בחיפוש פלגינס בוורדפרס עצמה
עזרה מישהו?
דניאל שטרנליכט
היי אסף, הפלאגין הזה לא מיועד לוורדפרס. זה פלאגין jQuery – משהו שאתה יכול להוסיף לקוד הHTML שלך.
אסף
תודה על התגובה דניאל אך אבקש הסבר טיפה יותר)
להוסיף לקוד הHTML???
לא ממש ממש הבנתי
בפשטות ,אני יוכל להשתמש בו באתר וורדפרס שלי באיזשהי צורה?
כי לא הבנתי מה זה אומר להוסיף אותו לקוד הHTML אם זה לא באתר?
ונניח שאי אפשר האם ישנו פלג מוכר אחר שעושה את אותה העבודה לוורדפרס?