开发者

Scrolling a div containing a table

开发者 https://www.devze.com 2023-03-18 11:14 出处:网络
Here is a partial table that I am creating in a PHP script. DateDescriptionMonth Sun 3-14th Sunday of the ye开发者_StackOverflow社区ar- July

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">&nbsp;-  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.

0

精彩评论

暂无评论...
验证码 换一张
取 消