SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Overflow as a replacement for i-frame?

    I am curious about something and I need some recommendations as my best route to take

    I need to have a list on the right side of the page that is scrollable and it will be a long list of 50 names that are linked. I would set this div to have overflow: auto

    Then on the right side of the page (or content section) will be another scollable pane where the results of whatever is clicked on the left will show up.

    Naturally, this screams out I-frame. But I am not sure if I can set that to overflow: auto also and then have the results from the link clicked show up in there or not.

    Thoughts?

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I very rarely use iframes but I did have this bit of code lying around that someone gave me

    Try it out it might be what you want.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    iframe {border:1px solid #fff;padding:0;margin:0;overflow:auto}
    </style>
    </head>
    <body>
    <script type='text/javascript'>
    function changePage(url) {
    document.getElementById('iframe').src = url;
    }
    </script>
    <iframe id='iframe' borders="none" src="iframesrc.htm"></iframe>
    <a href='#' onclick="changePage('test1.htm')">Test 1</a>
    <a href='#' onclick="changePage('test2.htm')">Test 2</a>
    </body>
    </html>
    Paul
    Edit:


    You'll probably need to tidy the js up for browsers that don't understand element by id etc.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'd also make the links go to the right page anyway, and have the onclick handler of the link set the page in the iframe. This way users will still be able to get to the info with JS disabled. Example:
    HTML Code:
    <!--use all the code Paul provided, but change the links to look more like this-->
    <a href='test2.htm' onclick="changePage(this.href); return false;">Test 2</a>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Good thinking Vinnie


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
  •