הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - שאלה לגבי SCROLL + ANIMATE בJQ (https://hosts.co.il/forums/showthread.php?t=100504)

ShonLevi

18-10-12 01:34

שאלה לגבי SCROLL + ANIMATE בJQ

שלום לכולם,
אני עובד כרגע על אתר חדש,
וכחלק מהפרויקט אני התבקשתי ליצור קישורים שיזיזו את האתר...
כלומר, ימין שמאל למטה למעלה... [כל האתר באותו הדף, בלי רענון דפים...]

(מי שרוצה להבין פשוט יכול להיכנס לאתר של מרינה מאקס' בלומין: http://www.marinamaximilian.com/ )

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

הקוד:

PHP קוד:


		
			
$("#section01").click( function(){

                $('html, body').animate({

                        scrollTop: $(".Website01_History").offset().top - 80,

                        scrollLeft: $(".Website01_History").offset().left - 390

                }, 700);

            });

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

תודה רבה, וסוף שבוע טוב לכולם :)

RAS	18-10-12 01:47

http://demos111.mootools.net/Fx.Scroll

בהצלחה.

ShonLevi

19-10-12 00:51

העתקתי בדיוק את הקודים משם... משום מה זה לא עובד לי... :\
יש שם הפניה לאתר נוסף, וגם את הקודים ששם הם נתנו ניסיתי וזה הפעם הזיז אבל בבום, לא בANIMATE, כלומר לא כתזוזה אלא כקפיצה...

עזרה? :\

RAS	19-10-12 01:00

אין סיבה שלא יעבוד לך.

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

אתה מוזמן לנסות את הדמו במסמך html חדש וריק ולראות שזה יעבוד לך.

IgalSt

19-10-12 01:05

ציטוט:

נכתב במקור על ידי RAS (פרסם 860582)

אני ממש ממש ממש לא ממליץ לכלול גם jquery וגם mootools ביחד.
אחת כמה וכמה אם זה בשביל לממש משהו כ"כ פשוט שבכלל אפשר לעשות באמצעות css transition ללא כל שימוש ב-js.

AlmogBaku

19-10-12 06:36

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

ShonLevi

19-10-12 09:15

באמת שמתי גם את הJQ וגם את הMOOTOO ביחד...
כלומר, קישרתי לזה ואחר כך לזה... כנראה בגלל זה..
איך אני משלב?

===

הCSS TRANSITION לא נתמך בIE... אני צריך משהו שיעבוד בכל הדפדפנים...

===

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

AlmogBaku

19-10-12 09:39

ציטוט:

נכתב במקור על ידי ShonLevi (פרסם 860625)

jsfiddle

תעשה פונקציה שמוצאת את המיקום כל פעם.. אפשר ע"י שימוש ב data-* attribute

mayden

19-10-12 20:11

ציטוט:

נכתב במקור על ידי IgalSt (פרסם 860584)

תקן אותי אם אני טועה, אבל הCSS Transition לא עובד על IE..

IgalSt

19-10-12 20:43

ציטוט:

נכתב במקור על ידי mayden (פרסם 860710)

תקן אותי אם אני טועה, אבל הCSS Transition לא עובד על IE..

צודק בהחלט. CSS Transiton לא תמך ב-IE9 ומטה אבל כן נתמך ב-IE10.
זה המצב היחיד בו קיימות בעיות תמיכה.
מקור נתונים: Can I Use

לפיכך, בעיניי (וכמובן מאוד תלוי במקרה) ניתן לטפל בחוסר התמיכה הזה ברמת ה-feature detection והחלת polyfill במקרה של חוסר תמיכה.

כמובן שלא חסר מידע ופתרונות עבור css transition polyfill

ShonLevi

20-10-12 19:16

יש למישהו מושג אז איך אני פותר את הבעיה שיש לי?

אדיר	20-10-12 19:38

ציטוט:

נכתב במקור על ידי ShonLevi (פרסם 860828)

יש למישהו מושג אז איך אני פותר את הבעיה שיש לי?

נוכל לעזור אם תציג לנו את הבעיה, תראה לנו את הדף.

בעניין ה- fx.scroll, ככה האתר שהצגת (של מרינה ההיא) מבצע את זה.

ShonLevi

25-10-12 01:57

הינה לכל אלה שביקשו שאציג,
העלאתי את הקבצים...
http://linashachesed.org/Linat

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

3. עכשיו גם שמתי לב שמה שעשיתי לא עובד טוב בIE... כמו תמיד הוא חייב להרוס.. חח

אשמח אם תעזרו לי בעניין הזה...
תודה רבה.. :)

איציק ברבי

25-10-12 22:21

שילבת את הספרייה Mootools?
היא ספרייה דומה לJQ, רק שהיא מאפשרת תכנות מונחה עצמים בתוך JS על מנת שנוכל לייעל את הקוד.

M.a.T.a.N

25-10-12 23:20

אני לא יודע כמה זה יעזור אבל כתבתי מדריך על זה פה בפורום, הנה הקישור:
http://www.hosts.co.il/forums/showthread.php?t=90212

כל הזמנים הם GMT +2. הזמן כעת הוא 16:06.