iframe (לצורך כל שהוא, שבהמשך אני אסביר עליו), ולכן הסקריפט לא יתמוך ב- strict.
אז בואו ונתחיל.
דבר ראשון צרו דף xHTML עם iframe בתוכו וכמובן כוונו את ה- src של ה- iframe לדף בו ימצא הסקריפט, בנוסף העלימו את פסי הגלילה בעזרת המאפיין "scrolling". כלומר:
<iframe src="scroll.html" scrolling="no" style="height:20px; width:400px; padding:0px;"></iframe>
טיפ: ממולץ להוסיף את שלושת המאפיינים הנוספים שהכנסתי ל- style של ה- iframe כדי שסקריפט יצא טוב.
ב- iframe השתמשתי כדי להעלים את הטקסט כאשר הוא מגיע לקצה, אני עדיין עובד על פיתרון שיבטל את ה- iframe ויאפשר תמיכה ב- strict.
עכשיו ניצור דף xHTML נוסף בו ימצא הסריפט שגורם לטקסט לזוז.
אז איך זה עובד?
אנחנו קובעים מיקום אבסולטי לטקסט בדף, המקום הראשוני שנקבע למשפט הוא מינוס אורך ה- span בו ישכון המפשט זאת כדי שבהתחלת הגלילה הטקסט יהיה מוסתר. דבר ראשון יוצרים sapn עם טקסט בתוכו ומגדירים מיקום אבסולטי:
<span id="scroll" style="position:absolute; width:auto;">הטקסט שלכם</span>
לאחר מכן אנחנו יוצרים את הפונקציה הבאה שמגדירה את המיקום האבולוטי מ- left (אם רוצים כיוון גלילה לצד השני, יש להפוך את הסקריפט) ומפעילה את הפונקציה שמזיזה את הטקסט (ע"י שימוש ב- SetTimeout).הפונקציה הזאת תופעלכאשרהדף יעלה (כלומר onload בתגית ה- body):
document.getElementById('scroll').style.left=-parseInt(document.getElementById('scroll').offsetWidth)+"px";
setTimeout('scroll();',1);
השורה הראשונה זהו המיקום של הטקסט מצידו השמאלי של המסך וגם אורך ה- span שבותוכו נמצא הטקסט (זאת כדי שהטקסט יעם כשצריך ויופיע כשצריך). השימוש בפונקציה זו נעשה כדי שגם אתרים דינמיים בהם אורך המשפט לא קבוע יוכלו להשתמש בסקריפט הזה.
נכתוב פונקציה נוספת שנקראת scroll (כפי שכתוב ב- SetTimeout בפונקציה הראשונה). בפונקציה זו שחוזרת על עצמה כל הזמן בעזרת SetTimeout נשלוט על מיקום הטקסט. יש לדאוג שכל פעם הטקסט יזוז פיקסל אחד ימינה וכאשר קצו השמאלי של הטקסט יגיע לסוף ה- iframe הטקסט יחזור למיקום ההתחלתי שלו (השורה הראשונה בפונקציה הראשונה). וכך זה יעשה:
var x=parseInt(document.getElementById('scroll').style.left);
if(x>400)
x=-parseInt(document.getElementById('scroll').offsetWidth);
x++;
document.getElementById('scroll').style.left=x+"px";
setTimeout('scroll();',1);
חשוב: במקום 400 עליכם להכניס את רוחב ה- iframe בו יושב הדף המכי את הסקריפט.
וזהו, הפונקציה עובדת.