在DIV中放置一个表单元格

Question

我已经搜索了帮助，但我似乎得到的是如何在表格单元格中定位DIV。我想在DIV中放置一个表格单元格。

在我的网站上，我有一个列出活动，地点，飞机等的“时间表”。我用一张桌子来表达这一点。该表非常宽（约14,000像素），并显示在约900像素宽的DIV中。这意味着观众需要左右滚动以查看不同时间的事件 - 这就是我想要的。

该表格是用HTML和一些基本的PHP混合编写的。

起初，每次观看者改变页面时，时间轴上的视图都是“重置”，所以它总是显示最早的时间/最左边的单元格。我问周围的一个修复会把表格最上面一排的特定单元格的文本放在DIV的中心 - 也就是说，如果观看者切换到关于越南的页面，那么在时间轴上，顶部具有文字“越南”的单行单元格将会集中在DIV中。如果观看者切换到另一个页面，比如说“1945到1950”，那么居中的单元格将是“1945到1950”。

有人帮助一些Javascript，使用焦点（）。这种方法很有效，但所需的文本现在在DIV的右侧。

然后我想，最好是将文本放在DIV的左边，以便相应的时间段开始在视图中。困惑？

这是我的一个网页： http://www.satans-kittens.net/korea.php

正如你所看到的，在时间轴上表/ DIV单词“韩国”是对DIV的权利。 我想在左边。

任何想法？

谢谢。

Answer 1

首先，我应该说我不完全相信我理解你的问题。但是，看起来您希望链接到韩国的链接出现在表格的左侧。这是我打算回答的。

将包含Korea链接的标签放置在文档树中的前一个单元格中。

例如：

<tr id="period"> 
    <td colspan="7"><a id="tlWWII" href="http&#58;//www.satans-kittens.net/wwii.php#tlWWII">World War II</a></td> 
    <td colspan="25"><a id="tl45250" href="http&#58;//www.satans-kittens.net/45to50.php#tl45250">1945 to 1950</a></td> 
    <td colspan="64"><a id="tlKorea" href="http&#58;//www.satans-kittens.net/korea.php#tlKorea">Korea</a></td> 
    <td colspan="24"><a id="tl53263" href="http&#58;//www.satans-kittens.net/53to63.php#tl53263">1953 to 1963</a></td> 
    <td colspan="132"><a id="tlVietnam" href="http&#58;//www.satans-kittens.net/vietnam.php#tlVietnam">Vietnam</a></td> 
    <td colspan="120"><a id="tlDisestab" href="http&#58;//www.satans-kittens.net/disestab.php#tlDisestab">The Last Crusade &amp; Phinal Phantoms</a></td> 
    <td colspan="50"></td> 
    <td colspan="10"></td> 
</tr> 

其中，我干脆搬到每个链接到前一个单元格。毫无疑问，你将不得不但是调整colspans，...

另一种选择是尝试浮动左右...

Answer 2

您可以使用此功能。将活动锚定到div的左侧。

看到它在这里工作

http://jsfiddle.net/kL2js/

function adjustScrollBar(id){ 
     var pos = $("#"+id).position(); 
     while(pos.left >0){ 
      pos = $("#"+id).position(); 
      $("#TL").scrollLeft($("#TL").scrollLeft()+1); 
     } 
} 

编辑：可能这会帮助你。

/* jQuery required */ 

function adjustScrollBar(id,parentid){ 
    var pos = $("#"+id).position(); 
    while(pos.left >10){ 
     pos = $("#"+id).position(); 
     $("#"+parentid).scrollLeft($("#"+parentid).scrollLeft()+1); 
    } 
} 
adjustScrollBar('tlKorea','TL'); 

/* jQuery not required */ 

function getOffset(el) { 
    var _x = 0; 
    var _y = 0; 
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
     _x += el.offsetLeft - el.scrollLeft; 
     _y += el.offsetTop - el.scrollTop; 
     el = el.parentNode; 
    } 
    return { top: _y, left: _x }; 
} 

function adjustScrollBar2(id,parentid){ 
    while(getOffset(document.getElementById(id)).left > 22){ 
    document.getElementById(parentid).scrollLeft += 1; 
    } 
} 


adjustScrollBar2('tlKorea','TL'); // jQuery not required 

只需调用其中一个函数，您可以使用当前活动锚点的ID调用焦点代码。

我以前从的getOffset SO质疑-http：//stackoverflow.com/questions/442404/dynamically-retrieve-html-element-xy-position-with-javascript

更新的jsfiddle - http://jsfiddle.net/kL2js/1/