SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Coventry, England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A scrolling area of text without frames?

    Hi,

    I am trying to create a scrollable area of text without resource to iframes which I am currently using. This area would hold the main content of the page though it is simple text with just headers and sub heads and content so no complex formatting. It contains text pulled from a db so I would like it in the page so that it can be utlised by search engines plus I just don't like frames!!

    Failing that can someone remind me of the JScript to make sure that a page gets loaded in its parent frame set?

    The page concerned is
    http://www.ardencotespa.com

    Thanks
    Ian

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can achieve this with CSS and the overflow propert:
    Code:
    <head>
    <title>Overflow Demo</title>
    <style type="text/css">
    #mydiv {
      width: 200px;
      height: 100px;
      overflow: scroll;
      background-color: yellow;
    }
    </style>
    </head>
    
    <body>
    
    <div id="mydiv">
    <p>sample text... sample text...</p>
    <p>sample text... sample text...</p>
    <p>sample text... sample text...</p>
    <p>sample text... sample text...</p>
    <p>sample text... sample text...</p>
    <p>sample text... sample text...</p>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Coventry, England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks for that,

    Couple of comments you can set it to auto rather than scroll and then it will just put a scroll bar at the side.

    But!

    When I load it into mozilla, it renders width as 100% as being the width of the page rather than the rest of the width of page it is in as there is an image to the left of it, I can't give it a width in pixels as that wouldn't work on different screen widths.
    It seems to work fine in IE5.

    Page URL

    http://www.ardencotespa.com/test2.html

    Also is there any way to change the appearance of the scroll bars out of interest?

    Thanks for your help
    Ian
    Last edited by realpoint; May 17, 2002 at 05:25.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Queens, NY
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could also use layers if you wanted. Similar effect with CSS.
    Ian Gordon
    Founder / President&CEO
    Original Hosting Solutions
    http://www.originalhost.biz

  5. #5
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont use auto mainly for the reason that the scrollbars appear regardless of whether they are needed or not. If they arent being used on a specific page why waste the space having them there in the first place?

    You could use a JavaScript to detect the persons screen size and set the pixels based on the outcome of that. I personally use a pixel width to retain a specific look.

    To change the scrollbar colors you would use CSS (only supported by IE). The following is what I use on my page.

    Code:
    In the <style> tag.
    span.scroll {margin: 0px;
                 padding: 0px;
                 scrollbar-base-color: #ffffff;
                 scrollbar-arrow-color: #000000;
                 scrollbar-track-color: #ffffff;
                 scrollbar-dark-shadow-color: #ffffff;
                 scrollbar-3d-dark-color: #ffffff;
                 scrollbar-face-color: #ffffff;
                 scrollbar-highlight-color: #000000;
                 scrollbar-shadow-color: #000000;
                 scrollbar-3d-light-color: #000000;}
    
    In the <body> tag.
    <span class="scroll">Content here.</span>

  6. #6
    Non-Member Forlorn's Avatar
    Join Date
    Mar 2002
    Location
    San Diego, California
    Posts
    1,132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is also a way to do it with DHTML. CSS is not read by all browsers like Opera and Netscape (MAC).

  7. #7
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Forlorn
    CSS is not read by all browsers like Opera and Netscape (MAC).
    CSS has been around for 5 years now and has been supported in all of the major browsrs (to a certain extent) since the version 3s. Opera has excellent CSS support and even Netscape 4 can handle basic CSS rules. That said, the scrollbar stuff discussed in this thread is not supported by older browsers (but they sill still render the content just without scrollbars so at least it degrades gracefully).

  8. #8
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal scroll bar

    I tried the code with the in-line style tag in the second post in this thread and it displayed the way I would expect. The question I have is activating the horizontal scrollbar. It shows up, but when the content is wider than the box, and I would expect the horizontal scroll bar to activate, it doesn't and the content simply wraps, as though the horizontal scrollbar does not exist.

    I'm running IE 5.5/NT 4.

    Thanks
    Morning person by habit, not by nature.

  9. #9
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also set the overflow values of the <div>.

  10. #10
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <edit>
    The text will only overflow if the line will not break.

    Setting the overflow to auto will get rid of the scrolbars unless they're needed.

  11. #11
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting overflow to auto...

    What I see is the vertical scrollbar only. Softbreaks are put in the line and no horizontal scrollbar appears.

    B

    Code:
    <html>
    <head>
    <title>Overflow Demo</title>
    <style type="text/css">
    #mydiv {
      width: 200px;
      height: 100px;
      overflow: auto;
      background-color: yellow;
    }
    </style>
    </head>
    
    <body>
    
    <div id="mydiv">
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    
    </body>
    </html>
    Morning person by habit, not by nature.

  12. #12
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As it should be

    Try this:

    Code:
    <html>
    <head>
    <title>Overflow Demo</title>
    <style type="text/css">
    #mydiv {
      width: 200px;
      height: 100px;
      overflow: auto;
      background-color: yellow;
    }
    </style>
    </head>
    
    <body>
    
    <div id="mydiv">
    <p>blahoofpfftsplatsnortbonkbunkeckieckkiniblahoofpfftsplatsnortbonkbunkeckieckkiniblahoofpfftsplatsnortbonkbunkeckieckkiniblahoofpfftsplatsnortbonkbunkeckieckkini</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    <p>sample text... sample text...sample text...sample text...</p>
    
    </body>
    </html>
    That should wake up the h-scroll - there is no line break.

  13. #13
    SitePoint Guru
    Join Date
    Jul 2000
    Location
    Long Island, NY
    Posts
    755
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was eavsdropping on this thread and decided to try this. Worked fine in IE, Mozilla and degraded well in NN4, but was a mess in Opera with the box remaining the designated size but not scrolling, and the text just overflowing on top of other page contents. Has anyone else had that experience or have any ideas?

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Coventry, England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I have the same problem with Opera, in fact lots of problems with Opera with CSS which it often seems to have rather flaky suppport for, unfortunately in this case it doesn't even down grade nicely, but I am just going to feel guilty and ignore it with the site I am working on!

    Thanks for the hints and tips on this everyone.

    Ian


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
  •