how ta make a vertical thumbnail scroller horizontal

Discussion in 'Javascript' started by lolo, Jan 2, 2007.

  1. lolo

    lolo Guest

    hello. happy new year.

    I'm trying to build a website for my wife and she is adament on having
    a horizontal thumbnail scrolling div. great. I have a good vertical
    scrolling thing, but can't figure out how to make it scroll
    horizontally. It's probably real simple and I just can't figure it
    out....

    Here is the code I have so far:

    <html>
    <head>
    </head>
    <body>
    <script language='javascript' type='text/javascript'>

    var scrolling;

    function startScroll(theframe)
    {
    scrolling=setInterval('window.' + theframe +
    '.scrollBy(0,12);', 100);
    }

    function stopScroll()
    {
    clearInterval(scrolling);
    }

    function back(theframe)
    {
    scrolling=setInterval('window.' + theframe +
    '.scrollBy(0,-12);', 100);
    }

    </script>

    <a href='javscript:void(0);' onmouseover='back("this_iframe")'
    onmouseout='stopScroll()'>Scroll Up</a><br />
    <iframe src='' name='this_iframe' id='this_iframe'
    style='width: 50px; height: 50px;' frameborder='0' scrolling='no'
    /></iframe><br />
    <a href='javascript:void(0);'
    onmouseover='startScroll("this_iframe")'
    onmouseout='stopScroll()'>Scroll Down</a><br />

    <script language='JavaScript' type='text/javascript'>
    frames['this_iframe'].document.open();
    frames['this_iframe'].document.write("<html><head><body>");
    frames['this_iframe'].document.write("<img src='image1.jpg'
    style='width: 25px; height: 25px;' /><br />");
    frames['this_iframe'].document.write("<img src='image2.jpg'
    style='width: 25px; height: 25px;' /><br />");
    frames['this_iframe'].document.write("</body></html>");
    frames['this_iframe'].document.close();
    </script>

    </body>
    </html>

    I ain't no programmer, although I'm learnin, so don't rip me a new one
    if it's easy, pleeeeeas?
    lolo, Jan 2, 2007
    #1
    1. Advertising

  2. lolo schreef:
    > hello. happy new year.
    >
    > I'm trying to build a website for my wife and she is adament on having
    > a horizontal thumbnail scrolling div. great. I have a good vertical
    > scrolling thing, but can't figure out how to make it scroll
    > horizontally. It's probably real simple and I just can't figure it
    > out....
    >
    > Here is the code I have so far:
    >
    > <html>
    > <head>
    > </head>
    > <body>
    > <script language='javascript' type='text/javascript'>
    >
    > var scrolling;
    >
    > function startScroll(theframe)
    > {
    > scrolling=setInterval('window.' + theframe +
    > '.scrollBy(0,12);', 100);
    > }
    >
    > function stopScroll()
    > {
    > clearInterval(scrolling);
    > }
    >
    > function back(theframe)
    > {
    > scrolling=setInterval('window.' + theframe +
    > '.scrollBy(0,-12);', 100);
    > }
    >
    > </script>
    >
    > <a href='javscript:void(0);' onmouseover='back("this_iframe")'
    > onmouseout='stopScroll()'>Scroll Up</a><br />
    > <iframe src='' name='this_iframe' id='this_iframe'
    > style='width: 50px; height: 50px;' frameborder='0' scrolling='no'
    > /></iframe><br />
    > <a href='javascript:void(0);'
    > onmouseover='startScroll("this_iframe")'
    > onmouseout='stopScroll()'>Scroll Down</a><br />
    >
    > <script language='JavaScript' type='text/javascript'>
    > frames['this_iframe'].document.open();
    > frames['this_iframe'].document.write("<html><head><body>");
    > frames['this_iframe'].document.write("<img src='image1.jpg'
    > style='width: 25px; height: 25px;' /><br />");
    > frames['this_iframe'].document.write("<img src='image2.jpg'
    > style='width: 25px; height: 25px;' /><br />");
    > frames['this_iframe'].document.write("</body></html>");
    > frames['this_iframe'].document.close();
    > </script>
    >
    > </body>
    > </html>
    >
    > I ain't no programmer, although I'm learnin, so don't rip me a new one
    > if it's easy, pleeeeeas?
    >


    1. Probably place the thumbnails side-by-side by removing the <br />
    newlines.
    2. Change scrollBy(0,12) to scrollBy(12,0) and scrollBy(0,-12) to
    scrollBy(-12,0). (The first value is the horizontal scroll, the second
    value is the vertical scroll.)
    3. Probably change the words Scroll Up and Scroll Down to Scroll Left
    and Scroll Right.
    4. Let me know if anything doesn't work, I didn't test this.
    Frederik Vanderstraeten, Jan 4, 2007
    #2
    1. Advertising

  3. lolo

    Dan Guest

    Wives!

    I am looking for the same thing. Not for my wife though (thank God)

    I've been trying to do it with a div but your iframe technique looke
    interesting and I semi-accomplished horizontal scrolling by making th
    follwing changes.

    First of all you have to reverse the co-ordinates in both scrollBy(
    calls;

    in the startScroll function, change "scrollBy(12,0)" t
    "scrollBy(0,12)"

    and

    in the back function change, "scrollBy(-12,0);" to "scrollBy(0,-12);"

    Then where the pictures are being added, I removed the <br /> tag
    after every thumbnail.

    Now here's where it all goes sour. Even though I removed the <br /
    tags after each thumbnail, the iframe still displays the thumbnail
    vertically (the next thumbnail is displayed below the previous one
    not beside it). I am thouroughly embarrased to report that the onl
    way i can get around this is to use a table... So I drop a tabl
    opener and closer in with the iframe's body tags then surround eac
    thumbnail with column tags (<tr>thumb</td>).
    If anyone knows CSS to make images display horizontally inline within
    narrow div or iframe, please step forward...

    Here is my version:

    <html>
    <head>
    </head>
    <body>
    <script language='javascript' type='text/javascript'>

    var scrolling;

    function startScroll(theframe){
    scrolling=setInterval('window.' + theframe + '.scrollBy(12,0);', 100);
    }

    function stopScroll(){
    clearInterval(scrolling);
    }

    function back(theframe){
    scrolling=setInterval('window.' + theframe + '.scrollBy(-12,0);'
    100);
    }

    </script>

    <a href='javscript:void(0);' onmouseover='back("this_iframe")
    onmouseout='stopScroll()'>Scroll Up</a>
    <br />
    <iframe src='' name='this_iframe' id='this_iframe' style='width: 50px
    height: 50px;' frameborder='0' scrolling='no'/>
    </iframe><br />
    <a href='javascript:void(0);' onmouseover='startScroll("this_iframe")
    onmouseout='stopScroll()'>Scroll Down</a><br />

    <script language='JavaScript' type='text/javascript'>
    frames['this_iframe'].document.open();
    frames['this_iframe'].document.write("<html><head><body><TABLE><TR>");
    frames['this_iframe'].document.write("<TD><img src='image1.jpg
    style='width: 25px; height: 25px;'></TD>");
    frames['this_iframe'].document.write("<TD><img src='image2.jpg
    style='width: 25px; height: 25px;'></TD>");
    frames['this_iframe'].document.write("</TR></TABLE></body></html>");
    frames['this_iframe'].document.close();
    </script>

    </body>
    </html

    --
    Da
    Visit http://www.hostingforum.ca toda
    Dan, Jan 14, 2007
    #3
  4. lolo

    Charlie Guest

    The problem with horizontal strips is that the browser will fold the
    thumbnail images as soon as they fill the horizontal width. I found
    that I could defeat that behavior using the "white-space" style. I
    created a div and gave it the class "imageStrip" and then used this
    style:

    ..imageString { white-space: nowrap; overflow: auto; width: 95%; }

    Then I added the thumbnail images to the div. The "white-space: nowrap"
    style prevented them from wrapping and the "overflow: auto" style
    generated a scrollbar when needed.

    My own wife suggest this and I looked up the documentation for the
    "white-space" style and told her that it would not work because the
    documentation I read clearly stated that the *text* would not wrap.
    But, it does work both on Firefox and IE. Of course, as someone
    mentioned, you can also do this with a table. This seems a litle
    cleaner.
    Charlie, Jan 15, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sumit
    Replies:
    3
    Views:
    5,493
    Alvin Bruney
    Nov 18, 2003
  2. Alex D.

    horizontal news scroller?

    Alex D., Aug 30, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    1,268
    Alex D.
    Aug 30, 2005
  3. David Lozzi
    Replies:
    1
    Views:
    487
    john smith
    Feb 1, 2006
  4. Ian Hurst (Troyka)

    horizontal scroller with images

    Ian Hurst (Troyka), Feb 27, 2004, in forum: HTML
    Replies:
    8
    Views:
    2,728
    Toby A Inkster
    Feb 28, 2004
  5. marco

    left - right horizontal scroller

    marco, Jun 16, 2006, in forum: Javascript
    Replies:
    8
    Views:
    154
    Jonathan
    Jun 20, 2006
Loading...

Share This Page