How to reset selected range in Firefox

Discussion in 'Javascript' started by Alexander Higgins, Dec 16, 2006.

  1. 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
    Alexander Higgins, Dec 16, 2006
    #1
    1. Advertising

  2. 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.
    Alexander Higgins, Dec 16, 2006
    #2
    1. Advertising

  3. Alexander Higgins

    pcx99 Guest

    Alexander Higgins wrote:
    > 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.


    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
    pcx99, Dec 16, 2006
    #3
  4. 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();
    Alexander Higgins, Dec 17, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TJS
    Replies:
    4
    Views:
    2,960
  2. Replies:
    46
    Views:
    967
    Antoon Pardon
    Jul 25, 2006
  3. Dennis Marks
    Replies:
    1
    Views:
    3,391
    Nikita the Spider
    Sep 8, 2006
  4. Lambda
    Replies:
    2
    Views:
    396
    James Kanze
    Jul 16, 2008
  5. Dennis Marks

    Reset Selected Item in Select Option List

    Dennis Marks, Sep 8, 2006, in forum: Javascript
    Replies:
    0
    Views:
    119
    Dennis Marks
    Sep 8, 2006
Loading...

Share This Page