Jump to content

Make a clickable link in a text area


penguine
 Share

Recommended Posts

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 ?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...