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


L

lawrence

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
 
Ad

Advertisements

M

Michael Winter

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
 
K

kaeli

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.


--
 
L

lawrence

kaeli said:
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.
 
K

kaeli

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.

--
 
L

lawrence

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>
 
Ad

Advertisements

K

kaeli

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
 
L

lawrence

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"




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"


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 said:
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>

--
 
Ad

Advertisements

L

lawrence

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



kaeli said:
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>

--
 

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

Top