QUOTE(karan @ May 13 2006, 09:30 AM) [snapback]34032[/snapback]
Hi Friends ,
I want to add some text in DIV at cursor point can anybody tell be how can i do this ?
in DIV not in textarea !
like in our forum's editor !!!
What I would do is use the event object's clientX, clientY properties to calculate the distant of the mouse from the left and top of the element. You can then use the style object to set the padding.
As an example, this should
kind of work in Gecko browsers:
CODE
<html>
<head>
<style type="text/css">
div.test {
margin: 0px;
position: relative;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
text="testing text testing text testing text";
function addtext(e) {
//calculate where the text needs to be
left=e.clientX-parseInt(e.target.style.left+0);
top=e.clientY-parseInt(e.target.style.top+0);
//set padding
e.target.style.paddingTop=top+"px";
e.target.style.paddingBottom="0px";
e.target.style.paddingRight="0px";
e.target.style.paddingLeft=left+"px";
//add text
e.target.innerHTML=text;
}
</script>
</head>
<body>
<div class="test" style="top: 0px; left: 0px;" onClick="addtext(event)"></div>
</body>
</html>
This isn't the best way to do it, for sure but I hope it gives you an idea. It would probably be better to use the same idea and rather than messing with the padding, positon a nested DIV's top and left within the parent DIV. The child DIV would hold the text.