Layout issue regarding a JQuery smoothDivScroll
- by MichaelMcCabe
Hi all.
I have been scratching my head for a while on this one. I dont really play around with HTML formatting that often.
I have a smoothDivScroll using JQuery (http://maaki.com/thomas/SmoothDivScroll/) to scroll through dynamically generated images.
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 7560px 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 which will not alow me to set startAtElementId.
<div class="scrollableArea">
<table width="7560px" class="index-body">
<tr>
<td width="140px"><center><a onclick="__doPostBack('getEarlierDate');" ><img src="../images/olderGraphs.gif" width="140" height="60"></a>Click for more</center></td>
<td width="300px"><center><a onclick="__doPostBack('chartClicked25');" ><cewolf:img chartid="verticalbar25" renderer="cewolf" width="300" height="60"/></a><c:out value="${date25}"/></center></td>
<td width="300px"><center><a onclick="__doPostBack('chartClicked24');" ><cewolf:img chartid="verticalbar24" renderer="cewolf" width="300" height="60"/></a><c:out value="${date24}"/></center></td>
and so on
