• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Paul Clapham
  • Jeanne Boyarsky
Sheriffs:
  • Ron McLeod
  • Frank Carver
  • Junilu Lacar
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • fred rosenberger

Slider Woes

 
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am hoping someone can help me with this, because I'm pretty stuck.

I am using a JQuery slider - http://maaki.com/thomas/SmoothDivScroll/

What I want it for, is to have multiple small images lined up right next to each other, and each image has a section of writting underneath. about 25 images, 140px width each in a 1000px span.

I acheived this great by putting a table inside the div, and each image inside a <td>. This works

problem i have, is that i need the slider to start from the furthest RIGHT image, and slide automatically left. This is acheived by (if you look at the link above) - startAtElementId:

But if I am using a table inside the div, it is taking the TABLE as a element and not the TD... so it doesnt work. I know this because if I change every image to be inside tables (i.e 25 tables), it works... but obviously then the formatting is not how I want.

Can anyone think of a way I can use this slider (modifications to the js code or not), with 25 images that NEED to be right next to each other, no gap.

I guess this is more of a formatting question, than about the slider. Because I only know ONE way of doing what I want, and thats to have below



That makes each image next to each other, and the c:out writting is centralized perfectly under each image (because of the td width being the same as the image, it forces it underneath).

I cant think of any other way of doing this, and combatting the element problem of the slider I am having above.

Can anyone help?

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


You would to move your common markup into css classes so it is easier to edit, your code would look like

CSS


HTML


So much cleaner!

Eric
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Man, I just made it harder than it needs to be

CSS



HTML



Even cleaner, lol
 
MichaelJ McCabe
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Eric Pascarello wrote:Man, I just made it harder than it needs to be
.........
Even cleaner, lol




I never thought about doing a background-image, but, unless i'm missing something, its not going to work in my scenario. Im using Cewolf for the image, so my images actually look like this



That obviously doesnt work when placed in the url()
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
well can you just do

CSS


HTML



Eric
 
MichaelJ McCabe
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for your help, Unfortunatily, I'm not getting my desired look.

Although the graphs are there with the writting underneath perfectly, there is still a gap between each one. I tried giving one of the div containers a static width but that didnt work. Probably because the overall container of the slider from that link I gave you, has the width of the SLIDER, not the contents.

Ontop of them not being joined up. With 25 images on screen, 4 of them seem to go to a new line for no apparent reason, and when the page loads, the height of the whole slider area is twice as big, until you put the mouse over to scroll, then it ajusts.

 
MichaelJ McCabe
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I thought id post the whole section of my code so you get a better idea of it. This is what it looked like with the table and elements as td's

 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You need to add float:left to the css to force them to line up side by side.

Eric
 
MichaelJ McCabe
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Eric Pascarello wrote:You need to add float:left to the css to force them to line up side by side.

Eric



That doesnt seem to do it. I am using the CSS as described and

reply
    Bookmark Topic Watch Topic
  • New Topic