Thursday, November 1, 2007

How to control HTML element when it got focused

Today, a little bit difficult problem was resolved. The original question is like this:

  • Give a page which mainly contains 2 DIV areas and both have a table element inside it. Each of the DIV tag are set to hidden scroll bar, and these 2 tables are exactly have the same setting(cellspacing, cellpadding, etc. ), so that's making these 2 tables looks like an excel file which have a freezeed  bar.

  • There are many select boxes and check boxes in these 2 tables, and each element has a tab index value assigned, so that, tab key will navigate element between 2 tables.

  • There is another div element to control the scrolling status and make them scroll at the same time and scroll to same place.(by capture onScroll event.)

  • The problems is when you navigate tab from element to element , the synchronize scroll will be failed.

I tried a lot of ways, and finally find out, the problem lies on the default focus properties deal by Browser itself, and the browser takes control of how to show the element no matter how you set its position properties. And as most of the web programmer will do, we choose to use onfocus event, and can not get the right thing done.

The way to resolve this problem is using another different event : onbeforeactivate

Here is the demo file, you can download it and try it yourself. May be you have a better way to resolve this problem, please let me know: tonny.xu[a]

[Download the demo page which works well]

[Download the demo page which doesn't work as we thought]

No comments:

Post a Comment