473,570 Members | 2,914 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
Jul 23 '05 #1
12 8349
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
Jul 23 '05 #2
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

Jul 23 '05 #3
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
Jul 23 '05 #4
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)
Jul 23 '05 #5
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)

Jul 23 '05 #6
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
Jul 23 '05 #7

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
Jul 23 '05 #8
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
Jul 23 '05 #9
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)
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
9482
by: Chris Coho, Jr. | last post by:
Ok, I'll explain the whole problem because there may be several ways to solve this and hopefully someone knows one. What I'm doing is creating a specialty template editor, similar to say a corel draw (but for specific uses). What I need to be able to do is import graphics and text and then move them around the background until they are where...
6
1796
by: Patrick | last post by:
How do you insert a jpg picture from file on to an area of a dialog box I can do this using picturebox to insert a jpg picture onto a form, but the picturebox control is not available for a dialog box Thanks -- Patrick
1
1694
by: kimmie | last post by:
I am using buttons on a toolbar and I want to use the buttons as toggles. When I click the button the first time I want my picture box to display by setting the picture box to visible. But I need to add a button click event that handles the second click to set the picture box to invisible. How do I do that? This is what I am thinking will help...
4
2962
by: Andre Nogueira | last post by:
Hi there. I have one question... How can I create a bitmap (programmatically), paint it to a picture box and have a transparent background? I don't know what will be below the picturebox because the user can move it around, so there could be a textbox, another picture, a button or nothing below the picture box. Setting the background color...
7
3631
by: RobKinney1 | last post by:
The subject line sounds a little funny, let me quickly explain: I have created a custom control using ComboBox. But inside my class, I need to know when the user does NOT click my control. Of course, I can capture the event Click when someone clicks on the actual control, but not when they click off of it. Right now I am using the...
5
2109
by: wxnut | last post by:
In VB 2005 I have six seperately named picture boxes (arranged in a table layout control) in which I plot different X/Y data lines. I would like to be able to right-click on a specific picture box (say, plot #3) and select a different line color for that one plot. How can I figure out which of the six plots is the one in question when...
3
1793
by: =?Utf-8?B?SmVycnk=?= | last post by:
I have the following code and it returns the x and y coordinates in the text box, but when I click the mouse on say 362,61 does not bring up form2.Any suggestions? Thanks, Jerry Private Sub PictureBox1_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseClick Dim mouseX As Integer =...
0
1907
by: e_spork | last post by:
I am using Page.ClientScript.RegisterStartupScript to throw up a Javascript alert box. When I click OK on the alert box, all the controls on my page disappear and I don't understand why. I can View Source in the browser and see all the controls so I know they are there, yet they vanish once I click OK. This is happening on a Content page. ...
2
4390
by: erbear | last post by:
Hi all, I am new to VB, and I am having some troubles. I have a listbox that when you click on the item it displays a picture in a picture box and a message in a label. It works fine when an item is manually selected, but I want forward and back buttons that will do this. It works once but it doesn't highlight the new item in the listbox, so...
0
7724
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7633
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7944
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
5523
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3681
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3671
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2131
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1238
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
971
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.