We Keep Coding

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?

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)

It is not possible to select a specific part of the page for the browser to search through when using CTRL+F.
The browsers search through the entire document it has loaded.
You could of course use JavaScript to to detect to press of both the CTRL key and the F key, and on that remove all data from the document, and only leave what you want them to search through. But that would neither be a good or a pretty solution considering that you would remove the most of your entire website, and the user would think something is broken.
Create a custom search field on your website instead.

Getting start and end of selected text from tinyMCE

I have configured the tinyMCE editor with a custom context menu. When I right-click on any word in the editor, the chosen word gets highlighted. I am able to get the selected text with editor.selection.getContent().
How do I get the start and end points of the selected text within the entire text that is currently in the tinyMCE editor? I tried editor.selection.getStart() and getEnd(), but that has not yielded enough results.
My task is to take the start and end indices and get the previous word with it. I am currently using tinymce-3.5.10.

You will need to use
var range = editor.selection.getRng()
to get a range. You can get the start- and end-container using
range.startContainer
range.endContainer

javascript: create range from cursor position at time a to cursor position at time b

I get the cursor position at time a. Then I get the cursor position at time b. I want to make a range from the cursor position at time a to the cursor position at time b. Time a and b are start and end of ctr-v (paste).
I get the cursor position like so - or rather a range at the cursor position.
sel = window.getSelection();
range_time_a = sel.getRangeAt(0).collapse(true);
But, how do I use range_time_a and range_time_b to create a new range that starts at range_time_a and ends at range_time_b?
I have seen code to get the element with the cursor and to get the offset within that element. I could use that for setStart() and setEnd, but it seems like there should be an easier way since I've already got two ranges.

EDIT This actually won't give you what you're looking for... This is really complicated. My initial suggestion of commonAnscestorContainer.innerHTML will give you too much back (all the HTML of the closest parent container to your selection).
First, you're probably going to want to trigger this code on an eventHandler that fires when the user presses ctrl+c (discussion here: How to detect Ctrl+V, Ctrl+C using JavaScript?).
If you only want to get the text selected, that's easily done:
range = window.getSelection().toString();
You don't need to check the selection at various times - you only need to capture it at the point the user hits ctrl-c.
getSelection is not meant for capturing the HTML of a selection. You can capture text & remove text, move to the start/end of the selection and a bunch of other things described here, but you can't grab HTML.
Big part of the problem is that this isn't part of any stanfard spec (see this link). Another reason its not consistent across browsers, or supported in IE7/8.
Some non-standards based examples of how to get more info out of range selections can be found here if you really need to do this - Get a range's start and end offset's relative to its parent container

Select text in textarea programatically in IE 8

I have been trying to select text in a textarea programatically based on start and end indexes, but for some reason the selection is offset by a few character locations:
My users make an initial manual selection that I store to a database.
To get the start/end positions of the initial selection I am using the approach outlined here Caret position in textarea, in characters from the start
(Answered by Tim Down)
I store the selections made by the users, and when they come back to the page I want to default in their previous selections.
My code for making the selection based on the stored positions I extracted using Tim Down's function is the following:
function SelectText(start,end) {
var textArea = document.getElementById("textArea");
var inputRange = textArea.createTextRange();
inputRange.collapse(true);
inputRange.moveStart("character", start);
inputRange.moveEnd("character", end - start);
inputRange.select();
}
It seems like the issue is caused by linebreaks/spaces. Does anyone know how to correctly make selections in IE programatically based on start and end?

I don't know exactly if it will help you but you can try to use RangyInputs js library which was developed by Tim Down and available using the following url: http://code.google.com/p/rangyinputs/
As for me I used Rangy (which is developed by Tim Down too) library for content editable div on one of my projects and it really works well and helped me a lot.
The documentation about supported methods you can find on WiKi page: http://code.google.com/p/rangyinputs/wiki/Documentation

Div Inner Text Selection using Javascript (with keyboard?)

My goal is to create a caret browsing extension in google chrome. I have hit a wall with text selection. I've found that I can select the contents of a div:
range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
I can also select child elements using range.setStart(referenceNode,offest) and range.setEnd(referenceNode,offset) where offset is the number of child nodes to skip/include in the selection.
Unfortunately, I have no idea how to select individual characters within a div. This behavior is, ofcourse, available for textareas and input textfields. I'm hoping for a legit javascript solution that I missed, but a hack-around suggestion using DOM manipulation of one form or another is also acceptable.
It is important that the solution allow for caret-browsing like behavior. For example, given the starting position as an offset from some location, and the ending position as an offset from the same location, display the selection in position on the screen and allow for copying the selection.
Thank you for your time.
Best Regards,
Lotus

I don't know if this is hack or not but it is working.
(I just made that) Try demo: http://derek1906.site50.net/experiment/selection/
You can put a <span></span> around the individual characters that you want to select and then you just select the <span> and Wa-la, you selected the words you want!