2

In the current minimal example (http://jsfiddle.net/twPHW/) :

<div style="overflow: hidden; height: 24px;">

<table>
<thead>
<tr>
<td style="background-color: rgb(109,173,157);">foo</td>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: rgb(236,222,117);">bar</td>
</tr>
</tbody></table>

</div>

The "foo" cell is the only one visible. Then if I do Ctrl-F (find feature in browser), and start typing "bar", the table inside the div will goes up (like if its top changes) to show to the user the matched element.

I want to be able to look for "bar" through find feature, but I want to handle that layout modification through javascript.

I know it is not possible to listen for browser "find". I just would like to listen to this layout modification in order to prevent it or synchronize the rest of my view accordingly. I tried to listen to scroll events or to use Chrome Mutation Observer but it did not work. Any idea ?

Community
  • 1
  • 1
JBE
  • 11,917
  • 7
  • 49
  • 51

2 Answers2

1

I don't think it is possible to listen to those layout modifications.

When the browser find an element, it is equivalent to call scrollIntoView for the matched element. Thus a scroll event will be fired only if the container div is scrollable.

In the example, the parent style is overflow: hidden;. Thus it does not trigger any scroll event.

It becomes then impossible to listen to these layout change, because the only workaround that exist to listen to scroll event on overflow:hiden element, is to listen to mouse wheel event ...

The bad story is that it is then impossible to prevent user from modifying layout through the browser find, because even if one can prevent Ctrl+F or F3, we can't prevent user from using the Edit-> Find menu in Firefox or IE

Community
  • 1
  • 1
JBE
  • 11,917
  • 7
  • 49
  • 51
  • I have 4 tables I am using to have fixed row and column headers and need to keep them all in sync.I use polling to detect scrollTop and scrollLeft changes. – pilavdzice Jul 23 '14 at 19:24
  • its possible to do this other ways as well, see http://www.sencha.com/forum/showthread.php?68120-Handle-Ctrl-F-event-in-IE-Safari-and-Google-Chrome – pilavdzice Jul 23 '14 at 19:25
  • The question is "can we listen to layout modifications" and the answer is still no, you should not down vote it ! The link you provide only listen for keys while a find can be down using browser menu without triggering any keys ! Your first suggestion, using polling to detect change might work though it appears really dirty ... – JBE Jul 29 '14 at 12:01
0

I haven't tested this, but one option would be to preventDefault() on the ctrl+f keypress, and then make your own version of the find functionality.

posit labs
  • 8,951
  • 4
  • 36
  • 66
  • 1
    Making a custom search is indeed a way to solve this issue. But even if we can prevent user from opening the search from `Ctrl+F or F3`, we can't prevent user from opening the search through `Edit -> Find` menu in Firefox and IE for example ... – JBE Nov 13 '13 at 15:50
  • Who does that? Probably not many people. I think it's an edge case that's probably not worth the time it would take to implement a workaround. – posit labs Nov 13 '13 at 17:18