[מדריך] JS - יצירת טקסט מתגולל (marquee) תקני - הוסטס

meshuga · 28-03-06, 17:27

שלום לכולם, אחרי שהחלטתי שאני צריך אחד, התחלתי לנסות להכין, נחשו מה?....גם הצלחתי!.

לפני שאני ישכח, תודה לתומר (atom-bomb), הוא לא הצליח לעזור לי אבל לפחות ניסה...

או קי, למי שיש ספק, קודם כל שיכנס לפה:
http://validmarqee.sbsil.biz/

עכשיו נתחיל במדריך.
דף HTML נראה ככה:

HTML קוד:

<html>
<head>

</head>
<body>

</body>
</html>

אנחנו נעבור חלק חלק, אוקי, בין תגי הHEAD שמים את החלק של הפונקציה והמערך TIMER בצורה כזאת:

HTML קוד:

	<script type="text/javascript">
                         <!-- www.hosts.co.il - meshuga -->
		var timer=new Array();
		var browser = navigator.appName;
		var ver=0;
		if(browser=="Netscape" || browser=="Opera")
			ver=1;
		function scroller(asd,updown,aaa){
			var thediv=document.getElementById(asd);
			if(updown==1){
				var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height);
				if(aaa==1)
					thediv.scrollTop=thehight;
				aaa=0;
				if(thediv.scrollTop==0)
					thediv.scrollTop=thehight;
				thediv.scrollTop=thediv.scrollTop-1;
			}else{
				if(aaa==document.getElementById(asd).scrollTop)
					thediv.scrollTop=0;
				aaa=thediv.scrollTop;
				thediv.scrollTop=thediv.scrollTop+1;
			}
				timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20);
		}
		function stopscroller(asd2){
					clearTimeout(timer[asd2]);
		}
	</script>

עכשיו לחלק העיקרי של המדריך, הDIV של הגלילה.
קודם כל, לDIV צריך להיות שם מסויים שבHTML זה בעצם הID שלו.
אז נתחיל בתוך הBODY כמובן:

HTML קוד:

	<div id="scrolldiv1"></div>

כרגע הוספנו DIV שהשם שלו זה scrolldiv1.
עכשיו צריך לעשות לו את הגלילה, אז מוסיפים את זה לתוך הDIV:

HTML קוד:

style="overflow:hidden;height:80px;"

כך שיוצא:

HTML קוד:

	<div id="scrolldiv1" style="overflow:hidden;height:80px;"></div>

בעקרון זה עושה לו גלילה רק שלא רואים (גלילה-> מה שיש בצד ימין או שמאל של הדף במקרה שהוא ארוך מדי) וגם הוספנו גובה (height) - שמתי 80 פיקסלים גובה.

עכשיו, שמים את התוכן של מה שאנחנו רוצים שיגלל בתוך הDIV שעשינו:

HTML קוד:

<div id="scrolldiv1" style="overflow:hidden;height:80px;">
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
</div>

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

HTML קוד:

<div id="scrolldiv1" style="overflow:hidden;height:80px;">
<div style="height:80px;"></div>
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
<div style="height:80px;"></div>
</div>

עכשיו, אנחנו צריכים לתחום את הכל הכל הכל (חשוב בשביל הגלילה מלמעלה למטה)...עם DIV כך שזה יהיה ככה:

HTML קוד:

<div id="scrolldiv1" style="overflow:hidden;height:80px;">
<div>
<div style="height:80px;"></div>
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
<div style="height:80px;"></div>
</div>
</div>

עכשיו, לרגע שכולנו חיכינו....בואו נגלל אותו!.....
אם אתם רוצים שהוא יעבוד מהכניסה לדף, אז הולכים לתג הbody ושמים שם:

HTML קוד:

onload="scroller(DIVname,up-down);"

הסבר מקוצר על הפונקציה,
DIVname: שם/ID של הDIV שלנו, במקרה הזה scrolldiv1.
up-down: הכיוון, מלמטה למעלה שמים 0 מלמעלה למטה שמים 1.

אז מה שיוצא לנו הוא:

HTML קוד:

<body onload="scroller('scrolldiv1',0);">

עכשיו, מי שלא רוצה שכאשר העכבר נמצא מעל הDIV הוא עוצר וכשהוא לא אז הוא ממשיך יכול לדלג על הקטע הזה...
נתחיל:
חוזרים לDIV העיקרי שלנו, ושמים שם את אותה פונקציה ששמנו בbody רק בonmouseout (לא לשכוח לשים אותם ערכים)
כך שיוצא ככה:

HTML קוד:

<div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);">

אל תבהלו ממה שקורה עכשיו אם אתם על הDIV ואז יוצאים (המהירות) עכשיו אנחנו נתקן את זה.

חוזרים לDIV שעכשיו טיפלנו בו ומוסיפים לו את הפונקציה stopscroller בתוך onmouseover כלומר ככה:

HTML קוד:

<div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');">

כמה מילים על stopscroller, בתוכו לא שמים 2 ערכים כמו בscroller אלא רק את שם הDIV (להזכירכם, שלנו->scrolldiv1).
וזהו, יש לכם DIV נגלל אוטומטי ותקין כמובן, נכון כיף...

הקוד השלם:

HTML קוד:

<html>
<head>
	<script type="text/javascript">
                         <!-- www.hosts.co.il - meshuga -->
		var timer=new Array();
		var browser = navigator.appName;
		var ver=0;
		if(browser=="Netscape" || browser=="Opera")
			ver=1;
		function scroller(asd,updown,aaa){
			var thediv=document.getElementById(asd);
			if(updown==1){
				var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height);
				if(aaa==1)
					thediv.scrollTop=thehight;
				aaa=0;
				if(thediv.scrollTop==0)
					thediv.scrollTop=thehight;
				thediv.scrollTop=thediv.scrollTop-1;
			}else{
				if(aaa==document.getElementById(asd).scrollTop)
					thediv.scrollTop=0;
				aaa=thediv.scrollTop;
				thediv.scrollTop=thediv.scrollTop+1;
			}
				timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20);
		}
		function stopscroller(asd2){
					clearTimeout(timer[asd2]);
		}
	</script>
</head>
<body onload="scroller('scrolldiv1',0);">
<div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');">
<div>
<div style="height:80px;"></div>
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
שי סוס <br/ >
<div style="height:80px;"></div>
</div>
</div>

</body>
</html>

הקוד לא יהיה תקין כי חסר בו <title> (שחובה לשים בHEAD) ובגלל שאין DOCTYPE אבל זה לא קשור לפונקציה שלי :].

לכל ה"נחמדים" חושבים ששלכם יצא יותר טוב?...תעשו, לא מעניין אותי רק אל תהרסו את האשכול.

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

*יש להזכיר שאולי יהיו באגים בכל מני דפדפנים, נבדק רק על IE וFF.
*אין להוריד זכויות חבר'ה.
*אם מישהו מוצא איזה באג להודיע לי בבקשה.
*אם יש בעיה במדריך ליידע אותי, כתבתי אותו מהר.

-באג ידוע, לפעמים זה עולה פיקסל אם אתה מזיז את העכבר בתוך תחום הDIV.

Eran | Roop.co.il · 28-03-06, 17:33

יפה מאוד!,
כל הכבוד.

~~Eye-Soft~~ · 28-03-06, 17:34

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

בכל מקרה, ישר כוח

meshuga · 28-03-06, 17:35

ציטוט:

נכתב במקור על ידי Eye-Soft

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

בכל מקרה, ישר כוח

אתה מתכוון לזה:
http://www.hosts.co.il/forums/showth...hlight=marquee
ולצערי זה עם אי פריים, וכמה שאני שונא איי פריים

.
וגם שם זה מאוזן ולא אנכי.

~~Eye-Soft~~ · 28-03-06, 17:38

לא לא, לא זה. אני חושב שראיתי את זה באתר שווצרי בכלל (אני שווצרי אז... :\). אבל עזוב, דיון שלך :O לא קשור.

somebody · 28-03-06, 17:38

יפה מאוד!

BlueNosE · 28-03-06, 18:28

וואו, מגניב =]
תודה רבה (למרות שאני לא שם על תקינות הקוד.. אבל בכל מקרה אם לקוח ירצה.. אני אשים קרדיט אל תדאג =])

פחח חבר שלי שאל אותי אם אפשר לקנוס אתרים על תקינות קוד.. xD

Yehuda-d.com · 28-03-06, 19:18

תודה רבה..

Alter · 28-03-06, 19:29

תודה, עזר לי מאוד!

mlnn · 28-03-06, 20:01

יפה אבל לא הכי שימושי.
באופרה זה בכלל לא פועל, ובFF פועל רק הלמעלה.

28-03-06, 17:27	# 1
meshuga הנהלת הפורום לשעבר מיני פרופיל תאריך הצטרפות: Oct 2005 גיל: 35 הודעות: 7,601	[מדריך] JS - יצירת טקסט מתגולל (marquee) תקני שלום לכולם, אחרי שהחלטתי שאני צריך אחד, התחלתי לנסות להכין, נחשו מה?....גם הצלחתי!. לפני שאני ישכח, תודה לתומר (atom-bomb), הוא לא הצליח לעזור לי אבל לפחות ניסה... או קי, למי שיש ספק, קודם כל שיכנס לפה: http://validmarqee.sbsil.biz/ עכשיו נתחיל במדריך. דף HTML נראה ככה: HTML קוד: <html> <head> </head> <body> </body> </html> אנחנו נעבור חלק חלק, אוקי, בין תגי הHEAD שמים את החלק של הפונקציה והמערך TIMER בצורה כזאת: HTML קוד: <script type="text/javascript"> <!-- www.hosts.co.il - meshuga --> var timer=new Array(); var browser = navigator.appName; var ver=0; if(browser=="Netscape" \|\| browser=="Opera") ver=1; function scroller(asd,updown,aaa){ var thediv=document.getElementById(asd); if(updown==1){ var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height); if(aaa==1) thediv.scrollTop=thehight; aaa=0; if(thediv.scrollTop==0) thediv.scrollTop=thehight; thediv.scrollTop=thediv.scrollTop-1; }else{ if(aaa==document.getElementById(asd).scrollTop) thediv.scrollTop=0; aaa=thediv.scrollTop; thediv.scrollTop=thediv.scrollTop+1; } timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20); } function stopscroller(asd2){ clearTimeout(timer[asd2]); } </script> עכשיו לחלק העיקרי של המדריך, הDIV של הגלילה. קודם כל, לDIV צריך להיות שם מסויים שבHTML זה בעצם הID שלו. אז נתחיל בתוך הBODY כמובן: HTML קוד: <div id="scrolldiv1"></div> כרגע הוספנו DIV שהשם שלו זה scrolldiv1. עכשיו צריך לעשות לו את הגלילה, אז מוסיפים את זה לתוך הDIV: HTML קוד: style="overflow:hidden;height:80px;" כך שיוצא: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;"></div> בעקרון זה עושה לו גלילה רק שלא רואים (גלילה-> מה שיש בצד ימין או שמאל של הדף במקרה שהוא ארוך מדי) וגם הוספנו גובה (height) - שמתי 80 פיקסלים גובה. עכשיו, שמים את התוכן של מה שאנחנו רוצים שיגלל בתוך הDIV שעשינו: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;"> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > </div> אבל, זה לא הסוף, בשביל שהוא יתחיל כאילו אין לו כלום, ויסיים כאילו אין לו כלום (תראו בהמשך) צריך לשים עוד DIVים, ללא שמות, באותו גובה ששמנו לDIV הראשי משני צידי התוכן. כלומר, ככה: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;"> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> עכשיו, אנחנו צריכים לתחום את הכל הכל הכל (חשוב בשביל הגלילה מלמעלה למטה)...עם DIV כך שזה יהיה ככה: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;"> <div> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> </div> עכשיו, לרגע שכולנו חיכינו....בואו נגלל אותו!..... אם אתם רוצים שהוא יעבוד מהכניסה לדף, אז הולכים לתג הbody ושמים שם: HTML קוד: onload="scroller(DIVname,up-down);" הסבר מקוצר על הפונקציה, DIVname: שם/ID של הDIV שלנו, במקרה הזה scrolldiv1. up-down: הכיוון, מלמטה למעלה שמים 0 מלמעלה למטה שמים 1. אז מה שיוצא לנו הוא: HTML קוד: <body onload="scroller('scrolldiv1',0);"> עכשיו, מי שלא רוצה שכאשר העכבר נמצא מעל הDIV הוא עוצר וכשהוא לא אז הוא ממשיך יכול לדלג על הקטע הזה... נתחיל: חוזרים לDIV העיקרי שלנו, ושמים שם את אותה פונקציה ששמנו בbody רק בonmouseout (לא לשכוח לשים אותם ערכים) כך שיוצא ככה: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);"> אל תבהלו ממה שקורה עכשיו אם אתם על הDIV ואז יוצאים (המהירות) עכשיו אנחנו נתקן את זה. חוזרים לDIV שעכשיו טיפלנו בו ומוסיפים לו את הפונקציה stopscroller בתוך onmouseover כלומר ככה: HTML קוד: <div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');"> כמה מילים על stopscroller, בתוכו לא שמים 2 ערכים כמו בscroller אלא רק את שם הDIV (להזכירכם, שלנו->scrolldiv1). וזהו, יש לכם DIV נגלל אוטומטי ותקין כמובן, נכון כיף... הקוד השלם: HTML קוד: <html> <head> <script type="text/javascript"> <!-- www.hosts.co.il - meshuga --> var timer=new Array(); var browser = navigator.appName; var ver=0; if(browser=="Netscape" \|\| browser=="Opera") ver=1; function scroller(asd,updown,aaa){ var thediv=document.getElementById(asd); if(updown==1){ var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height); if(aaa==1) thediv.scrollTop=thehight; aaa=0; if(thediv.scrollTop==0) thediv.scrollTop=thehight; thediv.scrollTop=thediv.scrollTop-1; }else{ if(aaa==document.getElementById(asd).scrollTop) thediv.scrollTop=0; aaa=thediv.scrollTop; thediv.scrollTop=thediv.scrollTop+1; } timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20); } function stopscroller(asd2){ clearTimeout(timer[asd2]); } </script> </head> <body onload="scroller('scrolldiv1',0);"> <div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');"> <div> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> </div> </body> </html> הקוד לא יהיה תקין כי חסר בו <title> (שחובה לשים בHEAD) ובגלל שאין DOCTYPE אבל זה לא קשור לפונקציה שלי :]. לכל ה"נחמדים" חושבים ששלכם יצא יותר טוב?...תעשו, לא מעניין אותי רק אל תהרסו את האשכול. כל הזכויות על כתיבת המדריך והסקריפט הם שלי, אני יוצר הסקריפט ומי שרוצה לפרסם את המדריך חייב להוסיף שורה זו(עם הלינק ועם הכל, אם אני יראה את זה בלי זכויות או הלינק להוסטס...יהיה בלאגן): נכתב ע"י meshuga בלעדית לפורום HOSTS יש להזכיר שאולי יהיו באגים בכל מני דפדפנים, נבדק רק על IE וFF. אין להוריד זכויות חבר'ה. אם מישהו מוצא איזה באג להודיע לי בבקשה. אם יש בעיה במדריך ליידע אותי, כתבתי אותו מהר. -באג ידוע, לפעמים זה עולה פיקסל אם אתה מזיז את העכבר בתוך תחום הDIV.

28-03-06, 17:33	# 2
Eran \| Roop.co.il חבר בקהילה מיני פרופיל תאריך הצטרפות: Oct 2005 הודעות: 164	יפה מאוד!, כל הכבוד. __________________ בברכה,ערן

28-03-06, 17:38	# 6
somebody A Al Alm Almo Almog! תודה על תרומתך! מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: hadera CiTy גיל: 35 הודעות: 4,005	יפה מאוד! __________________ דוא"ל: almog.zimel ב ג'מייל נקודה קום מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

28-03-06, 18:28	# 7
BlueNosE אין כמו ב127.0.0.1 מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: כפ"ס גיל: 32 הודעות: 4,086	וואו, מגניב =] תודה רבה (למרות שאני לא שם על תקינות הקוד.. אבל בכל מקרה אם לקוח ירצה.. אני אשים קרדיט אל תדאג =]) פחח חבר שלי שאל אותי אם אפשר לקנוס אתרים על תקינות קוד.. xD __________________ עומר, admin [@] rely.co.il בניית אתרים Rely סלנג מילון סלנג utter

28-03-06, 19:18	# 8
Yehuda-d.com חבר וותיק מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: פ"ת הודעות: 1,225	תודה רבה.. __________________ פרטים נוספים : אחסון אתרים שרתים מיני יעודים שרתים יעודיים קניית שרתים \|מזרחית \|העלאת תמונות


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

28-03-06, 17:34	# 3
~~Eye-Soft~~ Permanently Banned מיני פרופיל תאריך הצטרפות: Oct 2005 הודעות: 1,158	כל הכבוד על ההשקעה והרעיון טוב, אבל ישנם כבר סקריפטים מוכנים כאלו שעובדים בצורה יותר יעילה וחכמה. מישהו פעם פרסם פה את אחת הגרסאות. בכל מקרה, ישר כוח

28-03-06, 17:38	# 5
~~Eye-Soft~~ Permanently Banned מיני פרופיל תאריך הצטרפות: Oct 2005 הודעות: 1,158	לא לא, לא זה. אני חושב שראיתי את זה באתר שווצרי בכלל (אני שווצרי אז... :\). אבל עזוב, דיון שלך :O לא קשור.

28-03-06, 19:29	# 9
Alter תודה על תרומתך. מיני פרופיל תאריך הצטרפות: Oct 2005 גיל: 35 הודעות: 3,103	תודה, עזר לי מאוד! __________________ Alter.

28-03-06, 20:01	# 10
mlnn משתמש - היכל התהילה מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: בחדר של חני גיל: 35 הודעות: 4,417	יפה אבל לא הכי שימושי. באופרה זה בכלל לא פועל, ובFF פועל רק הלמעלה.

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