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