Develop Reference

How to get the current line position in the contenteditable div using javascript on keypress [duplicate]

This question already has answers here:
Get caret index in contenteditable div including tags
(2 answers)
Closed 7 years ago.
I am creating a customize editor by using contenteditable div, I need a javascript code to calculate line position of current caret position on keypress event.
Please make sure It should also work when add new line or remove a line.
This is my contenteditable div format
<div contenteditable="true" id="editor">
<b>Heading</b>
<br/>
Line 1
<br/>
Line 2
<br/>
Line 3
<br/>
Line 4
<br/>
Line 5
</div>
Please see this fiddle:

Use a <pre> instead.
Html
<pre contenteditable="true" id="editor">
line 1
line 2
line 3
line 4
line 5</pre>
<input id="addBtn" type="button" value="Add Line"/>
JavaScript
$('#editor').on("mouseup", function getPos() {
var sel = document.getSelection(),
nd = sel.anchorNode,
text = nd.textContent.slice(0, sel.focusOffset);
var lineNum=text.split("\n").length;
alert(lineNum);
});
$('#addBtn').click(function(){
var str = "new line";
elem = document.getElementById("editor");
elem.innerHTML = elem.innerHTML +"\n" + str;
});
I've updated my jsfiddle, and used a pre instead <br/> (for line breaks)
Fiddle

I'm not really sure what you are trying to do but I have an idea. I had a similar project where I had to take text from input boxes. I would say get an id for each paragraph or line or input box . Then add an event to the div. Once you add the event to the div, you can pretty much do anything.
Example:
It don't have to be body, add it to your div.
document.body.addEventListener("foo_event", get_target, false);
<p id="someid">Some cool stuff here or input or whatever.
Put ids on all your lines so we can have a way to id them. Put
classes also if you want to style them</p>
function get_target(e){
//Some event happend let's do something
if ("someid" === e.target.id ) {
//Lets run some code on the paragraph or element
/*Ideally you would want an algorithm for testing ids instead of using a bunch of If statements */
}
}

jquery select an element using comments inside it [duplicate]

This question already has answers here:
Get text inside HTML comment tag?
(2 answers)
Closed 8 years ago.
I need to select the table cell, that has a comment, which contains the word "Baseline EUI" and in that cell I need to add unit name next to the value ("59") like km or miles etc. How do I select the cell, provided the only thing that uniquely identifies that table cell is the keyword inside the comment i.e. "Baseline EUI" ? Please help me how I can select this table cell using jQuery? (I need to add unit like Km or Miles right after the number 59 in the table cell)
<tr>
<td width="165" class="ms-formlabel" noWrap="nowrap" vAlign="top">
<H3 class=ms-standardheader><A name=SPBookmark_BaselineEUI></A>Baseline EUI</H3>
</td>
<td width="450" class="ms-formbody" id="SPFieldNumber" vAlign="top">
<!-- FieldName="Baseline EUI" FieldInternalName="BaselineEUI" FieldType="SPFieldNumber" -->
59
</td>
</tr>
<tr>
There are many rows/cells like the above...
</tr>

I haven't test this code. But it should work in your case.
please verify and make necessary changes.
$.each($("yourtable tr"),function(i,val){
var check=false;
//check if Baseline EUI is contained inside tr
if($(val).html().indexOf('Baseline EUI'))
{
var x=$(val).find('td')[1];
var p=$(x).html()+' km';//set your suffix
$(x).html(p)
}
});
or use this as a selector of the right tr:
$(".ms-formtable tr").filter(function (i, v) { if ($(this).html().indexOf('Zugehoerigkeit') > 0) { return this; } })

First you select the tr tag then loop throw the contents of each tr tag searching for the content which contains the word you are searching for .
$( "tr" ).each(function() {
});
For adding the unit you want, you would do the same but when you find that cell, you will the index method of jquery to know where the number is and then use jquery substring method to split the value of that cell in two parts adding your unit to the first part and then make the value of that cell = the first part (after adding your unit) + the second part (using jquery substring method).
Please, let me know in the comments if you need detailed code .

Sorting a table with columns composed of icons

I am using the tablesorter javascript plugin to easily sort a bootstrap 3 table. My current code is simply:
$(document).ready(function() {
$('.table').tablesorter();
});
My problem arises with columns that have no data but font awesome icons in, the check and the cross.
<i class="fa fa-check"></i>
<i class="fa fa-times"></i>
Because there is no physical text in these columns, I am unable to sort them.
Aside of writing Yes and No beside the icon, is there any workaround to get tablesorter looking at HTML code instead of just text?

Answer, via spryno724 in the comments:
Add the Yes and No to the table cell, or to save characters, use Y and N.
Then, wrap them in a <span> and set it to style="display:none" in CSS.
The tablesorter plugin will read the Y and N and the table cells will become sortable, but the user will not be able to see it.

I posted this answer to your other similar question, but it was deleted for some reason.
Use the textExtraction function (demo):
$('table').tablesorter({
textExtraction: function(node){ console.log( node.className );
var $icon = $(node).find('i');
return $icon.length ? $icon[0].className : node.textContent;
}
});

jQuery: delete certain parts of string

I have a td containing a list of values (anchor tags) that are separated with a comma.
Is there any way I can create a button to delete specific values out of this string, e.g. the 1st or 2nd or 3rd value ?
I first tried to resolve this with a tagsmanager plugin but all the tagsmanagers I know only work with text but not with links / anchor tags so the above is meant as a work-around here.
The background is that I have a page that shows a list of uploaded files as links (created with PHP) and I would like to allow the users to be able to delete one or more of these links if no longer needed. The value of all links is the word File and a number, e.g. File 1, File 2, File 3 etc.
Example td:
<td>
File 1,File 2,File 3,File 4,File 5
</td>
Thanks for any help with this, Tim.

You can set the td to have an ID like <td id="myID"> and then you can very easily select the nth-child of that td with jQuery:
var index = 4; // or whatever you want it to be
$("#myID a:nth-child(" + index + ")").remove();
If you don't want to set the ID of the td, you can of course select it another way, for example using
$("td:nth-child(" + tdNum + ")" ); // for the td
$("td:nth-child(" + tdNum + ") a:nth-child(" + linkNum + ")" ); // for the links

You can achieve this effect in a number of ways. This one might be useful if you want to have a separate button to delete each link.
Just place a button after each link and assign the click event to something like:
$('button').click(function(){
$(this).prev('a').remove();
$(this).remove();
});
DEMO

Your easiest solution would be to wrap the items (and commas) in <span> tags:
<span class="file1">File 1,</span>
<span class="file2">File 2,</span>
<span class="file3">File 3,</span>
<span class="file4">File 4,</span>
<span class="file5">File 5</span>
Then you can simply use jQuery to remove the whole span:
$('.file1').remove();

I would make the links look like clickable tags, which when clicked will remove themselves.
<td>
File 1
File 2
File 3
File 4
File 5
</td>
Then use JavaScript to make the links "delete" on click
$('a').on('click', function(e){
this.remove(); // remove the clicked "<a>" tag
e.preventDefault(); // prevents the link from going anywhere
})
Here is a working example
And here is an example that allows you get more info about each clicked link so you could make a server-side request to remove the item

jquery or javascript: Truncate text in table cell

I need to truncate the text in the first column of a table using javascript or jQuery. Here's where I'm at:
The table:
<table id="bigTable">
<tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
<tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
<tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
</table>
Trying stuff like the following without success ( compiled from other similar posts ):
var lbl = $("#bigTable tbody");
var newLbl = $(lbl[0].outerHTML);
$('td:eq(0)', newLbl).slice(5);
It does not seem to be getting the contents, or text from the cells. Has no effect whatsoever. Tried also -
$('td:eq(0)', newLbl)contents().slice(5);
$('td:eq(0)', newLbl).text().slice(5);
What am I doing wrong?
EDIT
Before more down-voting and general grumpy-ness occurs ...
I have to have the text from a div copied to a variable for manipulation and later display in a different window/div.
This happens in response to a button click.
...but applying the css rules sounds promising. Will try that instead.
Please see this fiddle to understand what I need to do:
http://jsfiddle.net/Vsse3/2/
I have to be able to wrap column cells with a div before using the css idea.

You don't need js, using CSS:
demo:
http://jsfiddle.net/vTDAQ/3/
#elckarns comment is correct but you also need to wrap the cell content in a div to use text-overflow.
Also note that your table is not well formed.
demo updated as requested:
http://jsfiddle.net/Vsse3/6/