Make a clickable link in a text area

[penguine]

How to make a clickable link in a text area.I use text area to display content getting from database and file.I use this because text area is scrollable.I got function to parse the content and convert url if any to clickable link,but it doesnot work for me.When a url displays on the text area all i get its anchor tags and other attributes,instead of clickable link.Is there a way to display link in a textarea ?

[Synook]

I use this because text area is scrollable

Why not just use a division <div> tag with CSS overflow:scroll and set height and width? That would be far simpler than trying to get hyperlinks in a textarea, as that requires extensive JavaScript. E.g.

<div style="overflow:scroll; width:600px; height:200px; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non tellus nec quam dapibus ultrices. Curabitur interdum. Nulla facilisi. Integer tempus adipiscing nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam vel erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel eros. Etiam tristique laoreet pede. Curabitur a mi. Ut ac tellus laoreet augue condimentum rutrum. Aliquam tortor est, facilisis ullamcorper, viverra sed, gravida eu, nibh. Donec eleifend justo id ipsum. Praesent nulla mi, volutpat at, cursus vel, egestas vel, odio. Vivamus molestie porttitor sem. Aenean laoreet. Cras tortor felis, vulputate consequat, placerat sit amet, euismod eget, tortor. Suspendisse potenti.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac nulla. Maecenas consequat dolor vitae enim. Quisque non nisi ut pede suscipit condimentum. Quisque et sem. Quisque semper iaculis nulla. Nunc volutpat sapien. Duis tellus quam, consectetuer et, molestie non, condimentum in, lectus. In egestas dolor vel pede. Etiam quis nulla. Maecenas pellentesque magna ac dui. Nullam porttitor euismod diam. Phasellus a elit. Duis non nisi.Duis eleifend urna quis neque cursus varius. Mauris risus. Aenean at justo. Morbi diam dolor, rhoncus eu, pretium at, auctor eget, arcu. Ut non nunc. Donec a elit quis ipsum tristique ornare. In tincidunt leo vel neque. Aliquam libero mi, placerat sed, mollis eu, commodo sit amet, libero. Pellentesque volutpat nisl in tortor. Nam consectetuer pharetra elit. Nam rutrum, sapien ac commodo cursus, dui turpis varius sem, at ultrices libero ligula ut mi. Proin tellus. Duis interdum mi sit amet est venenatis lacinia. Praesent tincidunt, velit sit amet lobortis aliquet, nibh urna aliquam sapien, et consectetuer orci odio egestas ipsum. Nam lacus. Pellentesque et arcu. Mauris rutrum, ante vitae adipiscing dignissim, magna lacus pretium risus, in gravida nisi augue non neque. Ut sodales ultrices mi. Morbi eros arcu, cursus at, imperdiet quis, dignissim dignissim, enim. </div>

[penguine]

Ya ,its worked,thanks .Now i get clickable link.But there are some minor problems also.1.The scrollable display is there(up arrow and down arrow),how i get rid of this.I don't need to show this till the text overflows.i used overflow-x:hidden,but the text after the x size disappears instead of scrolling vertically.2.I need scrolling only in vertical direction.How i disable horizontal scrolling?3.When i click the link ,particularly in Firefox,it open in the same window,in new tab.how should i make it to open in new window?4.How to enforce new line in div?

[Synook]

1.The scrollable display is there(up arrow and down arrow),how i get rid of this.I don't need to show this till the text overflows.i used overflow-x:hidden,but the text after the x size disappears instead of scrolling vertically.

Use overflow:auto;

3.When i click the link ,particularly in Firefox,it open in the same window,in new tab.how should i make it to open in new window?

You can't there are no controls for switching between new tab / new window. Anyway, the target attribute is deprecated in XHTML, so why bother?

2.I need scrolling only in vertical direction.How i disable horizontal scrolling?4.How to enforce new line in div?

You can create another division within that with a width that is slightly smaller, then newlines will be enforced for lines longer than that width. E.g.

<div style="overflow:scroll; width:600px; height:200px; "><div style="width:590px; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non tellus nec quam dapibus ultrices. Curabitur interdum. Nulla facilisi. Integer tempus adipiscing nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam vel erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel eros. Etiam tristique laoreet pede. Curabitur a mi. Ut ac tellus laoreet augue condimentum rutrum. Aliquam tortor est, facilisis ullamcorper, viverra sed, gravida eu, nibh. Donec eleifend justo id ipsum. Praesent nulla mi, volutpat at, cursus vel, egestas vel, odio. Vivamus molestie porttitor sem. Aenean laoreet. Cras tortor felis, vulputate consequat, placerat sit amet, euismod eget, tortor. Suspendisse potenti.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac nulla. Maecenas consequat dolor vitae enim. Quisque non nisi ut pede suscipit condimentum. Quisque et sem. Quisque semper iaculis nulla. Nunc volutpat sapien. Duis tellus quam, consectetuer et, molestie non, condimentum in, lectus. In egestas dolor vel pede. Etiam quis nulla. Maecenas pellentesque magna ac dui. Nullam porttitor euismod diam. Phasellus a elit. Duis non nisi.Duis eleifend urna quis neque cursus varius. Mauris risus. Aenean at justo. Morbi diam dolor, rhoncus eu, pretium at, auctor eget, arcu. Ut non nunc. Donec a elit quis ipsum tristique ornare. In tincidunt leo vel neque. Aliquam libero mi, placerat sed, mollis eu, commodo sit amet, libero. Pellentesque volutpat nisl in tortor. Nam consectetuer pharetra elit. Nam rutrum, sapien ac commodo cursus, dui turpis varius sem, at ultrices libero ligula ut mi. Proin tellus. Duis interdum mi sit amet est venenatis lacinia. Praesent tincidunt, velit sit amet lobortis aliquet, nibh urna aliquam sapien, et consectetuer orci odio egestas ipsum. Nam lacus. Pellentesque et arcu. Mauris rutrum, ante vitae adipiscing dignissim, magna lacus pretium risus, in gravida nisi augue non neque. Ut sodales ultrices mi. Morbi eros arcu, cursus at, imperdiet quis, dignissim dignissim, enim.</div></div>

[penguine]

I use overflow:auto.But it scrolls horizontally when text overflow in x direction .I need scrolling only in vertical and all my text should appear on the window (if i use overflow-x:hidden i don't get all text that overflows in x direction).Also new line is important so creating div is not an option.Because this is a chat program.Any idea?

[Synook]

The code I posted above should do the trick - it simply has another div within the overflow:auto div that is width-restricted.

[penguine]

Unfortunately that didn't work.

[Synook]

You mean you the text still overflows horizontally? What code do you have atm?

[penguine]

Code is

<div  style="overflow:auto;width:437px; height:250px;background-color:#FFFFFF;">		<div id="getData" style="width:400px; "></div></div>

.When overflows it overflow horizontally.Also newlines are not taking into consideration like text area.what may be the problem?

[Synook]

For newlines use the break <br /> tag.My code works for me, what sort of text are you trying to put in it? If you put one long word (like "AAAAAA...AAAAAAAAAA") it won't work, as the renderer won't break a word in the middle.

[penguine]

As i said earlier its chat program.when the user enter the data and submit it writes to a file and then displayed in the div from the file .For converting or preserving new line i use chr(13) with str_replace.Its working fine in text area ,but not in div.Also i tested the code in firefox and ie for overflow.Both show the same.I think its a heavy price to pay for displaying clickable link.

[Synook]

Could you please paste the output source code (not the unprocessed code) for us to see? I think I know what the problem is.And newline control characters aren't converted to HTML breaks, you need to use the <br /> tag.

[penguine]

you mean the code for getting content from file.If so this is the code.

$msg=file_get_contents($file);$msg=str_replace("<br>",chr(13),$msg);echo $msg;

[Synook]

Well, get rid of the $msg=str_replace("<br>",chr(13),$msg);.But I mean the HTML source that is produced when you open the page in a browser. There may be further sub-elements that are pushing the page over. A link would be alright, too.

[penguine]

Actually i already commented the str_replace.The program is in the testing stage.So currently no link available to give.The html source is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Chat</title><script type="text/javascript" src="scripts/prototype.js"></script><style type="text/css"><!--a:link {	text-decoration:none;}a:visited {	text-decoration: none;}a:hover {	text-decoration: none;}a:active {	text-decoration: none;}.style1 {	color: #FFFFFF;	font-family: "Times New Roman", Times, serif;}--></style></head><body bgcolor="#999999">		<table  width="550"  border="1" align="center" bgcolor="#EBEBEB"  style="border:thin">		   <tr>				<td height="23" colspan="2"  bgcolor="#F0F0F0">				<div id="menu">					  <table>					  <tr><td>File</td>					  <td>View</td><td></td><td ></td><td><label id="">              					  <font color="#FF9900">Chatting with user10</font></label></td>					  </tr>					 </table>									</div>			</td>		  </tr>			  <tr>				<td width="437"  bgcolor="#EBEBEB" valign="top">				<!--<div id="getData" style="overflow:scroll; width:437px; height:250px;background-color:#FFFFFF;">-->		<div  style="overflow:auto;width:437px; height:250px;background-color:#FFFFFF;">		<div id="getData" style="width:400px; ">				  <font color="#000099" size="-2" face="Times New Roman, Times, serif"><span id="offtext"></span></font></div>				</td>				<td width="97" rowspan="2" valign="top" bgcolor="#F0F0F0">				<div id="users">					  <table>					  <tr><td valign="top">															   <font color="#0000FF"><a  href="#" onclick="java script:openNewPopup('<br /><br />,user1')" >										user1<br></a></font>										 										 <font color="#0000FF"><a  href="#" onclick="java script:openNewPopup('<br /><br />,user4')" >										user4<br></a></font>										 										 <font color="#0000FF"><a  href="#" onclick="java script:openNewPopup('<br /><br />,user7')" >										user7<br></a></font><br />,user10')" >										user10<br></a></font>										 					  </td></tr>					  </table>					  </div>				</div>				</td>			  </tr>			  <tr>				<td height="69" colspan="1">				<div id="submitData">				<textarea id="submitText" cols="52" rows="3" style="overflow-y:auto;" ></textarea>				<input type="hidden" id="user" value="admin" />				<input type="hidden" id="partner" value="user10" />				<input type="hidden" id="winstat"value="1" />				<input type="button" name="send" id="send" value="Send" onclick="sendData()" />				</div>				</td>				  </tr></table>	<script language="javascript">	function openNewPopup(username){		username=username.split(',');	user_id=username[0];	partner_id=username[1];	window.open("chat.php?user=" + escape(user_id) +"&partner=" +escape(partner_id),"","status=yes,menubar=no,width=565,height=450");	  }		  		new Ajax.Request(file+'?'+str,		 {			method:'get',			onSuccess: function(transport){			 				 		var response = transport.responseText;								  handleResponse(response);								},			onFailure: function(){ alert('Cannot load data, something went wrong...') }		  });					function handleResponse(response) 			{  					$('offtext').innerHTML =response;				 }   					  	  				file=file+'?'+str;						new Ajax.Request(file,		 {			method:'get',			onSuccess: function(transport1){			 				 		var response1 = transport1.responseText;								   handleResponse1(response1);								 	},			onFailure: function(){ alert('Cannot load data, something went wrong...') }		  });		  						 			function handleResponse1(response1) 			{	 					var getData=$('getData').innerHTML;					if(response1!=null){								$('getData').innerHTML =response1+getData;					}							}				  			 			 		</script></body></html>

[justsomeguy]

Gah, attack of the bad formatting.The div container works like you want in Opera, IE, and Firefox. All I see is a vertical scrollbar, no horizontal.

[penguine]

Can u explain pls?

[justsomeguy]

I mean that it works like you want in Opera, IE, and Firefox. All I see is a vertical scrollbar, no horizontal.

[penguine]

But i didn't get the desired result.Is their any problem with my code?

[Synook]

Wierd - any chance of a link?