0

ヘルプを検索しましたが、表のセル内に DIV を配置する方法しかないようです。DIV 内にテーブル セルを配置したいと考えています。

私のウェブサイトには、イベント、場所、航空機などをリストした「タイムライン」があります。これを示すためにテーブルを使用しました。テーブルは非常に幅が広​​く (約 14,000 ピクセル)、幅が約 900 ピクセルの DIV に表示されます。これは、視聴者がさまざまな時間にイベントを表示するために左右にスクロールする必要があることを意味します。これが私が望んでいた方法です。

この表は、HTML といくつかの基本的な PHP を組み合わせて作成されています。

最初は、ビューアがページを変更するたびに、タイムライン ビューが「リセット」されるため、常に最も早い時間/最も左のセルが表示されました。表の一番上の行の特定のセルのテキストを DIV の中央に配置する修正を求めました。つまり、視聴者がベトナムに関するページに切り替えた場合、タイムラインの一番上にテキスト「Vietnam」を含む行セルは、DIV の中央に配置されます。閲覧者が別のページ、たとえば「1945 年から 1950 年」に切り替えた場合、中央のセルは「1945 年から 1950 年」になります。

focus() を使用して、誰かが Javascript を手伝ってくれました。これは機能しますが、必要なテキストは DIV の右側にあります。

次に、DIV の左側にテキストを配置して、それぞれの期間が表示されるようにする方がよいと考えました。混乱している？

ここに私のページの 1 つがあります: 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 question -http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-xy-position-with-javascriptからgetOffsetを使用しました

更新された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>

各リンクを前のセルに移動しただけです。ただし、コルスパンを調整する必要があることは間違いありません...

他のオプションは、右または左に浮かんでみてください...

于 2012-08-12T15:37:01.423 に答える