Click on a picture, insert text in a text box: how?

[who be dat?]

I'm trying to make a webpage do the following:

I want a user to be able to click on a given image (there will be more than
one image). Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area. If the
cursor is in the textbox/textarea then the characters are to be inserted at
the cursor location. This means if the cursor is between some text then the
characters need to be inserted in between the text exactly where the cursor
is. If the cursor is not in the textbox/textarea then the characters need
to be displayed at the end of any text or at the start if there is no text
present. Keep in mind the characters to be inserted will be unique to a
given image. There will be only one textbox/textarea on the pages I'm
wanting to do this on.

I know a bit about Javascript but am far from an expert. I found a webpage
that does this and copied the code from it. Can't get it working though.
I'm getting a java error as a matter of fact. No idea why. Does anyone
have a link handy I can go to see a simple example of this without a large
amount of stuff on the webpage so I can easily extract the code? The
webpage I found, when I save the source file, is huge and it's hard to pick
the code out of it although I thought I correctly got it all. Or, perhaps
someone can post the code in a response to this message aloing with some
short HTML as an example? Thanks!

Chris Smith

[Andrew Thompson]

On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:

I'm getting a java error as a matter of fact.

If it is Javascript, you should be getting
a Javascript error as it happens. They are
different languages..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[who be dat?]

Yeah, it's Javascript. As far as I know, it's stated such in the code
correctly. When I said Java, that was a mistake in my newspost. Any ideas
on some code that will do this? Thanks!

Chris Smith

"Andrew Thompson" <Se********@www .invalid> wrote in message
news:k8******** *************** ******@40tude.n et...

On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:

I'm getting a java error as a matter of fact.

If it is Javascript, you should be getting
a Javascript error as it happens. They are
different languages..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Andrew Thompson]

On Tue, 10 Aug 2004 07:24:17 -0400, who be dat? wrote:

Yeah, it's Javascript. As far as I know, it's stated such in the code
correctly. When I said Java, that was a mistake in my newspost. Any ideas
on some code that will do this?

(chuckles) It was a typo? Sorry, just wanted
to check we were all on the same page..

I'll leave the intelligent and erudite responses
for the JS gurus.. (No, I am *not* one of them,
I am a mere Java programmer/web designer who lurks
here to gain tips from the aforementioned. )

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Evertjan.]

who be dat? wrote on 10 aug 2004 in comp.lang.javas cript:

Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area.
easy
If the
cursor is in the textbox/textarea then the characters are to be
inserted at the cursor location. This means if the cursor is between
some text then the characters need to be inserted in between the text
exactly where the cursor is.
Impossible, for so far as I know.
I know a bit about Javascript but am far from an expert. I found a
webpage that does this and copied the code from it.
Show us the URL, please.
Can't get it working though.

As expected? ;-)

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[who be dat?]

Hey Evertjan,

This is something common to phpBBB/phpNuke when you post messages or reply
to them. In the center of a screen is a textbox where you can enter your
text. Just on the left is a column of small images (I think the column is
titled emoticons or something like that). Clicking on an image will insert
some characters into the text as I described below (in between text or at
the end of text as I described below). You can see this in action at any of
the many sites that use this bulletinboard. One such place I like to
frequent a lot is AMDZone.com at www.amdzone.com .

Register with the site then go to the forums, find a topic, and reply to it.
Be sure to hit the 'Post Reply' button and not look at the 'Quick Reply'
section at the bottom of each page. Notice that clicking on an icon inserts
characters representing that icon into the text box whereever the cursor is
at. If the cursor isn't in the textbox, the characters are inserted into
the box at the end of the text currently in the box or at the beginning of
the box if no text has been entered.

I would post the JS code I stripped from the site page but I need to be
running out the door in about 20 seconds. If you need it, let me know and
I'll post it later on when I get back tonight. Thanks for any assistance.

Chris Smith

"Evertjan." <ex************ **@interxnl.net > wrote in message
news:Xn******** ************@19 4.109.133.29...

who be dat? wrote on 10 aug 2004 in comp.lang.javas cript:

Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area.

easy

If the
cursor is in the textbox/textarea then the characters are to be
inserted at the cursor location. This means if the cursor is between
some text then the characters need to be inserted in between the text
exactly where the cursor is.

Impossible, for so far as I know.

I know a bit about Javascript but am far from an expert. I found a
webpage that does this and copied the code from it.

Show us the URL, please.

Can't get it working though.

As expected? ;-)

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Michael Winter]

On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? <wh******@dot.c om> wrote:

I want a user to be able to click on a given image (there will bemore
than one image). Upon clicking a given image, charactersspeci fic to
that image will be inserted into a textbox which isactually a text area.
No problem there. I take it this will be used in a forum (or something
similar) to insert smilies or formatting code?
If the cursor is in the textbox/textarea then the characters are tobe
inserted at the cursor location. This means if the cursor isbetween
some text then the characters need to be inserted inbetween the text
exactly where the cursor is.
Ah. This is a problem. There is no standard way to get the current
location of the carat within a control in all browsers. Some browsers may
provide proprietary properties or methods to obtain this information (IE
does), but I expect most will not.
If the cursor is not in the textbox/textarea then the charactersneed to
be displayed at the end of any text or at the start ifthere is no text
present.

This adds another problem. There is no intrinsic way to determine whether
a control has focus. You would have to track it yourself with focus/blur
events.

I'll mention now that writing code specific to IE is not my forte (I
despise the browser, so I spend little time with it). The code below does
essentially what you want, though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Test</title>

<script type="text/javascript">
if(document.get ElementById) {
var getRefById = function(id) {
return document.getEle mentById(id);
};
} else if(document.all ) {
var getRefById = function(id) {
return document.all[id];
};
} else {
var getRefById = function() {
return null;
};
}

function insertText(str) {
var e = getRefById('tes t'), s = null, r = null;

if(e) {
if((s = document.select ion) && s.createRange) {
var repos = false;

/* Element must have focus otherwise text
* will be written into other elements. */
e.focus();
if((r = s.createRange() )) {
if(r.text.lengt h) {repos = true;}
r.text = str;
/* Clear the selection to stop continuous
* overwriting of inserted text. */
if(repos && s.empty) {s.empty();}
}
} else {
e.value += str;
}
}
}
</script>
</head>

<body>
<div>
<img src="happy.png" alt="Happy" onclick="insert Text(':)')">
<img src="sad.png" alt="Sad" onclick="insert Text(':(')">
</div>
<div>
<textarea id="test" cols="50" rows="5"></textarea>
</div>
</body>
</html>

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[who be dat?]

No problem there. I take it this will be used in a forum (or something
similar) to insert smilies or formatting code?
Exactly!! Good guess.
Ah. This is a problem. There is no standard way to get the current
location of the carat within a control in all browsers. Some browsers may
provide proprietary properties or methods to obtain this information (IE
does), but I expect most will not.
<snip>
This adds another problem. There is no intrinsic way to determine whether
a control has focus. You would have to track it yourself with focus/blur
events.
See the code I'm attaching below...
I'll mention now that writing code specific to IE is not my forte (I
despise the browser, so I spend little time with it). The code below does
essentially what you want, though.

<<snip>>

Thanks for the code. I'm pooped right now, had a really busy day. I'll try
it tomorrow or soon. I installed SP2 recently. Everything is running fine,
but it's been a while since I reinstalled everything. I think I'll do that
tomorrow for the heck of it. Anyway....

I'll post fragments of the code below which came from a reply page at
www.amdzone.com.

All the code was in the body of the HTML document. The little JS code I saw
in the head of the document didn't appear to have anything to do with this
but I could be wrong.

First, the actual function that handles this:

<script language="JavaS cript" type="text/javascript">

<!--

function emoticon(text) {

var txtarea = document.post.m essage;

text = ' ' + text + ' ';

if (txtarea.create TextRange && txtarea.caretPo s)

{

var caretPos = txtarea.caretPo s;

caretPos.text =
caretPos.text.c harAt(caretPos. text.length - 1) == ' ' ? caretPos.text + text
+ ' ' : caretPos.text + text;

txtarea.focus() ;

}

else

{

txtarea.value += text;

txtarea.focus() ;

}

}

//-->

</script>

Next, the code that displays the image and calls the function when the image
is clicked:

<a href="javascrip t:emoticon(':D' )"><img
src="./modules/PNphpBB2/images/smiles/icon_biggrin.gi f" border="0" alt="Very
Happy" title="Very Happy" width="15" height="15" /></a>
Here is the code for the text area. This appears to handle the focus and
other issues you referred to above.

<textarea class="post" id="message" name="message" rows="15" cols="35"
style="width:45 0px;height:202p x" tabindex="3" onselect="store Caret(this);"
onclick="storeC aret(this);" onkeyup="storeC aret(this);"></textarea>
The error I get occurs when I click an image and the function is called. It
appears the very first line in the function causes the problem. If I
understand this line correctly, it's try to pull all the text out of the
text area and store the text in a variable. However, the error message I
got (don't recall the exact wording) seemed to indicated it couldn't find
the object (the textarea) to pull the text from or the object doesn't exist.

Again, I'll give your code a shot. However, you sound like you aren't
confident it will do what I'll need it to do. Any idea why this code isn't
working in my webpage?

Thanks again!!

Chris Smith

[Michael Winter]

On Tue, 10 Aug 2004 22:38:31 -0400, who be dat? <wh******@dot.c om> wrote:

[snip]

Just so you know (I say this to everyone)...

<script language="JavaS cript" type="text/javascript">
The language attribute has been deprecated for years and shouldn't be
used. Moreover, the type attribute makes the language attribute redundant.
<!--
The practice of script hiding is now obsolete. Even browsers that can't
execute scripts still understand what a SCRIPT element is.

[snipped script]
//-->
That goes, too.
</script>

Next, the code that displays the image and calls the function whenthe
image is clicked:

<a href="javascrip t:emoticon(':D' )"><img
src="./modules/PNphpBB2/images/smiles/icon_biggrin.gi f" border="0"
alt="Very Happy" title="Very Happy" width="15" height="15" /></a>
It would be better to write that as

<img ... onclick="emotic on(':D')">

Now all that's out of the way...
<textarea class="post" id="message" name="message" rows="15"cols=" 35"
style="width:45 0px;height:202p x" tabindex="3"
onselect="store Caret(this);" onclick="storeC aret(this);"
onkeyup="storeC aret(this);"></textarea>
Without seeing the storeCaret() function, I can't tell what
txtarea.caretPo s refers to in the script you posted.
The error I get occurs when I click an image and the function iscalled.
It appears the very first line in the function causes theproblem. If I
understand this line correctly, it's try to pull allthe text out of the
text area and store the text in a variable.Howeve r, the error message I
got (don't recall the exact wording)seemed to indicated it couldn't find
the object (the textarea) topull the text from or the object doesn't
exist.
The line,

var txtarea = document.post.m essage;

attempts to get a reference to the element named/id'd message in the form
named/id'd post. From that, you can access the various properties of the
element, including the value property. If this line fails, it implies that
either there is no form named post, or no control named message.
Again, I'll give your code a shot. However, you sound like youaren't
confident it will do what I'll need it to do. [...]

As I said, I'm not familiar with the peculiarities of IE (nor do I really
want to be). It'll do what you want, but there might be a better way.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[Dr John Stockton]

JRS: In article <opscm0hd06x13k vk@atlantis>, dated Thu, 12 Aug 2004
20:55:44, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
ueyonder.co.inv alid> posted :

<!--

The practice of script hiding is now obsolete. Even browsers that can't
execute scripts still understand what a SCRIPT element is.

You are there assuming that browsers are the only type of software that
reads Web page files. There exists at least one publicly-available
program which processes HTML files but does not know that SCRIPT can
bracket non-HTML. I use it several times a day.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demo n.co.uk/programs/00index.htm>.
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)