...

View Full Version : Resolved Making div Scrollable only on the width and not the height



BarrMan
06-02-2009, 06:13 PM
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.

http://img60.imageshack.us/img60/1687/52900058.jpg

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:

<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:

#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.

BarrMan
06-02-2009, 08:47 PM
Ok I found a way to do this.

<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.

VIPStephan
06-02-2009, 08:50 PM
There are (non-standard but working) properties called overflow-x and overflow-y which can receive the same values as the regular overflow property.

BarrMan
06-02-2009, 08:54 PM
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.

Rowsdower!
06-02-2009, 08:56 PM
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:
<!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.

BarrMan
06-02-2009, 09:16 PM
Thanks Rowsdower for setting me on the javascript direction. I've created a script which does exactly that. Here it is (if anyone needs):

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";
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum