0

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

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

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

起初，每次查看者换页时，时间线视图都会“重置”，所以它总是显示最早的时间/最左边的单元格。我询问了一个修复程序，将表格最顶行的特定单元格的文本放在 DIV 的中心 - 也就是说，如果查看器切换到有关越南的页面，那么在时间轴中，顶部带有文本“越南”的行单元格将在 DIV 中居中。如果查看者切换到另一个页面，比如“1945 到 1950”，那么居中的单元格将是“1945 到 1950”。

有人帮助使用了一些 Javascript，使用了 focus()。这在某种程度上可行，但所需的文本现在位于 DIV 的右侧。

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

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

如您所见，在时间线表/DIV 中，“韩国”一词位于 DIV 的右侧。我想把它放在左边。

有任何想法吗？

谢谢。

4

2 回答 2

0

你可以使用这个功能。到 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 调用焦点代码的地方调用这些函数之一。

我使用了来自 SO 问题的 getOffset -http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-xy-position-with-javascript

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

于 2012-08-12T17:14:33.160 回答
0

首先我应该说我不完全确定我理解你的问题。但是，您似乎希望将指向韩国的链接显示在表格的左侧。这就是我打算回答的问题。

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

例如：

<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>

其中我只是将您的每个链接移至上一个单元格。毫无疑问，你必须调整你的 colspan，但是......

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

于 2012-08-12T15:37:01.423 回答