Xpoint
   [напомнить пароль]

Скроллинг текстов на страничке HTML

Метки: [без меток]
2008-01-10 16:10:52 [обр] Umclidet[досье]

Уважаемые господа!
Прошу оказать посильную помощь в решении одной задачи.
Задача:
Имеется вполне приличный и номально работающий скрипт скроллинга текста.
Создаёт небольшое окошко, в котором движется текст.
Вопрос: как это окошко вставить в ячейку таблицы?
 Другими словами, чтобы текст прокручивался в нужной ячейке таблицы.
Скажем, в этой ячейке(отмеченной синим)

http://pek.pisem.net/001.html

В "чистом виде" скрипт создаёт это окошко в левом верхнем углу листа и сдвинуть его мне не удаётся...

Буду весьма признателен за любое внятное пояснение.

Скрипт:

<html>
<head>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<script language="JavaScript1.2">

var message= new Array()

// Please read section 2 above on how the messages have to be configured.
// You may add as many messages as you like!
message[0]="Простой скрипт скролинга текста|Можно вставлять ссылки, количество сообщений неограниченно|http://case.agava.ru"

message[1]="Clinton Bashes NY Mayor|Speaking to 1,000 teacher aides on Saturday, Hillary Rodham Clinton attacked Mayor Rudolph Giuliani's positions on education.|http://case.agava.ru"

message[2]="House Bill Curbs Sex Slavery|A House bill designed to protect victims of the growing international sex slavery trade would allow child victims brought to this country to stay in America.|http://case.agava.ru"

// The height of the scrollerbox (pixels)
var scrollerheight=160

// The width of the scrollerbox (pixels)
var scrollerwidth=160

// The distance to the left border of the window (pixels)
var scrollertop=20

// The distance to the top border of the window (pixels)
var scrollerleft=20

// The padding between the scrollerbox and the text (pixels)
var scrollerpadding=10

// The width of the scrollerbox-border (pixels)
var backgroundborder=2

// The background-colour of the scrollerbox
var scrollerbgcolor="DDDDDD"

// Font attributes of the title
var font_titleface="Verdana"
var font_titlecolor="FF0000"
var font_titlesize=1

// Font attributes of the copytext
var font_copyface="Verdana"
var font_copycolor="660000"
var font_copysize=1

// standstill between the messages (milliseconds)
var standstillfix=3000

// Do not edit below this line
var cliptop=0
var clipbottom=scrollerheight-2*scrollerpadding
var clipleft=0
var clipright=scrollerheight

var i_message=0
var mes_joined
var mes_split
var contenttext
var contentbg

var totalheight=scrollerheight*(message.length)
var i_height=0
var step=1
var pause=20

var standstillflex=0

function initiate(){
 contenttext="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">"
 contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><br></td></tr>"
 for (i=0;i<=message.length-1;i++) {
  mes_joined=message[i]
  mes_split=mes_joined.split("|")
  contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><a href='"+mes_split[2]+"'><font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>"+mes_split[0]+"</font></a><br><font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"+mes_split[1]+"</font></td></tr>"
 }
 contenttext+="</table>"
 
contentbg="<table cellpadding=0 cellspacing=0 border="+backgroundborder+" width='"+scrollerwidth+"'><tr><td height='"+scrollerheight+"' bgcolor="+scrollerbgcolor+">&nbsp;</td></tr></table>"
 
if (document.all) {
  scrollertext.innerHTML=contenttext
  scrollerbg.innerHTML=contentbg
  document.all.scrollertext.style.posTop=scrollertop
  document.all.scrollertext.style.posLeft=scrollerleft
  document.all.scrollerbg.style.posTop=scrollertop-scrollerpadding
  document.all.scrollerbg.style.posLeft=scrollerleft-scrollerpadding
  document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
 }
 if (document.layers) {
  document.scrollertext.document.write(contenttext)
  document.scrollertext.document.close()
  document.scrollerbg.document.write(contentbg)
  document.scrollerbg.document.close()
  document.scrollertext.top=scrollertop
  document.scrollertext.left=scrollerleft
  document.scrollerbg.top=scrollertop-scrollerpadding
  document.scrollerbg.left=scrollerleft-scrollerpadding
  document.scrollertext.clip.left=clipleft
        document.scrollertext.clip.right=clipright
        document.scrollertext.clip.top=cliptop
        document.scrollertext.clip.bottom=clipbottom
 }
 scroll()
}

function scroll(){
 standstillflex=standstillfix
 if (document.all){
  if (i_height<scrollerheight) {
   i_height+=step
   cliptop+=step
   clipbottom+=step
   document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
   document.all.scrollertext.style.posTop-=step
   var timer=setTimeout("scroll()",pause)
  }

  else {
   if (document.all.scrollertext.style.posTop<=-(totalheight)) {
    document.all.scrollertext.style.posTop=scrollertop
    cliptop=0
    clipbottom=scrollerheight-2*scrollerpadding
    document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
    standstillflex=0
   }
   i_height=0
   clearTimeout(timer)
   var timer=setTimeout("scroll()",standstillflex)
  }
 }
 
if (document.layers){
   if (i_height<scrollerheight) {
    i_height+=step
    cliptop+=step
    clipbottom+=step
    document.scrollertext.clip.left=clipleft
          document.scrollertext.clip.right=clipright
          document.scrollertext.clip.top=cliptop
          document.scrollertext.clip.bottom=clipbottom
    document.scrollertext.top-=step
    var timer=setTimeout("scroll()",pause)
   }

  else {
   if (document.scrollertext.top<=-(totalheight)) {
    document.scrollertext.top=scrollertop
    cliptop=0
    clipbottom=scrollerheight-2*scrollerpadding
    document.scrollertext.clip.left=clipleft
          document.scrollertext.clip.right=clipright
          document.scrollertext.clip.top=cliptop
          document.scrollertext.clip.bottom=clipbottom
    standstillflex=0
   }
   i_height=0
   clearTimeout(timer)
   var timer=setTimeout("scroll()",standstillflex)
  }
 }
}

</script>

<style>

A {
color:AA0000;
}

A:Hover {
color:FF0000;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head>

<body onLoad="initiate()">

<div id="scrollerbg" style="position:absolute;top:-1000px">&nbsp;</div>
<div id="scrollertext" style="position:absolute;top:-1000px">&nbsp;</div>

<DIV id="deletethisdiv" style="position:absolute;top:18px;left:180"></DIV>

</body>
</html>

спустя 3 дня [обр] Филипп Ткачев(0/115)[досье]
А может стоит попробовать тег marquee?
спустя 25 минут [обр] Rion(0/14)[досье]

о боже.. столько (IE'шного) кода ради такой простой задачи..

Филипп Ткачев[досье], +1

спустя 1 час 22 минуты [обр] Umclidet[досье]

Честно признаюсь, не знал что marquee имеет аргуметы "down" и "up".
Нашёл только после предложенной вами,Филипп, идеи. Обязательно попробую, но хорошо помню, что даже при горизонтальном движении marquee "трясёт",т.е. ощущается эдакая дрожь при движении очень неприятная глазу.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег MARQUEE, параметр direction</title>
</head>
<body>
<marquee direction="down" bgcolor="#ffcc00">Lorem ipsum dolor sit amet...</marquee>
</body>
</html>

У JavaScript присутствует хоть какая-то плавность.

Далее, приведенный выше скрипт делает остановки на каждом сообщении - это очень удобно, когда в скроллируемом тексте имеются ссылки, иначе, за ссылко й не угнаться.
В любом случае, спасибо.

2Rion.
Буду рад любому предложенному вами решению с IE'шным кодом равно и без такового.
Приму с благодарностью.

спустя 7 дней [обр] Роман Войткевич[досье]
На LCD все равно дрожать будет, даже с js.
спустя 14 часов [обр] Umclidet[досье]
Роман, но я же сто раз встречал в сети совершенно нормально скроллирующиеся тексты.
В чём тут загвоздка?
Powered by POEM™ Engine Copyright © 2002-2005