Anzeige

Scrolltext

Scrolltext | PSD-Tutorials.de

Erstellt von cutdriverscrewat, 17.09.2007.

  1. Scrolltext
    Hiho liebe Community,
    ich hab da eine kleine Frage. Und zwar bin ich gerade dabei die Webseite für unsere Truppe (DJ/MC - Drum n Bass - Goa) zu überarbeiten. Da ich aber nur einen sehr kleinen Content Bereich habe, dachte ich mir, ich baue einen ScrollText ein.

    Jetzt habe ich von einer Webseite sowas heruntergeladen alles so gemacht wie es gemacht werden sollte, nur leider scrollt er da nichts :(

    Hat jemand vl. einen Ansatz voran es liegen könnte, oder kennt jemand vl. ein neueres Teil das das was ich benutze? Ist aus dem Jahre 2001 :)

    So hier mal der Code:

    CSS (Diese 4 ID's sind dafür im CSS zuständig):

    HTML:
    1. #divUp {
    2.     position: absolute;
    3.     left: 606px;
    4.     top: 76px;
    5. }
    6.  
    7. #divDown {
    8.     position: absolute;
    9.     left: 606px;
    10.     top: 428px;
    11. }
    12.  
    13. #divScrollTextCont {
    14.     position:absolute;
    15.     top: 73px;
    16.     left: 29px;
    17.     width: 600px;
    18.     height: 377px;
    19.     clip: rect (0px 555px 375px 0px);
    20.     overflow:hidden;
    21.     visibility:visible;
    22.     font-family: Verdana;
    23.     font-size: 10px;
    24.     color: #000000;
    25. }
    26.  
    27. #divText {
    28.     position: absolute;
    29.     left:0px;
    30.     top:0px;
    31.     width: 575px;
    32. }
    HTML (index.html)
    zuerst mal der JavaScript Code
    HTML:
    1. <script language="JavaScript" type="text/javascript">
    2. /**********************************************************************************  
    3. ScrollText
    4. *   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
    5. *   This script was released at DHTMLCentral.com
    6. *   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
    7. *********************************************************************************/
    8.  
    9. function lib_bwcheck(){ //Browsercheck (needed)
    10.     this.ver=navigator.appVersion
    11.     this.agent=navigator.userAgent
    12.     this.dom=document.getElementById?1:0
    13.     this.opera5=this.agent.indexOf("Opera 5")>-1
    14.     this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    15.     this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    16.     this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    17.     this.ie=this.ie4||this.ie5||this.ie6
    18.     this.mac=this.agent.indexOf("Mac")>-1
    19.     this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    20.     this.ns4=(document.layers && !this.dom)?1:0;
    21.     this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    22.     return this
    23. }
    24. var bw=new lib_bwcheck()
    25.  
    26.  
    27. var speed = 30
    28.  
    29. //Sets variables to keep track of what's happening
    30. var loop, timer
    31.  
    32. //Object constructor
    33. function makeObj(obj,nest){
    34.     nest=(!nest) ? "":'document.'+nest+'.'
    35.     this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
    36.       this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
    37.     this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    38.     this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    39.     this.up=goUp;this.down=goDown;
    40.     this.moveIt=moveIt; this.x=0; this.y=0;
    41.     this.obj = obj + "Object"
    42.     eval(this.obj + "=this")
    43.     return this
    44. }
    45.  
    46. // A unit of measure that will be added when setting the position of a layer.
    47. var px = bw.ns4||window.opera?"":"px";
    48.  
    49. function moveIt(x,y){
    50.     this.x = x
    51.     this.y = y
    52.     this.css.left = this.x+px
    53.     this.css.top = this.y+px
    54. }
    55.  
    56. //Makes the object go up
    57. function goDown(move){
    58.     if (this.y>-this.scrollHeight+oCont.clipHeight){
    59.         this.moveIt(0,this.y-move)
    60.             if (loop) setTimeout(this.obj+".down("+move+")",speed)
    61.     }
    62. }
    63. //Makes the object go down
    64. function goUp(move){
    65.     if (this.y<0){
    66.        this.moveIt(0,this.y-move)
    67.        if (loop) setTimeout(this.obj+".up("+move+")",speed)
    68.    }
    69. }
    70.  
    71. //Calls the scrolling functions. Also checks whether the page is loaded or not.
    72. function scroll(speed){
    73.    if (scrolltextLoaded){
    74.        loop = true;
    75.        if (speed>0) oScroll.down(speed)
    76.         else oScroll.up(speed)
    77.     }
    78. }
    79.  
    80. //Stops the scrolling (called on mouseout)
    81. function noScroll(){
    82.     loop = false
    83.     if (timer) clearTimeout(timer)
    84. }
    85. //Makes the object
    86. var scrolltextLoaded = false
    87. function scrolltextInit(){
    88.     oCont = new makeObj('divScrollTextCont')
    89.     oScroll = new makeObj('divText','divScrollTextCont')
    90.     oScroll.moveIt(0,0)
    91.     oCont.css.visibility = "visible"
    92.     scrolltextLoaded = true
    93. }
    94. //Call the init on page load if the browser is ok...
    95. if (bw.bw) onload = scrolltextInit
    96.  
    HTML (Hier wird es angewendet)
    HTML:
    1. <div id="divUp"><a href="#" onMouseOver="scroll(-3)" onMouseOut="noScroll()" onClick="return false"><img src="images/scrollerup.jpg" alt="" name="" width="20" height="19" border="0"></a></div>
    2.     <div id="divDown"><a href="#" onMouseOver="scroll(3)" onMouseOut="noScroll()" onClick="return false"><img src="images/scollerdown.jpg" alt="" name="" width="20" height="19" border="0"></a></div>
    3.     <div id="divScrollTextCont">
    4.     <div id="divText">
    5.       asdasd
    6.       <p>&nbsp;</p>
    7.       <p>&nbsp;</p>
    8.       <p>&nbsp;</p>
    9.       <p>&nbsp;</p>
    10.       <p>&nbsp;</p>
    11.       <p>&nbsp;</p>
    12.       <p>&nbsp;</p>
    13.       <p>&nbsp;</p>
    14.       <p>&nbsp;</p>
    15.       <p>&nbsp;</p>
    16.       <p>&nbsp;</p>
    17.       <p>&nbsp;</p>
    18.       <p>&nbsp;</p>
    19.       <p>&nbsp;</p>
    20.       <p>&nbsp;</p>
    21.       <p>&nbsp;</p>
    22.       <p>&nbsp;</p>
    23.       <p>&nbsp;</p>
    24.       <p>&nbsp;</p>
    25.       <p>&nbsp;</p>
    26.       <p>asdasdadd</p>
    27.     </div>
    28.     </div>
    Bitte nicht vor diesen &nbsp; erschrecken, ist nur für Testzwecke :)

    Wäre cool wenn Ihr mir da was dazu sagen könnt!

    Achja wer das ganze LIVE sehen will, Cutdrivers Crew | Ready 2 Roll the Shit (c) 2007 (WIP)

    lg Alex
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Scrolltext
    AW: Scrolltext

    Moin,

    #divtext {
    overflow: auto;
    height: irgendwas;
    width: irgendwas;
    }

    ...und noch die restlichen Angaben.

    Das reicht dafür!
    Der Rest, dieser JavaSkript-Kram ist total überflüssig...
     
    #2      
  3. Scrolltext
    AW: Scrolltext

    Danke für die Antwort! Werde ich heute mal nach der Arbeit umsetzen.

    lg Alex
     
    #3      
x
×
×