Sam scroll dziala, ale dic z tekstem mimo ze jest ograniczony wysokoscia do pewnej liczby rozciaga strone (PATRZ STRONA), choc tekstu nie pokzuje. Jak juz scrolluej do dolu to juz ten probrem (wsumie) znika. Nie mam pojecia jak to wywalic.
Kod nie jest moj, kapke go przepisalem orginal jest TUTAJ.
Teraz moj kod:
<script type="text/javascript"> /* Author: Krzysztof Szafranek */ function scroller() { var clip_size=361 var speed=5 var d=document var sc=d.getElementById('div_text') var bar=d.getElementById('scrollbar') var buttonUp=d.getElementById('scrollup') var buttonDown=d.getElementById('scrolldown') var clip_top=10 var bar_offset=0 var div_text_top=sc.offsetTop var limit_top=buttonUp.offsetTop+buttonUp.offsetHeight var limit_bottom=buttonDown.offsetTop-bar.offsetHeight buttonUp.onmouseup=buttonDown.onmouseup=scrollStop buttonUp.onmousedown=buttonDown.onmousedown=scrollButton d.onmousemove=scrollBar d.onmouseup=cast bar.onmousedown=take bar.onselectstart=stop function stop() { return false } function scrollStop() { clearTimeout(sc.timer) } function scrollButton(e) { if (e=eventIE(e)) current_speed=e.target.id==buttonDown.id ? -speed : speed if (clip_top-current_speed<0) { limitTop() return } if (clip_top+clip_size-current_speed>sc.offsetHeight) { limitDown() return } clip_top-=current_speed bar.style.top=(limit_top+Math.ceil(clip_top/(sc.offsetHeight-clip_size)*(limit_bottom-limit_top)))+'px' move() args=arguments // can't refer to 'arguments' directly in setTimeout() sc.timer=setTimeout('args.callee()', 1) } function scrollBar(e) { if (!bar_offset) return e=eventIE(e) if (e.pageY-bar_offset<limit_top) { limitTop() return } if (e.pageY>limit_bottom+bar_offset) { clip_top=sc.offsetHeight-clip_size limitDown() return } bar.style.top=(e.pageY-bar_offset)+'px' move() } function move() { position=(bar.offsetTop-limit_top)/(limit_bottom-limit_top) sc.style.top=(div_text_top-(Math.floor(sc.offsetHeight-clip_size)*position))+'px' clip_top=Math.floor((sc.offsetHeight-clip_size)*position) sc.style.clip='rect('+clip_top+'px '+sc.offsetWidth+'px '+(clip_top+clip_size)+'px 0px)' } function limitTop() { clip_top=10 bar.style.top=limit_top+'px' sc.style.top=div_text_top+'px' sc.style.clip='rect(0px '+sc.offsetWidth+'px '+clip_size+'px 0px)' } function limitDown() { bar.style.top=limit_bottom+'px' sc.style.top=div_text_top+clip_size-sc.offsetHeight+'px' sc.style.clip='rect('+(sc.offsetHeight-clip_size)+'px '+sc.offsetWidth+'px '+sc.offsetHeight+'px 0px)' } function take(e) { e=eventIE(e) bar_offset=e.pageY-bar.offsetTop } function cast() { bar_offset=0 } function eventIE(e) { if (window.event && !window.opera) { e=window.event e.pageY=window.event.y e.target=window.event.srcElement } return e } } </script>[HTML] [HTML]body,td,th { font-family: Arial; font-size: 10px; color: #191815; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; background-image: url(images/rw_bg.jpg); } a { font-family: Arial; font-size: 10px; color: #D04608; } a:visited { color: #D04608; } a:hover { color: #D04608; } a:active { color: #D04608; } .B1A06A { color: #B1A06A; } #div_zero { position:absolute; left:0px; top:0px; width:1000px; height:704px; z-index:0; } #div_main_bg { position:absolute; left:126px; top:167px; width:709px; height:381px; z-index:2; background-image: url(images/rw_main_bg.jpg); background-repeat: no-repeat; } #menu { position:absolute; left:298px; top:55px; width:440px; height:32px; z-index:3; } (...) #div_text { position:absolute; left:10px; top:10px; width:681px; z-index:5; overflow:hidden; clip: rect(0px,681px,371px,0px); visibility: inherit; } #div_scroll { position:absolute; left:835px; top:167px; width:28px; height:381px; z-index:2; background-image: url(images/rw_scroll_line.png); } #scrollup { position: absolute; top: 0px; left: 0px; width: 28px; height: 28px; z-index: 3; background-image: url(images/rw_scroll_up.jpg); } #scrolldown { position: absolute; top: 351px; left: 0px; width: 28px; height: 30px; z-index: 3; background-image: url(images/rw_scroll_down.jpg); } #scrollbar { position: absolute; top: 28px; left: 0px; width: 28px; height: 38px; z-index: 3; background-image: url(images/rw_scroll_bar.jpg); background-repeat: no-repeat; background-position: center; }
<body onload="scroller()"> <div id="div_zero"> <div id="div_main_bg"> <div id="div_text"> Lorem ipsum (...)Phasellus tincidunt tristique ligula. Mauris magna lorem, tincidunt eu, iaculis vitae, molestie in, risus. Donec ornare egestas pede. </div> </div> <div id="menu"><a href="#news"><img src="images/rw_news.jpg" alt="see: news" width="100" height="32" border="0"></a><a href="#about"><img src="images/rw_about.jpg" alt="see: about" width="98" height="32" border="0"></a><a href="#portfolio"><img src="images/rw_portfolio.jpg" alt="see: portfolio" width="128" height="32" border="0"></a><a href="#contact"><img src="images/rw_contact.jpg" alt="see: conctact" width="114" height="32" border="0"></a></div> </div> (...) </div> <map name="logo_adres2" id="logo_adres2"> <area shape="rect" coords="65,0,139,45" href="#"> </map> <map name="logo_adres1" id="logo_adres1"> <area shape="rect" coords="65,33,139,75" href="#"> </map> </body>