Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Таблица с показом одной строки и линками показа других строк с перемещением строк вертикально</TITLE>
<META http-equiv=Page-Enter content=blendTrans(Duration=0.5)>
<META http-equiv=Page-Exit content=blendTrans(Duration=0.5)>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 4 Dec 2006 00:00:00 GMT">
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META http-equiv=Content-Language content=ru>
<META content=noindex name=robots>
<META content="javascript, JavaScript, скрипт, код, библиотека кодов, коды, вебмастер, webmaster, design, web-site, promotion, ad, banner, server, сайт, веб, дизайн, веб-дизайн, юзабилити, кнопки, навигация, ссылка, якорь, цвет, контраст, размер, стиль, оформление" name="keywords">
<META content="Javascript. Библиотека кодов более 1000 скриптов по любым разделам оформления веб-сайтов." name="description">
<script type="text/javascript">

scrollSteps = 10

timer=""
moz=document.getElementById&&!document.all

function scrollDiv(rowNum){
clearTimeout(timer)
myTableDiv=document.getElementById("mytablediv")
myTable=document.getElementById("mytable")

rowStop=myTable.cellSpacing-1 // 0 = top of cell, myTable.cellSpacing = bottom of cell

if(myTableDiv.scrollTop <= myTable.rows[rowNum].offsetTop-scrollSteps-rowStop){
myTableDiv.scrollTop=myTableDiv.scrollTop+scrollSteps
timer=setTimeout("scrollDiv('"+rowNum+"')",10)

// if bottom of table reached before anchor point
if(myTableDiv.scrollTop>(myTableDiv.scrollHeight-myTableDiv.offsetHeight)-scrollSteps){
clearTimeout(timer)
myTableDiv.scrollTop=myTableDiv.scrollHeight-myTableDiv.offsetHeight
}

}
else{

if(myTableDiv.scrollTop >= myTable.rows[rowNum].offsetTop+scrollSteps-rowStop){
myTableDiv.scrollTop=myTableDiv.scrollTop-scrollSteps
timer=setTimeout("scrollDiv('"+rowNum+"')",10)
}
else{
clearTimeout(timer)
myTableDiv.scrollTop=myTable.rows[rowNum].offsetTop-rowStop
}

}

function toTop(){
myTableDiv=document.getElementById("mytablediv")
clearTimeout(timer)
if(myTableDiv.scrollTop >= scrollSteps){
myTableDiv.scrollTop=myTableDiv.scrollTop-scrollSteps
timer=setTimeout("toTop()",10)
}
else{
clearTimeout(timer)
myTableDiv.scrollTop=0
}

}

</script>

</style>

</HEAD>
<BODY>
<center>
<a href="#null" onclick="scrollDiv(1)">Row 1</a> 
<a href="#null" onclick="scrollDiv(2)">Row 2</a> 
<a href="#null" onclick="scrollDiv(3)">Row 3</a> 
<a href="#null" onclick="scrollDiv(4)">Row 4</a> 
<a href="#null" onclick="scrollDiv(5)">Row 5</a> 
<a href="#null" onclick="toTop()">Scroll to Top</a>
<BR><BR>
<DIV id="mytablediv">
<table border="0" cellspacing=10 cellpadding=10 id="mytable">
<tbody>
<tr><td style="height:30px" align="center" colspan="2">Readme</td></tr>
<tr>
<td valign="top" colspan="2">
<b>Row 1</b></br>
This example shows how you can scroll to rows within a table.
<P>The script allows you to scroll up or down to the row required<br>
The basic concept is to nest the table in a div with a fixed height and then scroll the div to the row required
</td>
</tr>
<tr>
<td colspan="2"><b>Row 2</b></br>
You do not have to set a height for the TD cells but to get a uniform look for this example I have set the divs height to 200px, the table has a cell spacing of 10px and the TD cells height is set at 180px, this effectively centralises the row.
</td>
</tr>
<tr>
<td valign="top" colspan="2"><b>Row 3</b></br>
If the value of variable <b>rowStop</b> is set to <b>zero</b> the scrolling stops at the top of the row irrespective of the cell spacing or cell padding used.
<P>If you change the value of variable <b>rowStop</b> to <b>myTable.cellSpacing</b> the scrolling stops at the top of the row minus the cellspacing value as this example shows.
</td>
</tr>
<tr>
<td valign="top" width="50%"><b>Row 4</b></br>
You can use colspan as normal</td>
<td>
Or have more than 1 cell in a row
</td>
</tr>
<tr>
<td valign="top" colspan="2"><b>Row 5</b></br><img src=imagery/pic08.jpg"></td>
</tr>
<tr><td height="30" align="center" colspan="2">Footer</td></tr>
</tbody>
</table>
</DIV>
</center>

</BODY>
</HTML>