Best way to scroll?

Discussion in 'HTML & Website Design' started by joyhog, Jun 15, 2006.

0
  1. #1
    So this is my first time here, sorry if this topic has been brought up before.
    I am working on a site that requires about 6 or 7 small scroll bars that will contain images and text. Similar to the one seen here http://www.foxhome.com/foxhome_main.html

    The problem is both the images and text below it will be updated every week. Can anyone recomend the best and easiest way to do this?
     
    joyhog, Jun 15, 2006 IP
  2. fsmedia

    fsmedia Prominent Member

    Messages:
    5,163
    Likes Received:
    262
    Best Answers:
    0
    Trophy Points:
    390
    #2
    You could use iframes to capture the external data and use a parser if the news is in an RSS format already, that would it would be transparent to the user
     
    fsmedia, Jun 15, 2006 IP
  3. Darrin

    Darrin Peon

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yep, IFrames would work in this case, and in each IFrame it would host it's "own page", so you would update the actual page that the IFrame hosts to get the data to change in each corresponding section.

    In the example you provided, as you most likely realize, they are using Flash, which is a different environment for development all together.

    Another option is to use a DIV tag, as in the following example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    #ScrollDiv {
    width:300px;
    height:200px;
    overflow: auto;
    background-color:#FFFFFF;
    border-top: 1px none #666666;
    border-right: 1px solid #666666;
    border-bottom: 1px none #666666;
    border-left: 1px solid #666666;
    padding-right: 1px;
    padding-left: 1px;
    }
    </style>
    </head>


    <body>
    <div id="ScrollDiv">
    <table width="80" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><p>afafas</p>
    <p>asfdsa</p>
    <p>fsa</p>
    <p>fsafsa</p>
    <p>fsa</p>
    <p>fsa</p>
    <p>fsaf</p>
    <p>sf</p>
    <p>safsad</p>
    <p>fsadf</p>
    <p>asfas</p>
    <p>fsa</p>
    <p>safsa</p>
    <p>fsa</p>
    <p>fsaf</p>
    <p>asfas</p>
    <p>fasfsa</p></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    Hope that helps with some ideas.
    -Darrin
     
    Darrin, Jun 15, 2006 IP
  4. joyhog

    joyhog Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    your right, iframes is probably the best way. I will play around with the div script to see if that might work, thanks. I have only played around with iframes though, is there anyway to apply custom scrolling? I don't mean just changing the color of the bar and arrows. Ideally I would want just two arrows, custom graphics? on either side and get rid of the bar altogether. Is this possible with iframes?
     
    joyhog, Jun 15, 2006 IP
  5. Darrin

    Darrin Peon

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I don't know that you could get rid of the scroll bar all together, since it is hosting another "window inside a window". This was a problem for me on another project, and I used a combination of the IFrame and DIV. I made my DIV small enough so that it never caused the IFrame to scroll. Then I could modify the content inside the frame to look how I wanted.

    As far as hiding the scroll bar, this might be difficult.

    Just some thoughts, but you may be able to change the colors of the scroll bar so that it is the same color as the background, then you just won't see it. Or, change the whole thing to be the same color as the background, add images for the up and down arrows, and use javascript to scroll the page on the click event of the images.

    -Darrin
     
    Darrin, Jun 15, 2006 IP