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

   
|!|

השב
 
כלים לאשכול תצורת הצגה
ישן 10-02-06, 13:42   # 1
Distortion
חבר חדש
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 35
הודעות: 40

Distortion לא מחובר  

Post [מדריך] HTML - יצירת טקסט נגלל ע"פ כללי xHTML 1.0 Transitional.

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

דבר ראשון צרו דף xHTML עם iframe בתוכו וכמובן כוונו את ה- src של ה- iframe לדף בו ימצא הסקריפט, בנוסף העלימו את פסי הגלילה בעזרת המאפיין "scrolling". כלומר:
HTML קוד:
<iframe src="scroll.html" scrolling="no" style="height:20px; width:400px;  padding:0px;"></iframe>
טיפ: ממולץ להוסיף את שלושת המאפיינים הנוספים שהכנסתי ל- style של ה- iframe כדי שסקריפט יצא טוב.
ב- iframe השתמשתי כדי להעלים את הטקסט כאשר הוא מגיע לקצה, אני עדיין עובד על פיתרון שיבטל את ה- iframe ויאפשר תמיכה ב- strict.

עכשיו ניצור דף xHTML נוסף בו ימצא הסריפט שגורם לטקסט לזוז.
אז איך זה עובד?
אנחנו קובעים מיקום אבסולטי לטקסט בדף, המקום הראשוני שנקבע למשפט הוא מינוס אורך ה- span בו ישכון המפשט זאת כדי שבהתחלת הגלילה הטקסט יהיה מוסתר. דבר ראשון יוצרים sapn עם טקסט בתוכו ומגדירים מיקום אבסולטי:
HTML קוד:
<span id="scroll" style="position:absolute; width:auto;">הטקסט שלכם</span>

לאחר מכן אנחנו יוצרים את הפונקציה הבאה שמגדירה את המיקום האבולוטי מ- left (אם רוצים כיוון גלילה לצד השני, יש להפוך את הסקריפט) ומפעילה את הפונקציה שמזיזה את הטקסט (ע"י שימוש ב- SetTimeout).הפונקציה הזאת תופעלכאשרהדף יעלה (כלומר onload בתגית ה- body):
HTML קוד:
document.getElementById('scroll').style.left=-parseInt(document.getElementById('scroll').offsetWidth)+"px";
setTimeout('scroll();',1);
השורה הראשונה זהו המיקום של הטקסט מצידו השמאלי של המסך וגם אורך ה- span שבותוכו נמצא הטקסט (זאת כדי שהטקסט יעם כשצריך ויופיע כשצריך). השימוש בפונקציה זו נעשה כדי שגם אתרים דינמיים בהם אורך המשפט לא קבוע יוכלו להשתמש בסקריפט הזה.

נכתוב פונקציה נוספת שנקראת scroll (כפי שכתוב ב- SetTimeout בפונקציה הראשונה). בפונקציה זו שחוזרת על עצמה כל הזמן בעזרת SetTimeout נשלוט על מיקום הטקסט. יש לדאוג שכל פעם הטקסט יזוז פיקסל אחד ימינה וכאשר קצו השמאלי של הטקסט יגיע לסוף ה- iframe הטקסט יחזור למיקום ההתחלתי שלו (השורה הראשונה בפונקציה הראשונה). וכך זה יעשה:
HTML קוד:
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 בו יושב הדף המכי את הסקריפט.
וזהו, הפונקציה עובדת.

דוגמה לסקריפט בפעולה.


בהצלחה!

Last edited by Distortion; 10-02-06 at 13:50..
  Reply With Quote
ישן 10-02-06, 13:49   # 2
שקד
משתמש - היכל התהילה
 
מיני פרופיל
תאריך הצטרפות: Dec 2005
מיקום: ירושלים
גיל: 38
הודעות: 659

שקד לא מחובר  

מדריך נחמד

תודה על ההשקעה
__________________
  Reply With Quote
ישן 10-02-06, 13:53   # 3
lalamen
חבר פורום
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 33
הודעות: 328

lalamen לא מחובר  

תודה בדיוק לפני כמה ימים שאלתי על זה
  Reply With Quote
ישן 10-02-06, 14:21   # 4
SHeDoN
מנהל קהילה ומנהל כללי בדימוס
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: תל אביב
גיל: 32
הודעות: 5,739

SHeDoN לא מחובר  

תודה!
ברוך הבא, נראה לי שתיהיה חלקה נכבד מהפורום
  Reply With Quote
ישן 10-02-06, 15:05   # 5
miniature
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
הודעות: 1,754

miniature לא מחובר  

תודה =]
__________________
יואב.

דרכים ליצירת קשר:

אימייל: thebigfire@walla.co.il
הודעה פרטית
  Reply With Quote
ישן 10-02-06, 15:07   # 6
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

יפה יפה
רעיון נחמד מאוד.

למה אתה לא שם את זה בתוך DIV?
DIV ברוחב 400PX..
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

  Reply With Quote
ישן 10-02-06, 15:28   # 7
Kuchi
הוסטסניון
 
Kuchi's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: אור יהודה
גיל: 35
הודעות: 2,540
שלח הודעה באמצעות MSN אל Kuchi

Kuchi לא מחובר  

יפה יפה
אבל באמת חבל לעשות את זה באייפרם זה עיקשי אפשר בדיב בכל מקרה יפה אהבתי !
  Reply With Quote
ישן 10-02-06, 16:50   # 8
Distortion
חבר חדש
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 35
הודעות: 40

Distortion לא מחובר  

שמחתי לעזור.
בקשר ל- iframe, רוצים לנסות לעשות את זה, KuChI-PoChI ו- somebody?
  Reply With Quote
ישן 10-02-06, 16:57   # 9
Kuchi
הוסטסניון
 
Kuchi's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: אור יהודה
גיל: 35
הודעות: 2,540
שלח הודעה באמצעות MSN אל Kuchi

Kuchi לא מחובר  

ציטוט:
נכתב במקור על ידי Distortion
שמחתי לעזור.
בקשר ל- iframe, רוצים לנסות לעשות את זה, KuChI-PoChI ו- somebody?
לעשות מה ?
  Reply With Quote
ישן 10-02-06, 17:13   # 10
Distortion
חבר חדש
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 35
הודעות: 40

Distortion לא מחובר  

ציטוט:
נכתב במקור על ידי KuChI-PoChI
לעשות מה ?
ליצור סקריפט ללא iframe אלא עם DIV.
  Reply With Quote
השב

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)
 

Tags
מדריך html, מדריך למתקדמים, מדריך xhtml, לפי התקן

כלים לאשכול
תצורת הצגה

חוקי פירסום
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is מופעל
סמיילים הם מופעל
[IMG] קוד מופעל
קוד HTML מכובה

קפיצה לפורום


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

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ