Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts

    Making div Scrollable only on the width and not the height

    Hey,

    I would like to make a div scrollable for my thumbnails inside it.
    I would like to deliberately overflow the div with float:left images that will afterwards be accessible through the auto scroll I'm setting.



    What happens is that the div overflows the list items to the next line and doesn't keep inserting them on the same row.

    Here's the code for the div:
    Code:
    <div id="Thumbnails">
                    <ul id="ThumbnailsList">
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                    </ul>
                </div>
    The css:
    Code:
    #Thumbnails{width:597px; background-color:Black; height:90px;margin-top:5px; overflow:hidden;}
        ul#ThumbnailsList li{display:block;float:left;width:80px;height:80px;margin-left:8px;margin-right:8px;margin-top:5px;border:1px solid white;}
    Thanks in advance.
    Last edited by BarrMan; 06-02-2009 at 09:16 PM.

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Ok I found a way to do this.
    Code:
    <div id="Thumbnails">
                    <ul id="ThumbnailsList">
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                    </ul>
                </div>
    This is the html and in the css I modified the thumbnails style to have position relative and overflow hidden.
    Then I set the ul width to be more than the container(thumbnails).

    But my problem is now that I can't know how many images I'll have inside the thumbnails and I can't set a fixed width.
    When I tried setting the width to auto it didn't work.

    Is there a way to achieve what I want without setting a fixed size using css/html only? Or I'd have to calculate the width of the images using server side programming.

    Thanks in advanced.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    There are (non-standard but working) properties called overflow-x and overflow-y which can receive the same values as the regular overflow property.

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    I've tried that and but it didn't work but this matter is resolved already.

    Is there a way to achieve what I posted on my second comment?

    Thanks for the reply.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I guess CSS 3 has a really nice solution, but that won't help us yet (http://www.brunildo.org/test/Overflowxy2.html).

    If you are going to know the dimensions that you need then the answer is pretty simple, just set the <div> overflow to "auto" and specify a large enough width for your <ul> element to accomodate all thumbnails (without adding more than is needed because this will allow users to scroll whitespace just for the fun of it).

    In an uncertain environment where the number and/or size of thumbnails will change then you will need to use some javascript to set the width of the <ul> dynamically based on content. All the script has to do is count the number of <li> elements inside of the <ul> you are using, then multiply this by the width of one thumbnail (most easily accomplished if you use standard sizes for your thumbnails). Either way the same basic princpal is involved as far as the horizontal scrolling goes.

    Here it is with set widths:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sideways Scrolling for Thumbnails</title>
    <style type="text/css">
    * {border:0;margin:0;padding:0;}
    #scroll_box {height:72px;width:200px;overflow:auto;}
    #scroll_box img {height:48px;width:48px;border:1px solid black;}
    #scroll_box ul {padding-left:10px;list-style-type:none;width:480px;}
    #scroll_box ul li {display:block;float:left;margin-right:10px;}
    </style>
    </head>
    <body>
    <div id="scroll_box">
      <ul>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
        <li><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></li>
      </ul>
    </div>
    </body>
    </html>
    All you need to make this work "on the fly" is create or find a javascript function to do what I suggested above.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Thanks Rowsdower for setting me on the javascript direction. I've created a script which does exactly that. Here it is (if anyone needs):
    Code:
    function setProperWidth(o) {
            o = $(o);
            var w = 0;
            for (var i = 0; i < o.childNodes.length; i++) {
                if(o.childNodes[i].nodeType!=3)
                    w += o.childNodes[i].offsetWidth;
            }
            o.style.width = w + "px";
        }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •