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

    new day, new questions

    so i have this website:

    it works only on FF for now (chrome is not fixed yet, and IE, oh well, i have some blessings for the MS guys....).

    anyway -
    i want the content in the middle to be able to scroll up and down with the broswer scroll bar (if youll hit the link on the bottom of the page, more content will be displayed. its a "read more" thing.)
    any way i want hit to be hidden under the menu at the top and at a certain line on the bottom (so the div borders are set and you can scroll inside it with a scroll bar located on the broswer scroll bar (not inside the div).

    Any ideas?


  2. #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Thanked 130 Times in 129 Posts
    It will be a mess! Just to warn you.

    First you have to change the top-position of you div so it start lower than the menu.

    Second you will need to assign a negative z-index to the div so it will stay under the menu.

    And then the trickky part comes:

    To hide the text that should not appear until you scroll, you will need another div that starts just below the wanted bottom and all the way down to the bottom of the viewport.
    The needed height of this div, depends on the actual size of the users viewport, which changes with the users resolution and number of toolbars, so this must be calculated upon loading by javascript and assigned to the div.
    And you will need a bottom-padding on the text-div of the same height, so it is possible to scroll down to the last line of text.

    It can really be a mess.

    A better solution might be to make the scrollbar appear as far to the right as possible.

    Try this
    <div id="scrollDiv" style="position:absolute;top:250px;left:150px;right:0px;height:350px;width:auto;overflow:auto;overflow-x:hidden;">
    <div id="textDiv" style="position:relative;top:0px;left:0px;width:600px;margin:auto;">
    Insert Content Here


Posting Permissions

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