Scrollable area without using frames?

Discussion in 'HTML & Website Design' started by Johnburk, May 16, 2006.

  1. #1
    Is it possible to have a box (for example 400 pixels by 300 pixels) where text can be displayed and if it doesn’t fit in the box it is scrollable, but without the use of frames?
     
    Johnburk, May 16, 2006 IP
  2. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <style type="text/css">
    .iframe {
    overflow:auto;
    height:400px;
    width:300px;
    }
    </style>
    <div class="iframe">Text goes here</div>
    HTML:
     
    mad4, May 16, 2006 IP
    Johnburk likes this.
  3. Johnburk

    Johnburk Peon

    Messages:
    777
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you. I always though iframes are the same thing as frames and thus not search engine friendly.

    I am going to try your code. thank you

    It works:D

    Is there also a way to get the scrolls in a certain color, instead of the normal grey?
     
    Johnburk, May 16, 2006 IP
  4. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #4
    IFRAMES are seo-unfriendly. The code I use is for a fake iframe using css.

    CSS can do the coloured scrollbars
     
    mad4, May 16, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Those are a proprietary property set of IE (though I think Opera has some support for them), and are not a part of css.

    It is my opinion that the main scroll bars are part of the application (browser) and belong to the user. they should not be tampered with. I am not so adamant where interior scroll bars are concerned, as in this case.

    Just be aware that not all browsers will let you affect the scroll bars.

    cheers,

    gary
     
    kk5st, May 16, 2006 IP
  6. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #6
    -Abhishek-, May 16, 2006 IP
  7. Respiro

    Respiro Peon

    Messages:
    1,390
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Actionally, a scrollable are can be released with Javascript to. My question is: which is the better solution: CSS or Javascript?

    THX!
     
    Respiro, May 18, 2006 IP
  8. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #8
    CSS anyday :) ... Much more SE friendly ....
     
    -Abhishek-, May 18, 2006 IP
  9. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #9
    css :

    #scroll {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
    }

    html :

    <div id="scroll">
    Make text so that it will be more than box of 200px x 100px and it will make auto scroll area ! ... If you make text shorter there will be no scroll
    </div>
     
    iatbm, May 18, 2006 IP
  10. Respiro

    Respiro Peon

    Messages:
    1,390
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks! Your answer is what I thought that should be... ;)
     
    Respiro, May 18, 2006 IP
  11. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #11
    yes css all the way
     
    iatbm, May 18, 2006 IP
  12. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #12
    -Abhishek-, May 18, 2006 IP
  13. Respiro

    Respiro Peon

    Messages:
    1,390
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Your example is not for scrolling text...
     
    Respiro, May 18, 2006 IP
  14. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #14
    We are talking about Scrollable Area ... much like the frames ... and not scrolling text ... Look before you speak ...
     
    -Abhishek-, May 18, 2006 IP
  15. Respiro

    Respiro Peon

    Messages:
    1,390
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    0
    #15
    This is the original post. I think that we are talking about a fixed sized area. I don't want to argue... :)
     
    Respiro, May 18, 2006 IP
  16. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #16
    So what Have I done ?? It was depiction that this can be done without frames ... I am not supposed to be coding the entire work he asks for :)
     
    -Abhishek-, May 18, 2006 IP
  17. Respiro

    Respiro Peon

    Messages:
    1,390
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Right! I agree... :)
     
    Respiro, May 18, 2006 IP
  18. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #18
    wow like it is hard to write few lines ??? ... it is not like you will code entire site ... the OP just asked a little help ....

    oh yes btw .. i feel like giving you red rep ... it is coming now :D
     
    iatbm, May 18, 2006 IP
  19. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Nah this site was done for a friend ... who wanted her site created ....using this method ...incidentally this person asked the same thing here ...
    and I pasted the same links to him .... Red rep ..duhh ... go ahead ...
    "Edit" She started with frontpage and used frames ... i suggested this ....
    Abhishek
     
    -Abhishek-, May 18, 2006 IP
  20. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Btw ... I think I helped the person alright .... by providing him links to this page and the css file .. this must have given him an insight of what can be done and what cannot ....
    setting the "auto" values to 400px would take like 2 seconds or so ... and arent tht hard ....
    I don’t like to give too many exact examples, because I don’t like people to miss the big picture. I don’t want to teach people, I want people to understand what I mean and how they can benefit from it.
    Abhishek
     
    -Abhishek-, May 18, 2006 IP