8

I have containers with multiple lines but only the first one visible (overflow:hidden). The container is expandable upon a click. (See https://stackoverflow.com/a/6972830 and the jsFiddle http://jsfiddle.net/JUtcX/2/)

If someone performs a Ctrl+F with text from the non-visible lines, the browser reports a match but cannot show it (because it's hidden).

How can I react to Ctrl+F and open the container whether a non-visible text in it was searched for?

[Update] Approaches that do not meet all requirements:

  1. Listening for Ctrl+F.
    • I have multiple containers and only want to expand those containing the search phrase. Upon listening for Ctrl+F I could only open all containers at once.
    • Does not work on all systems. This is a negligible defect only, though.
  2. Chrome-specific workaround (link)
    • At least also Firefox should be supported
Community
  • 1
  • 1
PhilLab
  • 4,777
  • 1
  • 25
  • 77
  • possible duplicate of [Chrome search feature (ctrl+f) finds hidden text ( but it's invisible! )](http://stackoverflow.com/questions/21093148/chrome-search-feature-ctrlf-finds-hidden-text-but-its-invisible) – OddDev Sep 15 '15 at 06:03
  • No duplicate, since the above is Chrome-unique (tested as not working with Firefox 40.0.2) and it would not be able to expand the div - it's merely a hack (correct me if I'm wrong) – PhilLab Sep 15 '15 at 06:09
  • if the user presses next the content will automatically scroll to the next instance of the word – Rachel Gallen Sep 15 '15 at 06:25
  • 1
    @RachelGallen Not in all browsers. – Mr Lister Sep 15 '15 at 06:40
  • 1
    @PhilLab I tried experimenting with the `onselect` event , but apparently it is not fired on a search result. – Mr Lister Sep 15 '15 at 06:42
  • See this http://stackoverflow.com/questions/19937388/listening-to-browser-ctrlf-find-layout-modifications and this http://stackoverflow.com/questions/1793864/listen-for-events-from-browser-find-window-in-javascript You are able to listen to the keyevents of ctrl + f and react to it accordingly. – OddDev Sep 15 '15 at 07:42

1 Answers1

1

You can do something like this:

function find(e) {
    if (e.ctrlKey && e.keyCode == 70) {
        document.getElementById("hide").style.display = "block";
    }
}
document.addEventListener('keyup', find, false);
#hide{
  display: none;
}
<div>
  ASDF:
  <div id="hide">
    Hidden
  </div>
</div>

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

JBE

I don't know of any way you can listen for a find-like event and if that's supported in any browser it sure isn't a portable solution.

I also don't know what you're trying to achieve but I think that your best option is to listen for the keyboard events that trigger the find window and attempt to cancel them while attempting to emulate the find-toolbar/window with JavaScript of your own. This is however a herculean (and nearly impossible) task due to some browsers customization of keyboard shortcuts depending on the localization (for instance, in IE, en-US uses Ctrl+F (for Find) while pt-PT uses Ctrl+L (for Localizar, meaning find)).

Conclusion: I think you're out of luck there...

Miguel Ventura

Community
  • 1
  • 1
OddDev
  • 3,644
  • 5
  • 30
  • 53
  • Thanks for the extensive answer! Unfortunately, this does not work smoothly with multiple expandable containers - either none or all of them have to be opened. The literature that you provided is also interesting, especially the problem with the shortcut localization :-( – PhilLab Sep 15 '15 at 08:23
  • Please note that it wouldn't work for Mac. (Actually, `find()` may be fired using `ctrl` key, but OSX uses `cmd` key instead of `ctrl` key) – Sebastien Sep 15 '15 at 08:32