Position a table cell within a DIV

Question

I have searched for help, but all I seem to get is how to position DIVs within a table cell. I would like to position a table cell within a DIV.

On my website, I have a "timeline" listing events, locations, aircraft and so on. I have used a table to present this. The table is very wide (about 14,000 px) and is displayed in a DIV about 900 px wide. This means the viewer needs to scroll from side to side to view events at different times - this is how I wanted it.

The table is written with a mix of HTML and some basic PHP.

At first, every time the viewer changed page, the timeline view "reset", so it always displayed the earliest time/left most cell. I asked around for a fix that would put the text of a specific cell of the top most row of the table in the centre of the DIV - That is, if the viewer switched to the page about Vietnam, then in the timeline, the top row cell with the text "Vietnam" would be centred in the DIV. If the viewer switched to another page, say "1945 to 1950", then the centred cell would be "1945 to 1950".

Someone helped with some Javascript, using focus(). This works, sort of, but the required text is now to the right of the DIV.

I then thought, it would be better to put the text on the left of the DIV, so that the respective time period starts in view. Confused?

Here is one of my pages: http://www.satans-kittens.net/korea.php

As you can see, in the timeline table/DIV the word "Korea" is to the right of the DIV. I would like to have it on the left.

Any ideas?

thanks.

Answer 1

First I should say that I am not entirely sure that I understand your question. However, it appears that what you would like is for the link to Korea to appear on the left side of the table. That is what I will intend to answer.

Put the tag that contains the Korea link in the previous cell in the document tree.

For example:

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

Wherein I simply moved each of your links up to the previous cell. You will undoubtedly have to adjust your colspans, however...

The other option is try floating right or left...

Answer 2

you can use this function. To the active anchor to left of the div.

see it working here

http://jsfiddle.net/kL2js/

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

EDIT: May be this will help you out.

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

just call one of these functions where you are calling your focus code with id of your current active anchor.

I used getOffset from SO question -http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-xy-position-with-javascript

updated jsfiddle - http://jsfiddle.net/kL2js/1/