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

http://ufiles-il.co.cc/

באמצע האתר יש מסגרת אפורה (מתחת לכותרת "שגר קבצים"), יש שם שלושה כפתורים. הכפתור הימני ביותר הוא "הוסף קבצים".

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

אשמח אם מישהו יוכל לעזור לי לסדר את הבעייה.
הקוד עצמו הוא קוד JS. תוכלו לראות אותו במקור האתר.
זה קוד מוכן של גלריית להעלאת קבצים לשרת.

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

תודה

שים לב מה קורה כאן:

קוד:

		// this is our browse button, *target* is overlayed with the Flash movie
		target: 'demo-browse',

demo-browse זה ה-id של הכפתור המדובר.

מה שקורה זה שאובייקט FLASH נמצא מעליו. אבל איך בדיוק הוא נמצא מעליו? באיזה מתודות DOM השתמשו כדי למצוא את המיקום? (רמז...)

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

אגב יכול להיות שתהיה גם בעיה בנוגע ל- box model.

הערות שאינן קשורות לבעיה המקורית:

כדאי שתצמצם את המידע שמועבר ע"י היעזרות במנגון ה-cache של הדפדפנים. קוד JS, CSS וכו' שים בקבצים.

גם את הציור הזה שעשית בקוד מקור עדיף שתשים בקובץ חיצוני ואז תקשר אליו עם התג link ומאפיין rel.

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

לערוך\לשנות משהו בקוד זה חובה. השינוי לא צפוי להיות גדול במיוחד:

סה"כ תוסיף ל"מחלקת" ה-JS מאפיין dir ותיתן לו ערך rtl או ltr.
תחפש איפה מוצאים את הקוארדינטה של ה- browse button ותוסיף בציר ה-X את ה-offset השלילי בגודל הכפתור - בהתאם לערך שבמאפיין dir.

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

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

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

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

זה הקובץ המדובר:
http://ufiles-il.co.cc/uploader/sou...iff.Uploader.js

בודאי שאפשר עם JS !

ראה כאן.

בחלק הקוד הבא:

קוד:

		// target 
		this.target = $(this.options.target);
		if (this.target) {
			var scroll = window.getScroll();
			this.box.setStyles({
				position: 'absolute',
				visibility: 'visible',
				zIndex: this.options.zIndex,
				overflow: 'hidden',
				height: 1, width: 1,
				top: scroll.y, left: scroll.x
			});

תתמקד בשורה:

קוד:

				top: scroll.y, left: scroll.x

ותשים offset שלילי בהתאם לגודל ה-div.

ניסיתי לשים במקום ה-scroll.x כל ערך מספרי אחר. הפלאש עדיין נשאר במקומו הדפוק, לא זז!.

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

קוד PHP:

 if (this.target) {
             var ob=document.getElementById("demo-browse")
            var scroll = window.getScroll();
            this.box.setStyles({
                position: 'absolute',
                visibility: 'visible',
                zIndex: this.options.zIndex,
                overflow: 'hidden',
                height: 1, width: 1,

                top: scroll.y, left: scroll.x-ob.width
            }); 


שים dir: ltr רק על האלמנט שמכיל את הפלאש.

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

אלמנט a הוא אלמנט פנימי (display:inline) ולכן אין לו הגדרות רוחב וגובה. תגדיר אותו כ- inline-block. ואז אני מניח שזה יעבוד טוב, מקוה

קוד PHP:

 <a href="#" class="button" id="demo-browse" style="display: inline-block;"><span>הוסף קבצים</span></a> | 


אותה תוצאה, עדיין זה לא עובד.

אהה ודאי ודאי. ניסית להשיג את הרוחב בצורה הבאה:
obj.width

אבל זו לא הדרך הנכונה, אלא:
http://www.quirksmode.org/dom/w3c_cssom.html

שם כתוב על clientWidth, או לחלופין offsetWidth (מה שמתאים עבורך) , וזה מה שאתה צריך.

קוד PHP:

 if (this.target) {
             var ob=document.getElementById("demo-browse")
            var scroll = window.getScroll();
            this.box.setStyles({
                position: 'absolute',
                visibility: 'visible',
                zIndex: this.options.zIndex,
                overflow: 'hidden',
                height: 1, width: 1,

                top: scroll.y, left: scroll.x-ob.offsetWidth
            }); 


כמו תמיד, עדיין לא עובד.
נראה לי שזה לא הכיוון הנכון לפתרון של הבעייה. לא משנה איזה מספר אני מכניס שם, בכל מקרה הפלאש תקוע באותו מקום, הוא לא זז שמאלה/ימינה!...אם אני מכניס שם מספרים אחרים הפלאש אמור לפחות לזוז, אפילו לא למיקום הנכון שלו, אבל הוא לא זז!

מאוד מוזר.

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

קודם כל תבדוק אם התנאי בכלל מתקיים והקוד שבתוך ה-if רץ. לדוגמא:

קוד:

 if (this.target) {
  alert('yay');
}

אחרי זה תבדוק אם אתה מצליח לקבוע ערכי CSS בולטים, כמו:

קוד:

 if (this.target) {
             var ob=document.getElementById("demo-browse")
            this.box.setStyles({
                position: 'absolute',
                visibility: 'visible',
                zIndex: this.options.zIndex,
                overflow: 'hidden',
                height: 100, width: 100, /* pixels? */
                background_color: '#...' /* <---specify value */
            });  

ככה תבדוק מה מקור הבעיה ותמצא אותה.

ואז תמשיך לשלב של קביעת ערך שרירותי ב-top ו- left:

קוד:

 if (this.target) {
             var ob=document.getElementById("demo-browse")
            var scroll = window.getScroll();
            this.box.setStyles({
                position: 'absolute',
                visibility: 'visible',
                zIndex: this.options.zIndex,
                overflow: 'hidden',
                height: 1, width: 1,

                top: '100px', left: '300px'
});

ולבסוף אשאל 3 שאלות:

1. אתה בטוח שהגובה והרוחב של האלמנט אמור להיות 1 פיקסלים? כך זה מוגדר בקוד למעלה...
2. הפונקציה הזאת שדרכה עורכים את ה-CSS של אלמנט נראית לי מוזרה. איך אפשר לקבוע ערך כמו background-color? אם זה נעשה דרך http://www.w3schools.com/htmldom/dom_obj_style.aspDOM Style אז אני מבין, אבל זה פשוט נראה לי מיותר לעשות זאת בשיטה הזאת.
3. אם ההערכה שלי ב-2 נכונה, אז בדקת האם הערכים שצריכים להיכנס אמורים לכלול יחידות מידה כמו px או em וכו' ?

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

ניסיתי להוסיף ערכי CSS בולטים כמו שאמרת. שום דבר לא עובד, לא שינוי צבע הרקע, ולא שינוי הגודל.
וכן, הקוד כן מופעל. הALERT קופץ לי.!

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

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