Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2009-07-08
7
580 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 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