Results 1 to 9 of 9

Thread: Using vertical scroll

  1. #1
    Join Date
    Apr 2008
    Location
    The Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Using vertical scroll

    I am trying to make a div that only scrolls vertically. It must contain several thumbnails.

    Once my div reaches his maximum width, it continues on a new line. How can I prevent it from doing this? I can reach the effect I want by enclosing the pictures in a pre-container, but I dont think this is the right solution. Actually, it's really dirty. The must be a solution to do this with CSS... right?

    Hopefully somebody can help me out!

    Thnx in advanced...

    Haie!

  2. #2
    Join Date
    Jul 2007
    Location
    Azerbaijan, Baku
    Posts
    144
    Thanks
    11
    Thanked 27 Times in 25 Posts

    Default

    I think u can make invisible horizontal scroll

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    it cannot be done with css alone, you would need to use some javascript to insert a break tag between the images, however it would probably be a better solution to make all of your thumbnails the same size and either create a template or just put in the break tags manually

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by I-llumination View Post
    I am trying to make a div that only scrolls vertically. It must contain several thumbnails.

    Once my div reaches his maximum width, it continues on a new line. How can I prevent it from doing this? I can reach the effect I want by enclosing the pictures in a pre-container, but I dont think this is the right solution. Actually, it's really dirty. The must be a solution to do this with CSS... right?

    Hopefully somebody can help me out!

    Thnx in advanced...

    Haie!
    Do you want a vertical scroll or horizontal? The problem you describe shouldn't matter for a horizontal scroll.

    If you're looking for how to do the scroll, jQuery's scrollTo plus is amazing.

  5. #5
    Join Date
    Apr 2008
    Location
    The Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reactions.

    I think I haven't been really clear, my mistake. I meant the (in CSS terms) overflow-x. So I only want the <-----> scrollbar to be visible and the content should stay on one line. So the last thing I want is adding break-tags, cause that is exactly the behaviour I dont want. But thanks for the suggestion boogyman.

  6. #6
    Join Date
    Nov 2006
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    plz send me the code

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by I-llumination View Post
    Thanks for the reactions.

    I think I haven't been really clear, my mistake. I meant the (in CSS terms) overflow-x. So I only want the <-----> scrollbar to be visible and the content should stay on one line. So the last thing I want is adding break-tags, cause that is exactly the behaviour I dont want. But thanks for the suggestion boogyman.
    That's what I suspected. What threw me (and boogyman, I assume) off was that you have vertical written in the subject.

    Maybe you want to post some code or a link to your site where this is happening. I'm having trouble imagining what you're looking for.

    If you add overflow-x:auto to a div's CSS, the horizontal scroll bar should appear, given that it's contents are larger than the containing div. That means you need to explicitly state the width on both the container div and the contained div.

    Example:

    HTML Code:
    <div id="overflow">
         <div id="inner">
              Your Content
         </div>
    </div>
    CSS:
    Code:
    #overflow { overflow-x:auto; width:500px; }
    #inner { width:800px; }

  8. #8
    Join Date
    Apr 2008
    Location
    The Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've put the website online on this address:

    http://temp.purplepineapple.nl/

    If you go to "Gallery" you will see the images. I now did it the dirty way. Please use a browser (means != IE) for the best result. This is how I want to have it.

    The site isnt fully debugged, so if you see something that is'nt correct, please let me know.

    @Medyman: Your solution is a good one, the only problem is that the width of my innerdiv will be dynamic, depending on the number of images.

  9. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Hmm....I see.

    Question:
    If you're using javascript and AJAX so heavily anyway, why not move to a javascript solution?

    Some links that might be of interest:
    http://sorgalla.com/jcarousel/
    http://www.freewebs.com/flesler/jQuery.ScrollTo/


    Also, you don't have a valid doctype. You should fix that. That *might* fix some of your IE woes.

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
  •