Script is working in IE, but not working in Netscape 7 - trouble with document.selection.createRang

Discussion in 'Javascript' started by lawrence, May 2, 2004.

  1. lawrence

    lawrence Guest

    I'm a beginner with Javascript and especially cross-browser
    Javascript. I got this working in IE, but not in Netscape 7. It seems
    like, in Netscape, every time I click on a button, the focus shifts to
    that button, so there is no text to be selected. What should I do?

    Below you'll see some code that I have in one of my forms. I was
    hoping to have these buttons and when I click on them they would take
    selected text from a textarea box and replace it with the text but
    surrounded with the HTML tags I wanted. But I can't get this to work.
    Why?






    <script language="javascript"
    function wrapSelectionBold (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<b ' + range.text + '<\/b ';
    }
    function wrapSelectionItalic (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<i ' + range.text + '<\/i ';
    }
    function wrapSelectionBlockQuote (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<blockquote ' + range.text + '<\/blockquote ';
    }
    function wrapSelectionBigHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h1 ' + range.text + '<\/h1 ';
    }
    function wrapSelectionSmallHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h3 ' + range.text + '<\/h3 ';
    }
    </script


    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" /
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/







    <div class="formElement"
    Change the brief description or introduction for your Weblog; <br
    Or change the contents of your Webpage:<br
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput" </textarea
    <p HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox" </p

    </div
     
    lawrence, May 2, 2004
    #1
    1. Advertising

  2. On 2 May 2004 15:23:58 -0700, lawrence <> wrote:

    > I'm a beginner with Javascript and especially cross-browser
    > Javascript. I got this working in IE, but not in Netscape 7. It seems
    > like, in Netscape, every time I click on a button, the focus shifts to
    > that button, so there is no text to be selected. What should I do?
    >
    > Below you'll see some code that I have in one of my forms. I was
    > hoping to have these buttons and when I click on them they would take
    > selected text from a textarea box and replace it with the text but
    > surrounded with the HTML tags I wanted. But I can't get this to work.
    > Why?


    [snipped code]

    It doesn't really matter whether the text stays selected or not; IE is the
    only browser I know of that supports the document.selection object. Your
    code simply won't work on the majority of browsers.

    As far as I'm aware, there is no general way to do what you are attempting.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, May 3, 2004
    #2
    1. Advertising

  3. lawrence

    kaeli Guest

    In article <>,
    enlightened us with...

    >
    > Below you'll see some code that I have in one of my forms. I was
    > hoping to have these buttons and when I click on them they would take
    > selected text from a textarea box and replace it with the text but
    > surrounded with the HTML tags I wanted. But I can't get this to work.
    > Why?


    Because it's full of IE only stuff (document.selection, createRange,
    etc).
    You can't do this on the other browsers. They simply don't support it
    yet. There is no equivalent. IIRC, it's on the request list for Mozilla.


    --
    --
    ~kaeli~
    You feel stuck with your debt if you can't budge it.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, May 3, 2004
    #3
  4. lawrence

    lawrence Guest

    kaeli <> wrote in message news:<>...
    > In article <>,
    > enlightened us with...
    >
    > >
    > > Below you'll see some code that I have in one of my forms. I was
    > > hoping to have these buttons and when I click on them they would take
    > > selected text from a textarea box and replace it with the text but
    > > surrounded with the HTML tags I wanted. But I can't get this to work.
    > > Why?

    >
    > Because it's full of IE only stuff (document.selection, createRange,
    > etc).
    > You can't do this on the other browsers. They simply don't support it
    > yet. There is no equivalent. IIRC, it's on the request list for Mozilla.


    You're saying that even if I study up on Mozilla/Netscape quite a bit
    I'll find no way to do this in Netscape? I won't waste my time if you
    say it is impossible, though if it is possible I'm happy to do the
    work of researching it. I'm new to Javascript so I'm not sure how much
    can be done with it.
     
    lawrence, May 4, 2004
    #4
  5. lawrence

    kaeli Guest

    In article <>,
    enlightened us with...
    >
    > You're saying that even if I study up on Mozilla/Netscape quite a bit
    > I'll find no way to do this in Netscape? I won't waste my time if you
    > say it is impossible, though if it is possible I'm happy to do the
    > work of researching it. I'm new to Javascript so I'm not sure how much
    > can be done with it.
    >


    I already researched it when I tried it a couple months ago when this
    same question came up and couldn't find out how. Feel free to knock
    yourself out, though - maybe you're more creative than me. If you find a
    way, post it, okay?

    Mozilla has a createRange, but it is not of Selection.
    http://www.mozilla.org/docs/dom/domref/dom_range_ref8.html

    Here's the main docs for the DOM reference, right at the S where I was
    looking for Selection.
    http://www.mozilla.org/docs/dom/domref/dom_shortIX.html#IX_S

    Note that Netscape 6+ is based on Mozilla and should support most, if
    not all, of what they support.

    --
    --
    ~kaeli~
    If a parsley farmer is sued, can they garnish his wages?
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, May 4, 2004
    #5
  6. lawrence

    lawrence Guest

    I had this working in IE and suddenly in stopped working, even in IE.
    For the life of me, I can't see what mistake I made. Does anyone see
    what mistake I made? (this bit from one of my forms)






    <script language="javascript">
    function wrapSelectionBold (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<b>' + range.text + '<\/b>';
    }
    function wrapSelectionItalic (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<i>' + range.text + '<\/i>';
    }
    function wrapSelectionBlockQuote (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<blockquote>' + range.text + '<\/blockquote>';
    }
    function wrapSelectionBigHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h1>' + range.text + '<\/h1>';
    }
    function wrapSelectionSmallHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h3>' + range.text + '<\/h3>';
    }
    function wrapSelectionMakeALink (element) {
    var range = document.selection.createRange();
    address = prompt("What address?");
    address = '<a href=\"' + address + '\">';
    if (range.parentElement() == element)
    range.text = address + range.text + '<\/a>';
    }
    </script>


    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/>
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    <input type="button" value="make a link"
    onclick="wrapSelectionMakeALink(this.form.inputId2)"/>



    <div class="formElement">
    Type your main content:
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput"></textarea>
    <p>HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>

    </div>
     
    lawrence, May 4, 2004
    #6
  7. lawrence

    kaeli Guest

    In article <>,
    enlightened us with...
    > I had this working in IE and suddenly in stopped working, even in IE.
    > For the life of me, I can't see what mistake I made. Does anyone see
    > what mistake I made? (this bit from one of my forms)
    >
    >


    Forgot the form tag needs to be around that textarea, since you use
    this.form.inputId2 to reference it?
    This worked fine for me in IE6.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    </head>

    <body>
    <script language="javascript" type="text/javascript">
    function wrapSelectionBold (element) {
    alert(element);
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<b>' + range.text + '<\/b>';
    }
    function wrapSelectionItalic (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<i>' + range.text + '<\/i>';
    }
    function wrapSelectionBlockQuote (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<blockquote>' + range.text + '<\/blockquote>';
    }
    function wrapSelectionBigHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h1>' + range.text + '<\/h1>';
    }
    function wrapSelectionSmallHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h3>' + range.text + '<\/h3>';
    }
    function wrapSelectionMakeALink (element) {
    var range = document.selection.createRange();
    address = prompt("What address?");
    address = '<a href=\"' + address + '\">';
    if (range.parentElement() == element)
    range.text = address + range.text + '<\/a>';
    }
    </script>

    <form>
    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/>
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    <input type="button" value="make a link"
    onclick="wrapSelectionMakeALink(this.form.inputId2)"/>


    <div class="formElement">
    Type your main content:
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput"></textarea>
    <p>HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>

    </div>
    </form>

    </body>
    </html>

    --
    --
    ~kaeli~
    A midget fortune teller who escapes from prison is a small
    medium at large.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, May 4, 2004
    #7
  8. lawrence

    lawrence Guest

    Thanks, but actually, the form tags are there, I just didn't include
    them in my example. The form is so huge I thought it would be
    overwhelming to post the whole thing. I've now got it workin on one
    page but not another, so whatever the problem is, it must be very
    small, perhaps a missing semi-colon or something.


    This works without a problem in IE:

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/>
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>


    <div class="formElement">
    Type a brief description for your Weblog; <br>
    Or type the full contents of your Webpage:<br>
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput"></textarea>
    <p>HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>
    </div>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>





    But this does not, and I have trouble seeing the difference:


    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/>
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    <input type="button" value="make a link"
    onclick="wrapSelectionMakeALink(this.form.inputId2)"/>

    <div class="formElement">
    Type your main content: <br/>
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput"></textarea>
    <p>HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>
    </div>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>



    I use the same functions on both, except for this one:

    function wrapSelectionMakeALink (element) {
    var range = document.selection.createRange();
    address = prompt('What address?');
    address = '<a href=\"' + address + '\">';
    if (range.parentElement() == element)
    range.text = address + range.text + '<\/a>';
    }

















    kaeli <> wrote in message news:<>...
    > In article <>,
    > enlightened us with...
    > > I had this working in IE and suddenly in stopped working, even in IE.
    > > For the life of me, I can't see what mistake I made. Does anyone see
    > > what mistake I made? (this bit from one of my forms)
    > >
    > >

    >
    > Forgot the form tag needs to be around that textarea, since you use
    > this.form.inputId2 to reference it?
    > This worked fine for me in IE6.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    > "http://www.w3.org/TR/REC-html40/loose.dtd">
    > <html>
    > <head>
    > <title> New Document </title>
    > </head>
    >
    > <body>
    > <script language="javascript" type="text/javascript">
    > function wrapSelectionBold (element) {
    > alert(element);
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<b>' + range.text + '<\/b>';
    > }
    > function wrapSelectionItalic (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<i>' + range.text + '<\/i>';
    > }
    > function wrapSelectionBlockQuote (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<blockquote>' + range.text + '<\/blockquote>';
    > }
    > function wrapSelectionBigHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h1>' + range.text + '<\/h1>';
    > }
    > function wrapSelectionSmallHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h3>' + range.text + '<\/h3>';
    > }
    > function wrapSelectionMakeALink (element) {
    > var range = document.selection.createRange();
    > address = prompt("What address?");
    > address = '<a href=\"' + address + '\">';
    > if (range.parentElement() == element)
    > range.text = address + range.text + '<\/a>';
    > }
    > </script>
    >
    > <form>
    > <input type="button" value="bold"
    > onclick="wrapSelectionBold(this.form.inputId2)" />
    > <input type="button" value="italic"
    > onclick="wrapSelectionItalic(this.form.inputId2)"/>
    > <input type="button" value="blockquote"
    > onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    > <input type="button" value="big headline"
    > onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    > <input type="button" value="small headline"
    > onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    > <input type="button" value="make a link"
    > onclick="wrapSelectionMakeALink(this.form.inputId2)"/>
    >
    >
    > <div class="formElement">
    > Type your main content:
    > <textarea id="inputId2" name="formInputs[cbMainContent]"
    > class="textareaInput"></textarea>
    > <p>HTML into symbols? <input type="checkbox"
    > name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>
    >
    > </div>
    > </form>
    >
    > </body>
    > </html>
    >
    > --
     
    lawrence, May 5, 2004
    #8
  9. lawrence

    lawrence Guest

    Okay, I see now. I had two form elements with an id of inputId2. That
    is why it was not working.



    kaeli <> wrote in message news:<>...
    > In article <>,
    > enlightened us with...
    > > I had this working in IE and suddenly in stopped working, even in IE.
    > > For the life of me, I can't see what mistake I made. Does anyone see
    > > what mistake I made? (this bit from one of my forms)
    > >
    > >

    >
    > Forgot the form tag needs to be around that textarea, since you use
    > this.form.inputId2 to reference it?
    > This worked fine for me in IE6.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    > "http://www.w3.org/TR/REC-html40/loose.dtd">
    > <html>
    > <head>
    > <title> New Document </title>
    > </head>
    >
    > <body>
    > <script language="javascript" type="text/javascript">
    > function wrapSelectionBold (element) {
    > alert(element);
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<b>' + range.text + '<\/b>';
    > }
    > function wrapSelectionItalic (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<i>' + range.text + '<\/i>';
    > }
    > function wrapSelectionBlockQuote (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<blockquote>' + range.text + '<\/blockquote>';
    > }
    > function wrapSelectionBigHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h1>' + range.text + '<\/h1>';
    > }
    > function wrapSelectionSmallHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h3>' + range.text + '<\/h3>';
    > }
    > function wrapSelectionMakeALink (element) {
    > var range = document.selection.createRange();
    > address = prompt("What address?");
    > address = '<a href=\"' + address + '\">';
    > if (range.parentElement() == element)
    > range.text = address + range.text + '<\/a>';
    > }
    > </script>
    >
    > <form>
    > <input type="button" value="bold"
    > onclick="wrapSelectionBold(this.form.inputId2)" />
    > <input type="button" value="italic"
    > onclick="wrapSelectionItalic(this.form.inputId2)"/>
    > <input type="button" value="blockquote"
    > onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    > <input type="button" value="big headline"
    > onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    > <input type="button" value="small headline"
    > onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    > <input type="button" value="make a link"
    > onclick="wrapSelectionMakeALink(this.form.inputId2)"/>
    >
    >
    > <div class="formElement">
    > Type your main content:
    > <textarea id="inputId2" name="formInputs[cbMainContent]"
    > class="textareaInput"></textarea>
    > <p>HTML into symbols? <input type="checkbox"
    > name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>
    >
    > </div>
    > </form>
    >
    > </body>
    > </html>
    >
    > --
     
    lawrence, May 5, 2004
    #9
    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. Simon Niederberger
    Replies:
    2
    Views:
    16,531
    Christian Kaufhold
    Jan 7, 2005
  2. Andrew Crowe
    Replies:
    1
    Views:
    4,475
    Andrew Crowe
    Sep 13, 2004
  3. John Wilson

    Code working in IE but not Netscape 7.0

    John Wilson, Nov 21, 2003, in forum: Javascript
    Replies:
    3
    Views:
    105
    David Dorward
    Nov 21, 2003
  4. lawrence
    Replies:
    7
    Views:
    154
    Thomas 'PointedEars' Lahn
    May 19, 2004
  5. lawrence
    Replies:
    3
    Views:
    196
Loading...

Share This Page