How to reset selected range in Firefox

12-16-2006

Hello,

I would like to thank everyone for there help in advance. I have form
which is using an iframe as a Rich Text Editor. Everything works as
expected in IE but I have two issues with Firefox. I am using the
following to make the frame editable:

tmp=document.getElementById("adeditor").contentWin dow.document
tmp.designMode="On";

First, Firefox does not seem to accept the unselectable="on" or "off"
attributes in elements in the iframe. Is there any way to prevent
firefox users from editing or change HTML tags in the IFRAME.

Also, I can't seem to add events handlers in firefox. For example, in
the IFrame if I put onmouseover="alert('hello'); the alert fires in IE,
but not Firefox. To sum up what I am trying to accompish, I want to
allow users to edit the Iframe's text contents but there are hyperlinks
in the Iframe that I want to allow users to edit the href attribute,
but not the innertext.

I have input text boxes on the web page, and as user's type the
corresponding elements of each input is updated with the text a user
type's. When a user clicks on a textbox that is set to update a
hyperlink href in the Iframe, I am using javascript to select the
element and fire the execCommand("CreateLink");

In IE, after selecting the range and creating the hyperlink, the
element is no longer selected so if a user goes to update a different
hyperlink, the new link is selected. However, In firefox, after a user
updates the hyperlink, the element is still selected. When a user
tries to update a different link, the old link is still selected, and
the update link tries to update the previously selected link not the
one that is currently selected.

I think the problem is in firefox, when I call the
obj.contentWindow.document.createRange();, i need to have the
createRange() start at the begin of the Iframes contents, and not at
the beginning of the currently selected element.

There is obviously alot of code going on here, but here is the
pertinent snippet.

var obj = document.getElementById("adeditor");
var doc = obj.contentWindow.document;
var
website=document.getElementById("adeditor").conten tWindow.document.getElementById(id);
var agt=navigator.userAgent.toLowerCase();
var is_opera=(agt.indexOf("opera")!=-1);
var is_ie=((agt.indexOf("msie")!=-1)&&!is_opera);
if (doc)
{
var sText;
var content;
if (is_ie){
var sText = doc.body.createTextRange();
sText.findText(website.innerText);
sText.select();
}
else
{
sText = obj.contentWindow.document.createRange();
sText.selectNode(website);
content=sText.toString();
obj.contentWindow.find(website.innerHTML);
}
if (sText!="")
{//create link
if (is_ie){
doc.execCommand("CreateLink");
}
else {
linkWin=window.open('/usercontrols/createlink.htm?adeditor','linkw','status=0,channel mode=0,directories=0,location=0,menubar=0,resizabl e=0,scrollbars=0,toolbar=0,
height=140, width=400
,left='+(screen.width/2-200)+',top='+(screen.height/2-70));
if(linkWin)linkWin.focus();
}

Again any help is appreciated. To see the exact issue, go to the
folliwng web page and click on the full listing radio button. Please
note, I am still working on this so..... It may or may not be
functional when you visit. Thanks again

Here's the page....
http://www.seniorsa2z.com/addesigner.aspx

12-16-2006

Apologies if the above post seemed a little excessive, Here is a
shorter version of what I am trying to do...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>fffind</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script type=text/javascript>
function init(){
var tmp = document.getElementById("fr");
var win=tmp.contentWindow;
var obj=tmp.contentWindow.document;
obj.designMode="On";
obj.open();
obj.write('a b c d e f g h i j k l m n o p q r s t u v w x y z');
obj.close();
}
function findit(){
var tmp = document.getElementById("fr");
var win=tmp.contentWindow;
var obj=tmp.contentWindow.document;
var sTerm=document.getElementById("term")
sText = obj.createRange();
sText.selectNode(sTerm);
content=sText.toString();
// obj.contentWindow.find(website.innerHTML);
//alert(content);
tmp.contentWindow.find(sTerm.value);
}
</script>
</HEAD>
<body MS_POSITIONING="FlowLayout" onload="init();">
<form id="Form1" method="post" runat="server">
<iframe src="javascript:void(0);" id="fr" width=200
height=100></iframe>

<p>enter a term to find<BR>
<INPUT type="text" id="term"><INPUT type="button" value="Find it."
onclick="findit();">
<br>
</p>
</form>
</body>
</HTML>

With this code, If I type b into the term text box and click find, it
will find the letter b. But if i type a in after that it will not find
it. It will find any letter after the b. How do you reset the
window.find back to the beginning of the document.

An addiotional note. If I put the code for the init function inside of
the findit function then the findit starts at the beginning of the
document. However , I don't think this is an option.

Thanks again.

12-16-2006

Alexander Higgins wrote:
> tmp=document.getElementById("adeditor").contentWin dow.document
> tmp.designMode="On";
>
> First, Firefox does not seem to accept the unselectable="on" or "off"
> attributes in elements in the iframe. Is there any way to prevent
> firefox users from editing or change HTML tags in the IFRAME.

http://www.mozilla.org/editor/ie2midas.html

||Setting document.designMode must NOT be done in the script section of
||the head. We suggest the onLoad function for the body where the iframe
||is contained.

Your example shows that you're setting designmode in the script section
of the document header tags. This mozilla writeup may solve some of
your other problems as well. There wasn't a mouseover example in your
sample code so its not possible to say for sure what you are doing
wrong, if anything.

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA

12-17-2006

Just to follow up... Thanks fo the link to the article. I must say
Mozilla's documentation is not correct. As you see I am setting the
designmode from the onload event of the the contentWindow's parent
document and have no issue.

I believe the reason they recommend the onload of the frame, is Mozilla
does not support contentWindow.document.readyState. However, I wish to
add event handlers for the onmousedown's of the contentwindow's
hyperlinks. Since the script no longer function inside the content
window in firefox when the designMode=ON is set, the best place to set
them is in the parent window.

I must say, I can not believe I must code for FirFox browsers. Have
you check out their MIDAS DHTML editor??? do they not test and QA stuff
before putting it live on their web site. Trying using it, switching
to View HTML source entirely erases the contents of the
contnentWindow.document. The errata on in their documenation....

Just frustration with Firefox. Anyway, Thanks for you help on the
issue.

=============================================
The sytax to clear the select was removeAllRanges();
============================================

This the snippet from their Midas Editor.....

var sel = win.getSelection();
// get the first range of the selection
// (there's almost always only one range) /<=== official
documentation. AAGGHHH!!

/////<==== comment From Alex..... Are you kidding me what a Joke?
///<===== Basically they are saying 60% of the time it will work
100% of the time
//<====== come on this is the official documentation of one of
the largest web broswers
// < ===== in the world..... OH BOY.....

var range = sel.getRangeAt(0);

// deselect everything
sel.removeAllRanges();

// remove content of current selection from document
range.deleteContents();

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: How include a large array?	Edward A. Falk	C Programming	1	04-04-2013 08:07 PM
You will not be able to reset the access - can't reset.	jc	MCAD	0	12-09-2007 08:58 PM
Reset Selected Item in Select Option List	Dennis Marks	HTML	1	09-08-2006 08:21 PM
CISCO 7XX / 761 password reset or reset to factory defaults	Philipp Flesch	Cisco	3	06-18-2006 07:47 PM
reset selected index on droplist	TJS	ASP .Net	4	03-07-2005 04:38 AM