Таблица с показом только одной графы и линки показа других граф с перемещением граф горизонтально Библиотека Javascript. SE@RCHER

<!DOCTYPE html> <HTML><HEAD><TITLE>Таблица с показом только одной графы и линки показа других граф с перемещением граф горизонтально</TITLE> <META HTTP-EQUIV="Expires" CONTENT="Mon, 4 Dec 2006 00:00:00 GMT"> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <script type="text/javascript"> scrollSteps = 10 timer="" function scrollDiv(cn){ colNum=cn clearTimeout(timer) myTableDiv=document.getElementById("mytablediv") myTable=document.getElementById("mytable") colStop=myTable.cellSpacing-1 if(myTableDiv.scrollLeft <= myTable.rows[0].cells[colNum].offsetLeft-scrollSteps-colStop){ myTableDiv.scrollLeft=myTableDiv.scrollLeft+scrollSteps timer=setTimeout("scrollDiv('"+colNum+"')",10) if(myTableDiv.scrollLeft>(myTableDiv.scrollWidth-myTableDiv.offsetWidth)-scrollSteps){ clearTimeout(timer) myTableDiv.scrollLeft=myTableDiv.scrollWidth-myTableDiv.offsetWidth } } else{ if(myTableDiv.scrollLeft >= myTable.rows[0].cells[colNum].offsetLeft+scrollSteps-colStop){ myTableDiv.scrollLeft=myTableDiv.scrollLeft-scrollSteps timer=setTimeout("scrollDiv('"+colNum+"')",10) } else{ clearTimeout(timer) myTableDiv.scrollLeft=myTable.rows[0].cells[colNum].offsetLeft-colStop } } } function toTop(){ myTableDiv=document.getElementById("mytablediv") clearTimeout(timer) if(myTableDiv.scrollLeft >= scrollSteps){ myTableDiv.scrollLeft=myTableDiv.scrollLeft-scrollSteps timer=setTimeout("toTop()",10) } else{ clearTimeout(timer) myTableDiv.scrollLeft=0 } colNum=0 } colNum=0 function auto(d){ myTable=document.getElementById("mytable") if(d==1){ if(colNum==myTable.rows[0].cells.length-1){ colNum=myTable.rows[0].cells.length-1 return } colNum++ } else{ colNum-- if(colNum<0){ colNum=0 return } } scrollDiv(colNum) } </script> <style> #mytablediv{width:310px;overflow:hidden;border:1px solid #8e8462} #mytable{width:1200px;line-height:20px;border:1px solid #c9bda9} #mytable td{border:1px solid #c9bda9} </style> </HEAD><BODY><A href="#null" onclick="auto(0)"></A> <A href="#null" onclick="scrollDiv(0)">Column 1</A> <A href="#null" onclick="scrollDiv(1)">Column 2</A> <A href="#null" onclick="scrollDiv(2)">Column 3</A> <A href="#null" onclick="scrollDiv(3)">Column 4</A> <A href="#null" onclick="toTop()">Home</A> <A href="#null" onclick="auto(1)">>></A> <BR><BR> <DIV id="mytablediv"> <TABLE border="0" cellspacing=10 cellpadding=5 id="mytable"><TBODY> <TR><TD align="center">Column 1</TD><TD height="30" align="center">Column 2</TD><TD height="30" align="center">Column 3</TD><TD height="30" align="center">Column 4</TD></TR><TR><TD valign="top">This example shows how you can scroll to columns within a table.<BR>The script allows you to scroll left or right to the column required</TD><TD valign="top">This example shows how you can scroll to columns within a table.<BR>The script allows you to scroll left or right to the column required</TD><TD valign="top">This example shows how you can scroll to columns within a table.<BR>The script allows you to scroll left or right to the column required</TD><TD valign="top">This example shows how you can scroll to columns within a table.<BR>The script allows you to scroll left or right to the column required</TD></TR><TR><TD>The scroll point is to the left of the td cell irrespective of the cell spacing or cell padding used</TD><TD>The scroll point is to the left of the td cell irrespective of the cell spacing or cell padding used</TD><TD>The scroll point is to the left of the td cell irrespective of the cell spacing or cell padding used</TD><TD>The scroll point is to the left of the td cell irrespective of the cell spacing or cell padding used</TD></TR><TR><TD valign="top">If the value of variable <B>colStop</B> is set to <B>zero</B> the scrolling stops tp the left of the column irrespective of the cell spacing or cell padding used. <BR>If you change the value of variable <B>colStop</B> to <B>myTable.cellSpacing</B> the scrolling stops at the left of the column minus the cellspacing value as this example shows.</TD><TD valign="top">If the value of variable <B>colStop</B> is set to <B>zero</B> the scrolling stops tp the left of the column irrespective of the cell spacing or cell padding used. <BR>If you change the value of variable <B>colStop</B> to <B>myTable.cellSpacing</B> the scrolling stops at the left of the column minus the cellspacing value as this example shows.</TD><TD valign="top">If the value of variable <B>colStop</B> is set to <B>zero</B> the scrolling stops tp the left of the column irrespective of the cell spacing or cell padding used. <BR>If you change the value of variable <B>colStop</B> to <B>myTable.cellSpacing</B> the scrolling stops at the left of the column minus the cellspacing value as this example shows.</TD><TD valign="top">If the value of variable <B>colStop</B> is set to <B>zero</B> the scrolling stops tp the left of the column irrespective of the cell spacing or cell padding used. <BR>If you change the value of variable <B>colStop</B> to <B>myTable.cellSpacing</B> the scrolling stops at the left of the column minus the cellspacing value as this example shows.</TD></TR></TBODY> </TABLE></DIV> </BODY></HTML>