SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll Bar and Bottom of Page

    Sorry if this topic has been discussed in the past. I did try to search, but it doesn't seem to be working. I tried three times, and it resulted only in a blank page with Firefox saying "Done" and the bottom!

    Anyway, I would appreciate some insight into what is causing this: I have a page on which a scroll bar appears even though the page contents would actually fit on the opening Firefox window with no scroll bar needed. When I scroll down, it's just blank space below my footer. On every other page on my site, either the page stops or the scrolling stops at the end of my footer.

    What could cause a scroll bar to appear for a lot of blank space below my footer on one particular page?

    Without posting a lot of code when it might not be needed, I will say this. The page in question has a ul at the top with five list items. Clicking one of them makes a hidden, absolute div change (via JavaScript) to visible, relative and appear just below the ul. Clicking another item, returns the first item to hidden, absolute, and the newly clicked item becomes visible, relative, replacing the previous material in the same place on the page. In the code itself, these five div's follow the ul, one after the other.

    It's a nice effect, and everything works fine. I was proud of myself! But there's all this extra space below my footer.

    Any ideas?

    Thanks.

    Ken

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Essex, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ken, do you have a URL of your example?

    Would be easier to see the problem in action

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hello Ken,

    when you set an element to visibility:hidden, the space the element occupies is kept intact, hence why you have so much space below as all your book reviews are intact and sit there, just not visibly.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Hello Ken,

    when you set an element to visibility:hidden, the space the element occupies is kept intact, hence why you have so much space below as all your book reviews are intact and sit there, just not visibly.
    Thanks, kohoutek. However...I'm not sure that's correct. I started a lengthy thread in January on "relative" and "absolute" positioning:

    http://www.sitepoint.com/forums/showthread.php?t=657369

    In post #19, Ryan Reese said,

    It prevents the parent from expanding because hte parent doesn't even recognize it is there. Absolute elements are removed from the flow of the document and as such the parent has no idea it is there (nor do other elements, even other absolutes!)
    This seems to say that an absolute div would take up no space at all, since it does not expand its parent.

    Moreover, if you are correct, then the space taken up by the hidden absolute div's should be before the footer and push it way down. In my case, the empty space is after the footer.

    Of course, since I'm asking the questions, it's clear I'm no expert.

    Ken

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Do the test and remove your book review containers and see what happens.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    In there I was saying that if an element has position:absolute on it, the parent will not know it is there. No element on the page will, not even other absolute elements.

    I am at the college library right nwo and firebug isn't installed so try Kohutek's solution and see if it works
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the experiment does work--in the sense that when I take out the five book review div's, the page ends at the bottom of the footer the way it should. I was pretty sure that would happen, because I knew from when I wrote the page, that the problem began when I first put the absolute div reviews into the html page file. However, based on what I said in my previous post (#5), I just could understand why the absolute div's would do that.

    Also, I guess they don't push the footer down because, as Ryan said, they DON'T expand the parent. They just "overwrite" whatever is "underneath" them.

    And what determines the size of the empty space? The length of the longest review?

    But now the question is whether there is some way around the problem. To me, it looks unprofessional to have a page with massive amounts of space below the footer!

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd hide the book reviews only for those with Javascript enabled, meaning, I'd tell my Javascript function to append display:none; to all elements I don't want to have displayed by default, then remove the display:none declaration when someone clicks on the respective book review link.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, display: none worked beautifully! Thanks.

    Since I have 5 book reviews so far, that added 25 lines of code.

    Code:
       <li id="liBookReview4" class="white"
           onclick="document.getElementById('BookReview4').style.display='block';
                    document.getElementById('BookReview4').style.visibility='visible';
                    document.getElementById('BookReview4').style.position='relative';
                    document.getElementById('BookReview1').style.display='none';
                    document.getElementById('BookReview1').style.visibility='hidden';
                    document.getElementById('BookReview1').style.position='absolute';
                    document.getElementById('BookReview2').style.display='none';
                    document.getElementById('BookReview2').style.visibility='hidden';
                    document.getElementById('BookReview2').style.position='absolute';
                    document.getElementById('BookReview3').style.display='none';
                    document.getElementById('BookReview3').style.visibility='hidden';
                    document.getElementById('BookReview3').style.position='absolute';
                    document.getElementById('BookReview5').style.display='none';
                    document.getElementById('BookReview5').style.visibility='hidden';
                    document.getElementById('BookReview5').style.position='absolute';"
           onmouseover="changeToBlack('liBookReview4')"
           onmouseout="changeToWhite('liBookReview4')"
           style="cursor: pointer;">
           <i>The Distressing Days of the Judges</i> by Leon Wood (1975)
       </li>
    Five lines had to be inserted in this li: one to turn on "display: block" for this review and four to turn on "display: none" for the other four reviews. Similarly, I inserted five lines in each of the remaining li's.

    I'm wondering if this is the most elegant way of doing things. The element Id's on which each of these assignment statements operate are the div blocks that actually contain the reviews.

    I gave some thought to using JavaScript functions to change these three css style values (display, visibility, and position), but I'm not sure it would save much coding when all is said and done. Is there anything "unprofessional" or "amateurish" in the way I'm doing this?

    Thanks.

    Ken

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You might want to ask in the javascript line .

    You could do a loop and assign an array for each book review, and then loop through the 3 CSS changes . Also you might want to not be obtrusive and get rid of the onclick event

    The JS forum will patch you up
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Michigan
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can see how a set of arrays might work, but I'm not sure that would save much coding either. However, it was an interesting idea. To quote Spock, "I shall consider it."

    However, I'm not sure I follow your point of doing away with the onclick feature. The idea is to allow the user to select the book he would like to review. My ul operates like a menu. It just uses onclick instead of "a href" since all the reviews are on the same page and only one review is to be visible at a time.

    Ken

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You can create JS that will work in <script> tags in the head section (or some external file) and will utilize the onclick without actually having to add onclick into the HTML.

    It's called unobtrusive Javascript so I recommend you head on over there for a more detailed learning
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yesh, if you find yourself repeating lines like that, you know you're prolly doing it the Hard Way (re the JS). What you're looking for is called a "toggle".

    I agree with Ryan, you can get this looking nice in the JS section.


Bookmarks

Posting Permissions

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