Dynamic image sizes with horizontal scroll bar only

Question

How can I show only horizontal scroll bars in my div. I have images in the form of strip and I want to show only horizontal scroll bars for them. I do not want the vertical scroll bars to show up. Please help...

Here is my HTML

<div id="containersimg">
    <div id="wrapper">
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
    </div>
</div>

and here is my CSS

#wrapper {
    width: auto;
    height: 130px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 130px;
   overflow-x: scroll;
}

img {
   float: left;
    clear: none;
   margin: 5px;
}

I have created a fiddle to demonstrate what I want to achieve

Fiddle Link

EDIT 1: The only way I can think of doing it is by adding the width to the wrapper div, which I can't because the number and the widths of the images are dynamic

don't just lose hope, there **MUST** be a way :) – Mohammad Areeb Siddiqui Jul 03 '13 at 06:40 — Mohammad Areeb Siddiqui, Jul 03 '13 at 06:40

Mohammad Areeb Siddiqui · Accepted Answer · 2013-07-03T09:35:13.750

3

Try using overflow-x: scroll; overflow-y: hidden;

This CSS should be used on your div.

It will just show the x-axis scroll bar and hide the y-axis scroll bar. :)

If you want the images to come in one line then add display: inline; white-space: nowrap; to the div. See this.

Or use Lists. :) Like this.

edited Jul 03 '13 at 09:35

answered Jul 03 '13 at 06:30

Mohammad Areeb Siddiqui

9,795
14
71
113

Have you seen the fiddle? It will hide the content of the inner div that is exceeding its height – Naveed Butt Jul 03 '13 at 06:33
So you want the images as well to come in the line? – Mohammad Areeb Siddiqui Jul 03 '13 at 06:36
images to come in the line ? What do you mean ? – Naveed Butt Jul 03 '13 at 06:37
I think you are viewing on a higher resolution. On my resolution, the images got wrapped to the next line and no horizontal scroll is shown – Naveed Butt Jul 03 '13 at 06:46
1

can you use lists for that? it would be much easier! – Mohammad Areeb Siddiqui Jul 03 '13 at 06:56
Yes, I can... Can you share a fiddle with lists and this functionality – Naveed Butt Jul 03 '13 at 06:57
Sure... Guess Naveed doesnt like my Javascript Soloution :( – Jul 03 '13 at 10:09
no.. problem.. you gave the answer and helped the community.. that's our job! – Mohammad Areeb Siddiqui Jul 03 '13 at 10:09

score 2 · Answer 2 · answered Jul 03 '13 at 09:56

Ok this is my submition. Your code remains the same. I only added the overflow-y: hidden to the container img style

What i did is added about 6 lines of Javascript. Not Jquery, plain old Javscript and some clever math and this should work

I added a working fiddle .. Enjoy http://jsfiddle.net/vUEYG/167/

var container = document.getElementById('wrapper');
var TW=0,Width=0;      // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
    TW=TW+container.children[i].width;
Width=TW/container.children.length+10;  // The 10= Margin i.e 5 *2 
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);

score 0 · Answer 3 · edited Jul 03 '13 at 06:38

0

You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container.

Quick fiddle to demonstrate.

FIDDLE

CSS:

#wrapper {
    width: 500px;
    height: 110px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 135px;
   overflow-x: scroll;
}

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 90px;
   margin: 5px;
}

edited Jul 03 '13 at 06:38

Mohammad Areeb Siddiqui

9,795
14
71
113

answered Jul 03 '13 at 06:36

MAST3RMIND

592
2
14

you forgot to add the link :P – Mohammad Areeb Siddiqui Jul 03 '13 at 06:36
you can always edit your own response :) and this fiddle is from another answer from SOF and I have already seen that. Please see my **EDIT 1** above – Naveed Butt Jul 03 '13 at 06:38
1

You have shown fixed size squares/rectangles in the div, which is not my case. I can not judge the width of the wrapper div because of the dynamic size of the images – Naveed Butt Jul 03 '13 at 06:41
The way you are doing it currently there will not be any fix for this – Jul 03 '13 at 07:49
1

The total width of your images + margin exceeds the container boundaries. The overflow-x ia not an issue since the width or x-property of the images ie 100 px is within the container boundaries. but when you line 5 images of 100 px plus margins in a line it becomes more than 500 px which is why you HAVE to use the overflow-y option... – Jul 03 '13 at 07:51

Dinoop mathew · Answer 4 · 2013-07-03T07:30:55.973

0

try this code. Width of the #wrapper should be image width multiplied by the number of images

#wrapper {
    width: 500px;
    height:400px

}
#containersimg {
    background-color: #bbb;
    width: 340px;
    height: 130px;
    overflow-x: scroll; 
    overflow-y: hidden;
}
img 
{
    margin: 5px;
    display: inline-block;
}

Demo: http://jsfiddle.net/vUEYG/162/

edited Jul 03 '13 at 07:30

answered Jul 03 '13 at 07:17

Dinoop mathew

248
1
4
18

I have mentioned in the comments already that the image sizes are dynamic. Meaning, image width is not known – Naveed Butt Jul 03 '13 at 08:49
Is it ok to use javascript? – Jul 03 '13 at 09:13
You have to use javascript to determine the dynamic width. Please refer http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – Dinoop mathew Jul 19 '13 at 05:15

Dynamic image sizes with horizontal scroll bar only

4 Answers4