469,919 Members | 2,154 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,919 developers. It's quick & easy.

Script is working in IE, but not working in Netscape 7 - trouble with document.selection.createRange();

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.inputId 2)"/
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/



<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
Jul 23 '05 #1
8 1779
On 2 May 2004 15:23:58 -0700, lawrence <lk******@geocities.com> 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
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #2
In article <da**************************@posting.google.com >,
lk******@geocities.com 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

Jul 23 '05 #3
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <da**************************@posting.google.com >,
lk******@geocities.com 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.
Jul 23 '05 #4
In article <da************************@posting.google.com>,
lk******@geocities.com 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/domr...ange_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/domr...rtIX.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

Jul 23 '05 #5
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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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>
Jul 23 '05 #6
In article <da**************************@posting.google.com >,
lk******@geocities.com 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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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

Jul 23 '05 #7
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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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 <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. .. In article <da**************************@posting.google.com >,
lk******@geocities.com 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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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>

--

Jul 23 '05 #8
Okay, I see now. I had two form elements with an id of inputId2. That
is why it was not working.

kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <da**************************@posting.google.com >,
lk******@geocities.com 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.inputId 2)"/>
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d2)"/>
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId2)"/>
<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>

--

Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Jeff Thies | last post: by
13 posts views Thread by Yousuf Khan | last post: by
1 post views Thread by c.anandkumar | last post: by
2 posts views Thread by fnsbe | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.