PDA

View Full Version : button target textarea



insanemonkey
10-06-2007, 09:18 AM
well I didn't know how to label this, but here I go..

I have a forum and on my reply page i have a textarea where people put text(obviously) but on that page I want to put smilies..

lets say I have a image on that page that when you push it, it will send a message to the textarea and put text into the textarea, is this possible?

If you guys are going to say, Use the WYSIWYG thingy but I dont want all those things and I want mine totally different, so please you javascript coders here my roar,lol...

Thanks...

I have posted this a long time ago kinda but no one answered my last question.
link to it is here: http://www.dynamicdrive.com/forums/showthread.php?t=24986&highlight=textarea

and read last post...

I want to have like 8 buttons and all buttons with different outputs...

coothead
10-06-2007, 11:34 AM
Hi there insanemonkey,

have a look at this example - (thanks to http://www.dynamicdrive.com/forums for the use of their smilies :D) - it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<base href="http://www.dynamicdrive.com/forums/images/smilies/">

<style type="text/css">
body {
background-color:#ffe;
}
#smilies,#container {
text-align:center;
}
#smilies img {
padding:0.7em;
border:1px solid #999;
margin:0.6em 0.2em;
background-color:#fff;
cursor:pointer;
}
#ta {
width:24em;
height:7em;
padding:1em;
border:1px solid #999;
background-color:#ff9;
font-family:verdan,arial,helvetica,sans-serif;
font-size:1em;
color:#600;
}
</style>

<script type="text/javascript">
window.onload=function() {
pic=document.getElementById('smilies').getElementsByTagName('img');
for(c=0;c<pic.length;c++) {
pic[c].id=c;
pic[c].onclick=function(){
addTextToTextarea(this.id);
}
}
}
function addTextToTextarea(num){

message=[
'message one',
'message two',
'message three',
'message four',
'message five',
'message six',
'message seven',
'message eight'];

document.getElementById('ta').value=message[num];
}
</script>

</head>
<body>

<div id="smilies">
<img src="smile.gif" alt=""/>
<img src="rolleyes.gif" alt=""/>
<img src="mad.gif" alt=""/>
<img src="tongue.gif" alt=""/>
<img src="wink.gif" alt=""/>
<img src="biggrin.gif" alt=""/>
<img src="redface.gif" alt=""/>
<img src="frown.gif" alt=""/>
</div>

<div id="container">
<textarea id="ta" rows="1" cols="1"></textarea>
</div>

</body>
</html>
coothead

insanemonkey
10-06-2007, 05:07 PM
Ok there is one problem, when I write text in the box the text dissapears and it just shows message one,two,three... its there a way to add it into the box without it deleting the message...

insanemonkey
10-06-2007, 05:49 PM
sorry for double posting... but I think dynamcidrive should put this on thier website...


<SCRIPT LANGUAGE=javascript>
<!--
var undoLastText = "Reset (no previous record)"

function storeCaret(TextAreaContent)
{
if (TextAreaContent.createTextRange) TextAreaContent.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret(TextAreaContent, text)
{
if (TextAreaContent.createTextRange && TextAreaContent.caretPos)
{
var caretPos = TextAreaContent.caretPos;
undoLastText = document.all.frmAdd1.Copy.value;
caretPos.text = '['+text+']'+caretPos.text+'[/'+text+']';
document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');

}
else
alert("Please select some text for formatting");
}
function insertLinkAtCaret(TextAreaContent, text)
{
if (TextAreaContent.createTextRange && TextAreaContent.caretPos)
{
var caretPos = TextAreaContent.caretPos;
undoLastText = document.all.frmAdd1.Copy.value;
cheese = prompt('Please enter the full URL for this link','http://');
caretPos.text = '['+text+'="'+cheese+'"]'+caretPos.text+'[/'+text+']';
document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');
}
else
alert("Please select the word or phrase which you wish to hyperlink");
}
function replace(string,text,by) {
// Replaces text with by in string
var strLength = string.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return string;

var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,txtLength))) return string;
if (i == -1) return string;

var newstr = string.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(string.substring(i+txtLength,strLength),text,by);

return newstr;
}
function undoLast()
{
document.all.frmAdd1.Copy.value = undoLastText;
document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');

}
//-->
</SCRIPT>


</HEAD>
<BODY>



<FORM ID="frmAdd1" NAME="frmAdd1">

TEXTAREA:<BR>

<TEXTAREA STYLE="padding: 5px; background: palegreen; border: 1px solid black; font-family: verdana, arial, sans-serif; color: black; font-size: 10pt; width: 360;" COLS="50" ROWS="7" NAME="Copy" ID="Copy" onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);">I wandered lonely as a cloud
That floats on high o'er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils,
Beside the lake, beneath the trees,
Fluttering and dancing in the breeze.</TEXTAREA><P>

<SPAN STYLE="font-family: verdana, arial, sans-serif; font-size: 8pt;">Select some text above, then click a format button - a bit like in Word</SPAN><P>

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-weight: bold; width: 30px;" VALUE="B" onClick="insertAtCaret(this.form.Copy,'B');" ID="BoldButton" NAME="BoldButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-style: italic; font-weight: bolder; width: 30px;" VALUE="I" onClick="insertAtCaret(this.form.Copy,'I');" ID="ItalicButton" NAME="ItalicButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; text-decoration: underline; font-weight: bolder; width: 30px;" VALUE="U" onClick="insertAtCaret(this.form.Copy,'U');" ID="ItalicButton" NAME="ItalicButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; text-decoration: underline; font-weight: bolder; width: 80px; color: blue; cursor: hand;" VALUE="Add Link" onClick="insertLinkAtCaret(this.form.Copy,'url');" ID="LinkButton" NAME="LinkButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-weight: bolder; width: 80px; color: green; cursor: hand;" VALUE="Undo Last" onClick="undoLast();" ID="UndoButton" NAME="UndoButton"><P>

<BR><BR>
<img src="http://www.xudas.com/images/xudasaffy.gif" border="0" onClick="undoLast();" ID="UndoButton" NAME="UndoButton"><P>


</FORM>
</BODY>
</HTML>


I was playing with this.. and it works better then yours .. Thanksyou though..

coothead
10-06-2007, 06:00 PM
Hi there insanemonkey,

when I write text in the box the text dissapears and it just shows message one,two,three...
is there a way to add it into the box without it deleting the message...
change this line...

document.getElementById('ta').value=message[num];
...to this...

document.getElementById('ta').value+='\n'+message[num];
coothead
p.s.

I was playing with this.. and it works better then yours ..
Have you tried it in FireFox?

insanemonkey
10-07-2007, 02:32 PM
Thankyou so much, i am going to test it later..