Searching for text in a hidden DIV

[sarahfsk]

I've got a long page of text and options, and I'd like to be able to use DHTML to expand and collapse the sections when the user clicks + and - buttons. Eventually I'll need to break this monolith into separate pages, but that's not going to happen right now.

The catch is that the text needs to be findable with the browser's Ctrl-F function. Unfortunately, implementing a custom search function on this page is way out of scope for the project -- and would be very inconsistent with other pages in the application. Is there a way to make sure the user can find text, even in hidden DIVs?

-Sarah

[jscheuer1]

What would they do when they found it? They still can't see it. What good is it if an invisible bit of text is invisibly highlighted?

Generally, scripts that can hide and show various bits of content either have, or can have a 'reveal all' button or link, often something like (don't click on these):

Expand All | Contract All

If your page has that, anyone with a little sense will use the Expand All one before searching the page with Ctrl-F, unless they only want results from the displayed content.

[sarahfsk]

Well, that would be the second bit of magic... that it would automatically show the DIV on focus (or whatever other detectable method the browser uses of highlighting the search terms). I know... I think this is wishful thinking on my part... I've been searching forums & tutorials for the better part of the morning and haven't found anything promising...

The part that worries me is relying on the user to know that they need to Expand All to get search results from hidden sections. Because this is a web application, not a website, there are certain interactions that our users seem to assume will behave like in a COM app -- and I worry that they'll be thinking that we've implemented a Windows Explorer-type search, where even the contents of hidden directories are available to the engine.

[jscheuer1]

Well, we can detect the Ctrl-F combination like so:

<script type="text/javascript">
function kCode(e){
var ev=e? e : window.event? window.event : null;
if(ev){
var n=ev.keyCode? ev.keyCode : ev.which;
if(kCode.hold&&kCode.hold==17&&n==70){
//Do Something Here
}
kCode.hold=n;
}
}
document.onkeydown=kCode;
document.onkeyup=function(){kCode.hold='';};
</script>

If your script has an expand all thing, it could be executed in the spot now held by the green comment text. Otherwise, a pop up division could be revealed telling folks about the limits of the search. An alert would be better, but in IE 7 an alert would prevent the search box from appearing, so would be pointless.

[sarahfsk]

Excellent. I think I'll still need to put some helper text on the screen, to explain what's going on and to help folks who use the menu instead of the key combo, but this should be a good safety net for the ones who are absent-mindedly using Ctrl-F each time they come to the page.

Thanks!