View Full Version : Make scroll within a scroll

Nov 1st, 2009, 08:19 AM
That's the next challenge.

I had a wordy description, but then thought an on-hands demo is worth a 1000 words.

Here is the link: http://www.sovereignstates.net/StateLegislators/VSLegislators.htm

Be patient; it takes 20 seconds or so to load all the US State boundaries. They will be in color when it is ready.

Note how all states are in a list, and they scroll in the navigation pane on the left?

They are all in a cell within an outer table. I set the <td> in the outer table with the dimensions you see on the left (basically 260 pixels wide and 500 pixels high), and instructed overflow:scroll.

Now, click on Alabama's Senate. Be patient, there, too. (BTW, this data caches when you load it the first time, so it should speed up during subsequent visits.)

Okay, see all the Senators? Again, another table within the <td> of the table that holds the "Senate" label next to the checkbox to the left of it.

I want this inner table with Senators to scroll. Just like before, I set the <td> with dimensions (smaller ones, i.e. 150 pixels high) and instructed it to overflow:scroll.

It does not scroll in a new window.

Now, here is the bizarre part....

Close the Senate check box by clicking on it again. Everything goes away, but you can see the white space where it actually HAD the dimensions I instructed!

For whatever reason it would not scroll within those dimensions.

BTW: I have only been running this with Firefox, so if you have it, please open in Firefox, or you might find other glitches that are unrelated.


Nov 1st, 2009, 08:41 AM
Better yet, I put a border around the inner table for Senators. When it opens, it does not respect 200 pixel height dimension. When it closes, the data is hidden, and it collapses, leaving a border of the 200px height dimension I wanted.

Now, this table was set with a 200px height and overflow:scroll.

Something is odd.....

Nov 1st, 2009, 08:46 AM
Just a note on CSS scrolling divs;

border:1px solid black;
float: left;
overflow-x:hidden; /** hide bottom scroll bar **/

Nov 1st, 2009, 08:58 AM
Hey, student101. Thanks!

I tried your changes, and they pretty much did not change much, except to mess up my line spacing and cause my tree lines to be more disjointed.

The one good thing, though, was the hiding of the x-scroll bar. I did not know about that.

So, for that one, thanks. I am using it.

Wish I could get the inner scroll going....

Nov 1st, 2009, 09:37 AM
Just for "proof" of the wierdness, I added the width to the <td> element I want to make scroll. As you can see on the above link, when you expand Alabama Senators, there is no scroll within a scroll.

When you collapse it, you can see the border that was to contain the scroll.

Moreover, the dimensions and overflow:scroll(auto) are contained in the SAME class definition:

border:1px solid black;

Nov 1st, 2009, 10:17 AM

I found a solution that makes no sense to me!

Notice, I added float:right, and it limited the height!

border:1px solid black;

See at http://www.sovereignstates.net/StateLegislators/VSLegislators.htm

Still have an issue as bordered area remains when collapsing it back down.

Can anyone explain how float:right got this height attribute under control?

Also, any ideas on making the bordered area collapse as well?

Nov 1st, 2009, 10:55 AM
When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are "float: left", "float: right" or "float: none".

Nov 1st, 2009, 11:30 AM
Glad you're still here. Thanks for the PM. I guess we can continue on this thread. I just wanted to be sure you got the question in case you had left.

I sent you a new PM with a question.

Nov 1st, 2009, 11:56 AM
Have to install google earth to see what you mean...
Using tables and DIVs don't always work out as expected.
Tables are set widths and heights, divs on the other hand (even though they can be set) won't always play the part.
Either use divs or tables not both.

Still downloading this google earth thing...

The only time I use floated divs is to make the DIV stick (left or right)

What version of Firefox are you using?
Mine (Firefox 3.5.4) looks like the attached...

Nov 1st, 2009, 12:03 PM
Nutty doesn't begin to describe it, but it works, so it's just my brain that is not working.

Look at how I had to create an outer table to make it happen. I tried to go back and get rid of it and float the inner table, and that did not work. The "crazy" outer table is definitely necessary.

divString='<table><tr><td id="'+thisState+'Placemarks" class="outerTableForPlacemarksTable"><table class="placemarkTable">';

for (j=0;j<placemarkCount;j++)
divString+='<tr class="placemarkTableRow"><td
class="checkBoxColumn"><img class="placemarksCheckBox"



I mean, this is boggling! How did I ever get this far? Unbelievable!

That's why I need to know WHY this works. Basically, I got lucky!

Nov 1st, 2009, 12:14 PM
What role does google earth play?
All I get is a message box with text of the heading I clicked.

Ok the states hide after being clicked via the link, why?

Nov 1st, 2009, 12:33 PM
Unfortunately, the first time it loads a map, the map is slow. Once it has been loaded, it will remain cached and move more quickly.

On original start-up, the US map will load, and each state has a color. These states are polygons and the US Census Bureau has polygon coordinates for each state. We are talking point-by-point surveys drawing the outer boundaries of every state. Think how many borders have rivers or oceans. That's a lot of points it has to load!

OK. So, once the US Map is up, you can click on a state. Same rule. Gotta wait until the state loads. This loads state house and senate districts, depending on what you pick. Lots of points along the district borders as well.

Districts will be color-coded, and so I have to make the color on the mian US Map invisible to keep blue from overlaying yellow and making it look green. So, I simply make the state invisbible at the US level before I load in the districts for that state.

All the placemarks for the representatives' offices come up. You can then navigate and see where they are.

I have not reached the later phase, which will have balloons pop-up to display contact information, etc. about each representative. The idea is to surf around and get information about legislators in a map-based schema.

So, in short, you probably did nto wait long enough for it to load. It is my hope to speed it up, but I don't know if I'll be so lucky. If not, at least on initial load, the maps go into cache and display mopre quickly the next time.

Nov 1st, 2009, 12:35 PM
cool, glad you got it sorted.

Nov 1st, 2009, 12:46 PM
Yeah. Thanks!

Still have some kinks. Don't know why mouseover on each of the candidates fires a hit on the chamber.

The idea is if you click on the word "Senate," it will open Senate for that state and take you there.

If you already have Senate for the state open, it will not open it, but it will just take you there.

Well, because I've appended a bunch of child elements (being the official's names), once I mouseover the candidates' names, it acts as if I moused over the senate label. Not good.

I have specifically given a class name for the candidates, and I would think that should control the mouseover. However, it does not. Instead, the mouseover method for the senate label is still inherited.

Apparently, this is one situation where proper nesting is not being honored.

Thanks for all your help!