How to reset selected range in Firefox

A

Alexander Higgins

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").contentWindow.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").contentWindow.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,channelmode=0,directories=0,location=0,menubar=0,resizable=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
 
A

Alexander Higgins

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.
 
P

pcx99

Alexander said:
tmp=document.getElementById("adeditor").contentWindow.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.
Click to expand...

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.
 
A

Alexander Higgins

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();
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to add dropdown selected data to table using jquery 2
How to automate repetitive tasks on firefox ??? 6
Range / empty list issues?? 1
How to try a range of hex values in C# code ? 0
I am trying to make an audio player, how do I get the selected file to be playable? 5
Reset contentWindow.find to beginning of Iframe in Firefox 0
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Script working in Firefox but not Chrome and Safari 3

Members online

Total: 80 (members: 1, guests: 79)
Robots: 201

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,739
Latest member
Clint8040

Latest Threads

Top