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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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>
bganoushAuthor Commented:
Eddie,

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

Thanks...

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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


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

-- Bubba
Eddie ShipmanAll-around developerCommented:
great...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.