I have the structure shown at the bottom of this post.
The scenario is that relative to an event on the page the scrollTo is
used to set the #top to the necessary cc_ DIV. The problem is that the
container in which all cc_'s are placed is 202px in height (can
change). When the scrollTo is instructed and the height of the
remaining cc_ DIVs left is less than this it corrupts and future
scrollTo's do not function correctly (the #cc_n doesn't scrollTo the
top of the DIV but further down!)
I suspect the solution will be somewhere in the region of
rather than just issuing the scrollTo...
- get the total height of all the divs starting with "cc_" after me
(being the current cc_ DIV)
- if the value above is higher than my parent DIV height then issue
the scrollTo
Sounds easy but any help with the syntax (or indeed a pointer if I'm
on the wrong track) would be splendid!
Cheers
Dylan
<div id="poiScrollPaneHolder">
<div class="jScrollPaneContainer" style="width: 235px; height:
202px;">
<div id="poiScrollPane" style="overflow: visible; height: auto;
width: 218px; padding-right: 5px; position: absolute; top: 0px;">
<div class="item" id="cc_0">
<div class="poi-title test">POI ONE</div>
<div class="text">POI Title Text here.</div>
</div>
<div class="item" id="cc_1">
<div class="poi-title test">POI TWO</div>
<div class="text">POI Title Text here.</div>
</div>
.
.
.
<div class="item" id="cc_15">
<div class="poi-title test">POI FIFTEEN</div>
<div class="text">POI Title Text here.</div>
</div>
</div>
</div>
<div class="jScrollPaneTrack" style="width: 12px; height: 178px; top:
12px;">
<div class="jScrollPaneDrag" style="width: 12px; height: 16px; top:
162px;">
<div class="jScrollPaneDragTop" style="width: 12px;"/>
<div class="jScrollPaneDragBottom" style="width: 12px;"/>
</div>
</div>
<a href="javascript:;" class="jScrollArrowUp" style="width:
12px;">Scroll up</a>
<a href="javascript:;" class="jScrollArrowDown disabled"
style="width: 12px;">Scroll down</a>
</div> <!-- see default.js/createPOI/poiMarkup -->
</div>
