Scrolling only one cell of a table...


Hi,

I have a table with two columns, on the left, I have a set of links which when clicked should scroll the column on the right similarly as when you have two frames where the links would just call up the #label of the frame on the right....

I want to do this with a table instead of a frame... The only reason is that I need for the links to be in the same file as the contents on the right column...

How can I make the cell on the right scroll independently from the cell on the right and how to I tell it with javascript to scroll it to a specific tag when someone clicks on the links on the left?

-- Bubba
bganoushAsked:
Who is Participating?
 
Eddie ShipmanAll-around developerCommented:
Is this something like what you want:

<table border="1">
  <tr>
    <td>
        <a href="#1">Link1</a>&nbsp;&nbsp;&nbsp;<a href="#2">Link2</a>&nbsp;&nbsp;&nbsp;<a href="#3">Link3</a>&nbsp;&nbsp;&nbsp;<a href="#4">Link4</a><br />
        <a href="#5">Link5</a>&nbsp;&nbsp;&nbsp;<a href="#6">Link6</a>&nbsp;&nbsp;&nbsp;<a href="#7">Link7</a>&nbsp;&nbsp;&nbsp;<a href="#8">Link8</a><br />
    </td>
    <td>
      <div style="overflow:scroll;width:100%;height:100">
        <table>
          <tr>
            <td><a name="1">Here is Link 1</a></td>
          </tr>
          <tr>
            <td><a name="2">Here is Link 2</a></td>
          </tr>
          <tr>
            <td><a name="3">Here is Link 3</a></td>
          </tr>
          <tr>
            <td><a name="4">Here is Link 4</a></td>
          </tr>
          <tr>
            <td><a name="5">Here is Link 5</a></td>
          </tr>
          <tr>
            <td><a name="6">Here is Link 6</a></td>
          </tr>
          <tr>
            <td><a name="7">Here is Link 7</a></td>
          </tr>
          <tr>
            <td><a name="8">Here is Link 8</a></td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>
0
 
smaccariCommented:
You could put a div in your cell, containing all your text, with a fixed height and an overflow:auto style attribute.
This will make scrollbars appear if text is higher than the div.

<td><div style="overflow:auto;height:200px">Your text here</div></td>

Then, for the scrolling, you could add divs for each text entry:

<td><div style="overflow:auto;height:200px">
<div id=text1>Text 1</span>
<div id=text2>Text 2</span>
<div id=text3>Text 3</span>
<div id=text4>Text 4</span>
</div></td>

Then, in your links:

<a href="javascript://" onclick="document.getElementById('text4').scrollIntoView()">Scroll to text 4</a>

So, a full little example:

<table>
<tr>
<td valign=top><a href="javascript://" onclick="document.getElementById('text4').scrollIntoView()">Scroll to text 4</a></td>
<td><div style="overflow:auto;height:40px">
<div id=text1>Text 1</span>
<div id=text2>Text 2</span>
<div id=text3>Text 3</span>
<div id=text4>Text 4</span>
</div></td>
</tr>
</table>
0
 
bganoushAuthor Commented:
Eddie,

I did try a DIV but didn't know that it was that simple...

Thanks...

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Eddie ShipmanAll-around developerCommented:
So, is that how you wanted it?
0
 
bganoushAuthor Commented:


Yes it is... thanks...  I'll test it out on my product and let you know how it worked.

-- Bubba
0
 
Eddie ShipmanAll-around developerCommented:
great...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.