user2039635 user2039635 - 20 days ago 5
Javascript Question

How to make browser page search (Ctrl-F) start in specific div

We have a simple html layout with a nav div and content div. In some instances, the nav panel can have a lot of content.

When you use the default browser page search, Ctrl-F, the search begins in the nav div and may require several "next" clicks before the content panel is accessed (depending on the search term).

Is there any method of forcing the browser page search to start in a specific div?

gmo gmo
Answer

There is a way to create a selection with javascript...
Now, if you select some text and then search something with the find browser tool...
The search result must start from that point.
(even if the results show all matches in the page, the first result starts where the user has the text selection)

So, if we join this two.. we can have an approach of what you need...
something like:

$(window).on('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && (String.fromCharCode(event.which).toLowerCase() == 'f')) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById('search_from_here'));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById('search_from_here'));
            window.getSelection().addRange(range);
        }
    }
});

Check this jsFiddle for an example http://jsfiddle.net/gmolop/tdo7p1o5/
Important!: The focus must be on the "result iframe" for this example to work (in jsfiddle)