Develop Reference

Add elements to textarea by clicking a button

I want to add text to textarea when user clicks a button. I have used the code bellow :
<script>
document.addEventListener('DOMContentLoaded', start, false);
function start(){
document.getElementById("button0").addEventListener("click", function(){
addText(this);
});
function addText(elem) {
document.getElementById("transcript").innerHTML += elem.value;
}
};
</script>
When the users click the button the text added to the textarea but the moment they type using their keyboard they won't be able to add the text using the button anymore.

use .value not .innerHTML.
.innerHTML overwrites the markup of the element, not just the text. Since it's a form element you should be manipulating its value only.
document.getElementById("button0").addEventListener("click", function() {
document.getElementById("transcript").value += "huh";
});
#transcript {
height: 100px;
}
<button id="button0">Click Me</button>
<textarea id="transcript"></textarea>

Truncate Text - Show full text in Tooltip on mouseover

Currently I output a text from my database with the following code:
if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }
I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:
<script>
var lengthText = 10;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('p').text(shortText);
$('p').hover(function () {
$(this).text(text);
}, function () {
$(this).text(shortText);
});
</script>
Now I do not like the style of the outcome and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?
I would really appreciate your any help.
Thanks,
Chris

Add your original text in title attribute of p tag which I hope you are already doing.
Add data-toggle="tooltip" data-placement="top" attributes to p tag
Ex
<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>
Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.
Ex
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

You can do this using tooltip of bootstrap
<button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom">
Tooltip on Bottom
$(function() {
var lengthText = 10;
var text = $('#test').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('#test').prop("title", text);
$('#test').text(shortText);
$('[data-toggle="tooltip"]').tooltip();
})
http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview

Try simple html tooltip using title.
if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }

You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script
$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);
// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
$('p').tooltip();
});
check more about boostrap tolltip here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

Get a variable immediately after typing

I have this code
<span></span>
and this
<div> variable like a number </div>
and
<script>
$(document).ready(function(){
var x = $('div').html();
$('span').html(x)
});
</script>
I need that every time I change the div value, the span reflects the changes of the div
For example.
If I type 1 in the div, the span should immediately show me number 1
If I type 3283 in the div, the span should immediately show me number 3283
but with this code - I need to create
$("div").click(function(){
var x = $('div').html();
$('span').html(x)
});
I do not want to use .click(function) . in need this function run Automatically
after your answer
I use this code
http://jsfiddle.net/Danin_Na/uuo8yht1/3/
but doesn't work . whats the problem ?

This is very simple. If you add the contenteditable attribute to the div, you can use the keyup event:
var div = $('div'),
span = $('span');
span.html(div.html());
div.on('keyup', function() {
span.html(div.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span></span>
<div contenteditable="true"> variable like a number </div>

here is a demo with input:
html:
<span></span>
<input type="text" id="input01">
js:
$(document).ready(function(){
$( "#input01" ).on('keyup',function() {
var x = parseFloat($('#input01').val());
$('span').html(x)
});
});

How can you edit in div element on browser?
It have to be any input type then only you can edit or change value.
So for that on click of that div you have to show some input/textarea at that place and on change event of that input you can update the value of input in span.
<div id="main-div">
<input type="text" id="input-box" />
</div>
<script>
$(document).ready(function(){
$('#input-box').change(function(){
$('span').html($(this).text)
});
});
</script>

$("input[type=text]").change(function(){
var x = $('div').html();
$('span').text(x)
});
This can be use with textbox or textarea, For div user cannot enter text.
http://jsfiddle.net/uuo8yht1/

.change() will not work with a DIV-element. Since you did not specify how the DIV is updated I would recommend either setting a timer or using .keypress()
Example with timer:
$(function(){
var oldVal = "";
var divEl = $("div");
setInterval(function(){
var elTxt = divEl.text();
if (elTxt != oldVal) {
oldVal = elTxt;
$("span").text(elTxt);
}
}, 50);
});

You need a key listener, jquery provides a .keypress(), Examples are provided on keypress documentation.
I recommend to lookup the combination of .on() and .keyup() with some delay or throttle/debounce either via jquery or underscore.js library.
One of the reason or need for delay is to prevent too many event calls which will affect performance.
Here is an example of code in another question regarding throttle and keyup
Hope this helps.

Javascript Ckeditor Get Mouse click position

I am using Ckeditor
View:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="~/Content/ckeditor/ckeditor.js"></script>
<input id="insertPattern" type="button" value="insert pattern" />
#Html.TextArea("editor", new { #class = "ckeditor", id = "aboutme" })
Javascript:
$(function () {
$('input#insertPattern').click(function () {
var txtarea = document.getElementById("aboutme");
var selection = txtarea.getSelection().getStartElement().getOuterHtml();
alert(selection);
}});
If i click to buton , i can not alert selection number of mouse click in Html.TextArea in Ckeditor.
Error:
In this part of javascript code
var selection = txtarea.getSelection().getStartElement().getOuterHtml();
I get below error,
uncaught typeerror undefined is not a function
Where i miss ? How can i get selection of mouse click ?

You are not working with the editor
CKEDITOR.instances["editorID"].getSelection().getStartElement().getOuterHtml();
From your comments, you want to use
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml

Ultimately you want to insert text where exactly the mouse points right. This piece of code do that.
CKEDITOR.instances['aboutme'].insertText("insert some text into this string");

When click change to text-area, When outside click change back

I am trying to make a function like PHPadmin what they are using on when showing the table, when click the div filed, change to text-area, and when click outside of the div, change it back to the div filed. The code below is wrong, I cannot change back to the div filed when I click outside. Please help me to improve the code.
JS:
$('#editor #gird_edit').bind({
click: function() {
$(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>');
},
blur: function() {
$(this).html('<div id="gird_edit">'+$(this).text()+'</div>');
}
});
Html:
<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>
I only have 8 reputations, I cannot vote you back. However, I sincerely appreciate your helps!

check this jsbin i just made, if you need anything else i'm glad to help.

see jsfiddle
updated jsfiddle
when $(this).html(textarea) is done, div is already blur. so the onBlur didn't work
$('#editor #gird_edit').bind({
click: function() {
var tex = $(this).text();
var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>');
$(this).html(textarea);
textarea.focus();
textarea.blur(function(){
var currentText = textarea.val();
if(currentText == tex)//not change
textarea.parent().text(tex);
else //changed
alert(currentText);
});
}
});
edit 3:
else{
textarea.parent().text(currentText);
//something else
}
find more jquery API

When you first click on the #gird_edit it is a div, so this is a div, and you can replace its contents to change things. However, when you blur away #gird_edit is a textarea, so if you change its contents you're not really changing what you want to change (your just changing the insides of your textarea).
What you want to change is the div that's around the textarea, ie. the "parent" of that textarea. In other words, try:
blur: function() {
$(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>');
}