Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

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
0
bganoush
Asked:
bganoush
  • 3
  • 2
1 Solution
 
EddieShipmanCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
EddieShipmanCommented:
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
 
EddieShipmanCommented:
great...
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now