Solved

How can i scroll images horizontally in a <div> layer?

Posted on 2009-07-08
7
578 Views
Last Modified: 2013-12-25
Hello, what i need to do is have a horizontally scrolling layer in my html that includes several images side by side with no vertical scrollbar.  the width of the horizontal scroll should probably be about 500 pixels and height about 120 pixels. basically, the same thing that youtube does vertically, i want to do horizontally.  the code below is an example of what i'm using but the images don't get placed side by side!  they are being placed one beneath the other, which is not what i want.

anyone have code that can achieve what i'm needing here?
thanks again!
<div style="border: 3px double #D2C8CA; overflow-x:scroll; overflow-y:hidden; width:150px; height:120px">
 
<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 
 
<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 
</div>

Open in new window

0
Comment
Question by:linuxrox
7 Comments
 
LVL 4

Accepted Solution

by:
eejones earned 500 total points
ID: 24804020
I noticed a typo in the word 'dislplay' in your code.

Using a table to hold the images works, if you are not opposed to using tables.

One thing to note: if you want the div to be tall enough to hold the images, you have to calculate in the height of the horizontal scrollbar which is about 25 pixels high (you can detect this exactly with JavaScript), and the width of any borders around the image (borders are added to the outside of the image).


<div style="border:solid 1px red; overflow-x:auto; overflow-y:hidden; width:500px; height:125px">
  <table border=1>
    <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
  </table>
</div>

Open in new window

0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24804031
I think you will have to do this with iframes, i tried to fix it but with only divs it's not working flawless. Why don't try a javascript carousel for this like this one, with this you can also animate it and more stuff: http://www.gmarwaha.com/jquery/jcarousellite/#demo 
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24804054
One solution would be to place the images in divs and set the "float: left" css style.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 4

Expert Comment

by:eejones
ID: 24804306
ChristoferDutz:

Before I posted earlier, II tried the float:left and it did not work. Can you see what is wrong with this attempt?

<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;">
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
</div>
0
 

Author Closing Comment

by:linuxrox
ID: 31601114
this i believe is the easiest and best option.
thanks again guys for the help and ideas.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24804343
Well I would assume, that you shoul propably surround everything with a big div, widening the layout ragne for the floats ...

I just made the div quite a little larger to be sure everything fits in.
<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;"> 
<div style="height:110;width:500">
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
</div>
</div>

Open in new window

0
 
LVL 4

Expert Comment

by:eejones
ID: 24804401
ChristoferDutz:

That code did not work for me. I am using Chrome. Perhaps that is the problem. Chrome behaves more like Safari, quite often.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question