Scrolling a div containing a table
Here is a partial table that I am creating in a PHP script.
Date Description Month
Sun 3 - 14th Sunday of the ye开发者_StackOverflow社区ar - July
Mon 4 - Week 14 of the year - July
or Saint Elizabeth of Portugal
Tue 5 - Week 14 of the year - July
or Saint Antony Mary Zaccaria, Priest
Wed 6 - Week 14 of the year - July
or Saint Maria Goretti, Virgin, Martyr
Thu 7 -
Fri 8 -
Sat 9 - Week 14 of the year - July
or Saint Augustine Zhao Rong and
his Companions, Martyrs
Sun 10 - 15th Sunday of the year - July
Mon 11 - Saint Benedict, Abbot - July
Tue 12 - Week 15 of the year - July
Wed 13 - Week 15 of the year, Saint Henry - July
Thu 14 - Week 15 of the year - July
or Saint Camillus of Lellis, Priest
Fri 15 - Saint Bonaventure, Bishop, Doctor - July
The HTML will look like this.
<div class="scrollBoxYe">
<table class="grid">
<tr><td>
<div name="20110703" class="lcday">
<div class="lcright">Sun 3</div>
<div class="lcmid"> - 14th Sunday of the year</div>
<div class="lcright">- July</div>
</div>
</td></tr>
.
.
.
.
</table>
</div>
The name for the div with class="lcday" will be an anchor tag. I'd like to be able to scroll the scrollBoxYe div to the row that matches the current day. Should the name anchor be in the div or in the tr element?
Is the onload event useful for the div element? I want to be able to scroll the div automatically without any click event. If the onload event isn't available what is the best way to load the div automatically. I prefer to avoid doing this with the page body onload because there are different views loaded on the same page.
Once I find the right event to load the div automatically, I want to call a function like this one.
function scrolltoanchor(row){
document.getElementById("scrollBoxYe").scrollTop = document.getElementById(row).offsetTop
}
The function parameter is the anchor name.
The most important questions are:
- how to define the anchor to be able to scroll to the right row.
- the right event to call the scrolling function (body onload not an option).
I do not know whether the use of jquery can be an option, but i think it's much more easier. This fiddle should work.
精彩评论