I will try to create an example of what I am trying to do. Bear in
mind that the actual manipulation is being done in javascript/jquery
but I do not see the need to show the code to explain the problem.
Suppose I have created a div that appears like a regular textarea (it
is editable), with the addition of computer generated highlights on
certain portions of the text. Somehow, the DOM for this div will be
rebuilt, either by the user clicking on a button or the fact that they
did not type anything for some period of time. Anyway, suppose it
initially looks like this:
<div id="someid" designmode="true">
<p>Now is the <span style="color:red;">time</span> for all <span
style="color:green;">good men</span> to come to the aid of the
country.</p>
<p>It is a far, far, better thing than I have <span
style="color:red;">ever</span> done.</p>
<p>Endeavor to perservere.</p>
</div>
Now, just imagine that the user has a selection starting just before
the word "all" in the first paragraph and just after the word "than"
in the second paragraph. The update gets executed (somehow) and causes
the entire inside of the div to be replaced as follows:
<div id="someid" designmode="true">
<p>Now is the time for all good men to <span
style="color:orange;">come to the aid of the country.</span></p>
<p>It is a far, far, better thing than I have ever done.</p>
<p>Endeavor to <span style="color:purple;">perservere.</span></p>
</div>
As you can see, the paragraphs and text are the same, but some of the
words get highlighted differently in the 2 cases. In the second case,
after its all built, I want to set a selection (range?) to be just
before the word "all" in the first paragraph and just after the word
"than" in the second paragraph, exactly as it is in the first case.
When I rebuild the interior of the div (case 2) a collapsed selection
in set before the first paragraph. I really don't understand how to
get it to work. If I can figure out how to do it, life will be good!
Any other ideas?
Dean
On Jun 5, 6:29 pm, Gustavo Salomé <gustavon...@gmail.com> wrote:
> Im not sure if i get what you want to do but
> try this:
> $div=$('#div');
> div.data('old',div.html());
>
> 2009/6/5 dhoover <dh.ferm...@gmail.com>
>
>
>
>
>
> > I have a web app where I have created a div to masquerade at a
> > textarea so I can add highlighting according to so rules. I rely on
> > setting designmode=true. After certain amounts of idle time my code
> > grabs the text from the div, which consists of <p> tags and <span>
> > tags and re-generates the html with new spans. The paragraphs and text
> > stay the same. So far so good. But when the div "repaints" the
> > insertion is set to the beginning of the div. I want it to visually
> > stay put, meaning I need to somehow record where it was before and
> > then restore it afterwards.
>
> > Problem is, I can't seem to get my head wrapped around how selections
> > (Ranges, etc.) work. I've been googling around for the last day or so
> > and have not yet seen the light.
>
> > Any ideas?
>
> --
> Gustavo Salome Silva
