Page 1 of 1

how do...

Posted: Sat Feb 01, 2003 1:04 pm
by AndrewBacca
sry I wasnt with it!!

I was pointing at the smiles

when you click on the image text appears in here how? ive been tring for ages and I aint managed to get it working.

anyone help please :)

Andrew

Posted: Sun Feb 02, 2003 4:47 am
by AndrewBacca
Ive got it so when I click a button it places text in the "<textarea>" but it only places at the end after all the current text that is there.

how can I have it so that when the button is clicked it places the text where ever the cursor is?

Andrew

Posted: Sun Feb 02, 2003 8:58 am
by patrikG
Depends which browser this is.
Probably the most crossbrowser code would be:

1.track the mouse
2. create a layer
3. bind the x,y of the layer to the mouse
4. onSubmit-Event of <button> triggers update content of layer = content of <textarea>

Question is: do you really need this or would be a toy you would forget about a week after?

Posted: Sun Feb 02, 2003 11:53 am
by AndrewBacca
yes I do need it!!

im creating a members control panel where they can send personal messages to other members and add news posts (and some of the people that dont know much html may want to add a link or make some text bold) so I have created some buttons so that when they click them it places the text in the textarea, but I want it to appear where ever they choose not just at the end.

are there any tutorials or sample code out there?

Andrew

Posted: Mon Feb 03, 2003 2:04 am
by twigletmac
For sample code you can look at the source of the posting page - JavaScript is clientside so if you see something you like you can just do view->source to see how it's done.

Mac

Posted: Mon Feb 03, 2003 9:36 am
by patrikG
I misunderstood you earlier. Forget that stuff with mousetracking etc...

Well, you will need to be able to locate where in your <textarea> the cursor is.

In IE you could create a textrange - but that's IE4+ only, plus it's buggy.

Just to float some ideas - keep track of where the cursor is:

say you have a variable

<script language=javascript>
var textareaCursorPosition=0;
</script>

Use the onKeyPress-Event to keep track of what is put into the <textarea>

With each key pressed (note: not an arrow-key etc.), textareaCursorPosition increases by one. The arrow-keys need to be bubbled differently: depending on which arrow-key it's increasing or decreasing textareaCursorPosition.

Suppose the user has moved the cursor somewhat back in the text and then clicks on one of your buttons.

You assign the text of <textarea> to a variable with

document.getElementById("textarea").value

and use one of the javascript string-functions to insert the text you want to insert at the string-position textareaCursorPosition. Then assign

document.getElementById("textarea").value the value of your string.

Of course, this doesn't work when people click with their mouse.

Posted: Mon Feb 03, 2003 4:27 pm
by bionicdonkey
i'm not totally sure what you are talking about but here's a function i made for smilies. when the user clicks on a image,

Code: Select all

$image = "<a href="javascript:emoticon('". stripslashes($smiliecode[$i]) ."')"><img border="0" src="../images/smilies/". $imagename[$i] .""></a>";
it invokes the javascript function emoticon

Code: Select all

&lt;script language="javascript" type="text/javascript"&gt;
&lt;!--

//This script goes at the top of the page

function emoticon(smiliecode) &#123;
	document.thread.posttext.value += smiliecode+" ";
	document.thread.posttext.focus();
&#125;
//--&gt;
&lt;/script&gt;
then when the form data is submitted it is given to the function i made to change the smilie code into a html image tag.

Code: Select all

<?
//======================================================================
// Bionic Donkey Research Facility Online :: require/smilie.php
//
// Copyright (C) 2002-2003 Josh BenoƮt. All rights reserved. 
// 	This program is free software licensed under the 
// 	GNU General Public License (GPL).
//
// This code may be redistributed as long as this text is present.
// This text may be edited but only to state addition made the script.
//
// Bionic Donkey Research
// http://bionicdonkey.host.sk
//
//=====================================================================

//---Emoticons function---\\

function addSmilies($input) {

	//---Database Stuff---\\
	require("Connections/donkey.php");
	mysql_select_db($database_donkey, $db);

	$smilies_query = mysql_query("SELECT * FROM emoticons", $db);
	while($row = mysql_fetch_array($smilies_query)) {
		if(!isset($smiliecode)) {
			$smiliecode = array($row['code']);
		} else {
			array_push($smiliecode, $row['code']);
		} 
		if(!isset($imagename)) {
			$imagename = array($row['imageName']);
		} else {
			array_push($imagename, $row['imageName']);
		} 
	}
	
	$elements = count($smiliecode);
	$tmp = count($imagename);
	
	if($elements !== $tmp) {
		die("Something's not working in DB");
	}
	
	for($i = 0; $i < $elements; $i++) { // Do while value of $i is less than than the total amount of emoticons
	
		$image = "<img src="../images/smilies/". $imagename[$i] ."">";
	
		$output = str_replace($smiliecode[$i], $image, $input); // Replace the symbol with the image
		$input = $output; // Add change string back into the input and continue looking for symbols (if loop is still valid) 
		
	}
	return $output; 

}


?>
Tis script needs to be included in the page before the functoin is called to change the data

Posted: Tue Feb 04, 2003 3:19 am
by AndrewBacca
thanks alot everyone ive got it sorted now.

Code: Select all

<HTML>
<HEAD>
<TITLE></TITLE>
<script LANGUAGE="JavaScript">

function storeCaret (textEl)
&#123;
if (textEl.createTextRange) 
	textEl.caretPos = document.selection.createRange().duplicate();
&#125;

function insertAtCaret (textEl, text)
&#123;
	if (textEl.createTextRange && textEl.caretPos)
&#123;
	var caretPos = textEl.caretPos;
	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
&#125;
else
	textEl.value  = text;
&#125;
</script>
</HEAD>
<BODY>
	<FORM>
	<textarea rows="5" name="ta_message" cols="20"ONSELECT="storeCaret(this);"ONCLICK="storeCaret(this);"ONKEYUP="storeCaret(this);"></textarea>
	<INPUT TYPE="button" VALUE="Click Me"
		ONCLICK="insertAtCaret(this.form.ta_message,'Appearing text');">
</FORM>
</BODY>
</HTML>
That works :D

thanks again everyone :)
Andrew

Posted: Tue Feb 04, 2003 8:38 am
by patrikG
textRange is IE-only - of course it's elegant, but it can be buggy at times.

Below is some cross-browser code - not too advanced but it should be ok.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=content-type content=text/html;charset=iso-8859-1>
<script language="Javascript">

function smile()
&#123;
 smileText=document.getElementById('textarea1').value;
 tempText1=smileText.substring(0,cursorPos);
 tempText2=smileText.substring(cursorPos,smileText.length);
 document.getElementById('textarea1').value=tempText1+":)"+tempText2;
 cursorPos=smileText.length+2;
&#125;

function keyPress(e) 
&#123;
var textlength=document.getElementById('textarea1').value;
if(navigator.appName == "Netscape")
	var keypressed = e.which;
else
	var keypressed = event.keyCode;
 switch(keypressed) 
    &#123; case 37: // LEFT ARROW 
	  cursorPos--;
//		alert(cursorPos);
	  return;
      case 39: // RIGHT ARROW 
	  if (textlength.length>cursorPos)
	  	cursorPos++;
//		alert(cursorPos+" length: "+textlength.length);
	  return;
	  default: 	cursorPos++;
    &#125;
&#125;
if(navigator.appName == "Netscape")
	document.onkeydown = keyPress;
var cursorPos=0;
</script>
<BODY bgColor="#ffffee"><BR><BR>
<TEXTAREA id=textarea1 rows=10 cols=50 onkeydown="keyPress()"></textarea>
<input type=button value=Smilie onClick="smile();">
</FORM></BODY></HTML>