הוסטס - פורום אחסון האתרים הגדול בישראל - [מדריך] JS

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

לפני שאני ישכח, תודה לתומר (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.