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
 
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?
Click to expand...

[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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

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>
 
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)
Click to expand...

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)
Click to expand...

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>

--
Click to expand...
 
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)
Click to expand...

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>

--
Click to expand...
 

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

newbie question: trouble with document.selection.createRange(); 7
Script working in Firefox but not Chrome and Safari 3
open source javascript project - trouble with document.getElementById 1
Script to send email not working 1
Image upload not working in browser 4
Script stops working when using variables to save time typing... 4
Issue with textbox script? 0
I Need Help with making a function that draws in a canvas using location data. 1

Members online

Total: 61 (members: 2, guests: 59)
Robots: 440

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top