Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post

    Make scroll within a scroll

    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/State...egislators.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.

    Thanks!

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.....

  • #3
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Just a note on CSS scrolling divs;
    Code:
     
    #navigationPanel{
     color:blue;
     height:500px;
     width:260px;
     vertical-align:top;
     border:1px solid black;
     float: left;
    }
    #allStates{
     height:460px;
     position:relative;
     vertical-align:top;
     overflow:scroll;
     overflow-x:hidden; /** hide bottom scroll bar **/
    }
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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....

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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:

    Code:
    .outerTableForPlacemarksTable
    {
    	height:200px;
    	width:180px;
    	/*table-layout:fixed;
    	position:relative;*/
    	border:1px solid black;
    	overflow:auto;
    }

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    OMG!!!

    I found a solution that makes no sense to me!

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

    Code:
    .outerTableForPlacemarksTable
    {
    		height:200px;
    		width:180px;
    		/*table-layout:fixed;
    		position:relative;*/
    		border:1px solid black;
    		overflow:auto;
    		float:right;
    }
    See at http://www.sovereignstates.net/State...egislators.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?

  • #7
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    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".
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #9
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    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)
    http://css.maxdesign.com.au/floatuto...troduction.htm

    Edit: What version of Firefox are you using?
    Mine (Firefox 3.5.4) looks like the attached...
    Attached Thumbnails Attached Thumbnails Make scroll within a scroll-site1.jpg  
    Last edited by student101; 11-01-2009 at 12:06 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #10
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

    Code:
    divString='<table><tr><td id="'+thisState+'Placemarks" class="outerTableForPlacemarksTable"><table class="placemarkTable">';
    
    for (j=0;j<placemarkCount;j++)
    {
    	placemarkName=placemarks.item(j).getName();
    	divString+='<tr class="placemarkTableRow"><td 
            class="marginSpaceBeforeCheckBox"></td><td 
            class="dottedCheckBoxColumn">'+midBranch+'</td><td 
            class="checkBoxColumn"><img class="placemarksCheckBox" 
            src="VSCheckBoxSelected.jpeg"/></td><td
            class="placemark">'+placemarkName+'</td></tr>';  
    
    }
    
    divString+='<table></td></tr></table>';
    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!

  • #11
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    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?
    Last edited by student101; 11-01-2009 at 12:19 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #12
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #13
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    cool, glad you got it sorted.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • Users who have thanked student101 for this post:

    jeffmatthews (11-01-2009)

  • #14
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •