I am working on developing a web site that dynamically creates a table and highlights prime numbers for the user at http://www.primenumbertable.com. I thought I had the computational flow mapped out properly, but after I included the ability for the user to include a starting point, something fell apart.
Instead of computing tables to the range specified, tables sometimes get cut short. For instance, if the user specifies that they want to check 100 numbers, and have a starting point of 1, the table will only generate numbers 1-9, instead of 1-100.
I even broke out a pen and pad and tried to do the computations step-by-step myself, to see where the error was coming, but my pen and pad calculations had no computational anomalies.
It seemed to me that the value that was being input was somehow getting the last "0" cut off before going into the table, but i couldn't find how that was happening. Then, I thought that this could not be the problem, because when i try to check 99 numbers, I get a table that goes all the way up to 102!
So, I really have two questions: 1 - How do I trace where the computational error is being made, and 2 - Can anyone see a fix for what is going wrong?
The following is my source code:
<!DOCTYPE HTML>
<html lang="en">
<!-- This page asks the user to input a number to search for primes and returns a base-6 table with primes highlighted -->
<head>
<meta charset="utf-8">
<meta name="keywords" content="prime numbers, prime, primes, prime twins">
<title>Prime Numbers</title>
<script type="text/javascript">
/* This function determines if a number is prime or not */
function isPrime(n) {
if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
if (n%2==0) return (n==2);
if (n%3==0) return (n==3);
var m=Math.sqrt(n);
for (var i=5;i<=m;i+=6) {
if (n%i==0) return false;
if (n%(i+2)==0) return false;
}
return true;
}
/* This function creates the table and color codes the cells of prime numbers */
function tableCreate(X,Y){
var numCheck = X; /* assigns numCheck the value the user input for how many numbers are to be checked*/
var numRow = numCheck/6; /* assigns the value that will be used as the number of rows in the table. */
var numCell = Y; /* assigns the value that will be used in the table cell */
var body = document.body; /* assigns the value of the document body */
var tbl = document.createElement('table'); /* creates a table dynamically to be filled */
var highlightColor = document.getElementById('highlight').value; /* assign the value of the color the user requested for highlighting primes */
if(isNaN(numCheck)==true){
document.getElementById('tablearea').innerHTML='Please enter a number in arabic numerals.';
return; /* if the user did not enter a number to check, the function will instruct the user to do so properly. */
}
else{
for(var i = 0; i < numRow; i++){ /*continues the loop until the proper number of rows have been dynamically filled */
var tr = tbl.insertRow(-1); /* inserts a new row at the bottom */
for(var j = 0; j < 6; j++){ /*continues the loop until all data cells in the row have been filled */
if(i==numRow && j==6 || numCheck==(numCell + Y)-1){
break
}
else {
var td = tr.insertCell(-1); /* inserts a new data cell into the row */
if(isPrime(numCell) == true){ /* calls the function isPrime to test if the number going into the data cell is a prime */
if(highlightColor == ''){
td.style.backgroundColor='yellow'; /* uses the color yellow to highlight a cell if the user failed to specify a color */
}
else{
td.style.backgroundColor=highlightColor; /* uses the user's choice of color to highlight the cell if the number going in is prime */
}
}
td.appendChild(document.createTextNode(numCell)); /* prints the number in the data cell */
numCell++; /* increases the count of the number of numbers checked by 1 */
}
}
}
document.getElementById('tablearea').innerHTML=''; /* clears any previous tables that were written */
document.getElementById('tablearea').appendChild(tbl); /* writes the new table */
document.getElementById('backtotop').innerHTML="Back to top"; /* puts a 'back to top' link at the bottom */
document.getElementById('backtotop').href="#top"; /* links the btt link to the top */
}
}
/* This function clears the tablearea when called */
function tableClear(){
document.getElementById('tablearea').innerHTML='';
document.getElementById('backtotop').innerHTML='';
}
</script>
<style type="text/css">
body{
background-image: url('primesbackground.png');
}
h1{
width: 700px;
margin: auto;
text-align: center;
background-color: white;
}
table{
width: 50%;
border: 1px solid black;
background-color: gray;
position: relative;
}
td{
border: 1px solid black;
background-color: white;
}
.parameters{
float: left;
width: 300px;
height: 100%;
margin: 10px;
display: inline-block;
}
.tablearea{
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<a id="top"></a>
<h1>Welcome to the Prime Number Table Generator.</h1>
<div>
<div class="parameters">
<form name="primes">
<p style="text-align: center; margin: 10px">
How many numbers would you like to check for primes?<br />
<input type="text" id="nums"><br />
What number would you like to use as a starting point?<br />
<input type="text" id="startpoint"><br />
What color would you like primes highlighted?<br />
<input type="text" id="highlight"><br />
<input type="button" value="Check'em!" onClick="tableCreate(document.primes.nums.value,document.primes.startpoint.value)">
<input type="reset" onClick="tableClear()"><br />
To suggest improvements to this site, please send an email to webmaster#primenumbertable.com.<br />
</p>
</form>
</div>
<div id="tablearea" class="tablearea">
<!-- This area is filled by the function tableCreate() -->
</div>
<p style="text-align: center; float: bottom"></p>
</div>
</body>
</html>
Chrome also has developer tools (press F12)
It seems to be a problem with your numRow property.
var numRow = numCheck/6;
When numCheck is 100, this sets numRow to be a floating point number: 16.666666666666668
Later you're checking this value to break out of your for loop
if(i==numRow && j==6 || numCheck==(numCell + Y)-1){
but i will never equal numRow because i is an integer and numRow is a float
I would try and parse numCheck to be an integer using the parseInt method by replacing this line
var numRow = numCheck/6;
with
var numRow = parseInt(numCheck/6);
Using Google Chrome, you can insert log in your JavaScript like this: console.log("YOUR LOG");. You can then enter the developer tools (press F12) and select the console tab to check the logs.
I have looked into your code, the main problem lies in the following if condition in your tableCreate method:
if(i==numRow && j==6 || numCheck==(numCell + Y)-1){
break
}
Javascript interprets numCell as string, so numCell + Y becomes string concatenation. You should force Javascript to perform integer computation to fix your issue:
var count = parseInt(numCell) + parseInt(Y) - 1;
if(i==numRow && j==6 || numCheck==count){
break
}
Related
I am trying to prototype a simple wyswyg that emulate the concept of A4 pages using contentEditable divs.
So my current code is this:
HTML:
<div id="editor">
<div contenteditable="true" class="page" id="page-1">
<b>hello</b>
</div>
</div>
CSS:
#editor{
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page{
background-color: white;
border: solid black;
padding: 1em 2em;
width:595px;
height:841px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
JS:
//force br
document.execCommand("DefaultParagraphSeparator", false, "br");
const a4 = {
height: 841,
width: 595
};
document.getElementById('editor').addEventListener('input', function(e) {
let getChildrenHeight = function(element) {
total = 0;
if (element.childNodes) {
for (let child of element.childNodes) {
switch (child.nodeType) {
case Node.ELEMENT_NODE:
total += child.offsetHeight;
break;
case Node.TEXT_NODE:
let range = document.createRange();
range.selectNodeContents(child);
rect = range.getBoundingClientRect();
total += (rect.bottom - rect.top);
break;
}
}
}
return total;
};
let pages = document.getElementsByClassName('page');
for (let i in pages) {
let page = pages[i];
//remove empty page
if (page.offsetHeight == 0 && i > 1) {
page.remove();
}
let childrenHeight = getChildrenHeight(page);
while (childrenHeight > a4.height) {
//recursively try to fit elements on max size
//removing/pushing excedents elements to the next div (aka page)
let excedents = [];
let children = page.childNodes;
let children_length = children.length - 1;
let backup = children[children_length].cloneNode(true);
children[children_length].remove();
if (pages.item(i + 1) === null) {
var newPage = page.cloneNode(true);
newPage.innerHTML = '';
newPage.appendChild(backup);
page.parentNode.appendChild(newPage);
} else {
page.item(i + 1).insertBefore(backup, page.item(i + 1).childNodes[0]);
}
//console.log(children[i].innerHTML);
}
}
});
Unfortunately, the result is not as I was expecting.
When the height of one page is exceeded, all content from the first page is removed, not like I would like:
the excess to be moved to next page.
and when a page is abscent of children, been removed.
Something like a very very primitive Microsoft Word multipages editor.
How to do that?
Thanks in advance
Celso
Your code is a good start, but there are a couple off things to fix:
You are a trying to iterate trough a HTMLCollection with your for..in loop, which will access length, item and namedItem in the collection (just try for(let i in document.getElementsByClassName('page')) console.log(i); in the console)
You're trying to remove empty pages when offsetHeight is 0, instead try childrenHeight
you can exchange the while loop with an if statement
you also have to check if there is enough sapce on the current page, to pull back lines from the next one
also, you have to manually handle cursor position on page breaks
I made a codepen to demonstrate the changes I suggested. It is far from perfect, but handles page removals and excess removal.
I am looking for a method to limit input to a textarea in a way that enables user input to stay within a specified area WITHOUT unnecessary constraints to maximum number of characters.
The obvious method is maxlength, but that means maxlength will be determined by how much space an all caps input would take up, and that will require a maxlength that is unnecessarily low.
There are also various JS / jQuery solutions that limit the amount of lines possible to input in a text area (e.g. Limit number of lines in textarea and Display line count using jQuery), but these solutions, as far as I have been able to find, are dependent on the ENTER key, but doesn’t work if you copy-paste a piece of text into the text area.
To clarify
<!doctype html>
<head>
<style>
.one{
height: 60px;
width: 55px;
background-color: pink;
font-size: 16px;
}
</style>
</head>
<body>
<div class="one">i i i i i i i i i i i i i i i i i i</div>
<br>
<div class="one">M M M M M M M M M</div>
</body>
</html>
Div one can contain 18 lowercase “i” but only 9 capital “M”, so in order to ensure input would never exceed div one, the maxlength would have to be set to 9. The general result would be that the Div one area would generally not be fully used.
The above is merely a simple example to quickly explain which output I desire. The solution should ofc be tied to an input via a form textfield.
Ideas?
Cheers
I can't see this being an easy problem to solve. There is probably someone out there with more expertise than I, but the only way I can immediately think of to do this is to create a Map of characters and to assign them a width. Using this map, you could compare any new input against the map and determine how long/wide the input is.
Example pseudo code, this probably won't work as is;
// YOUR CHAR MAP WITH WIDTHS ASSIGNED TO LETTERS
var charMap = {
i: 1,
M: 2
}
// MAX AMOUNT OF CHARACTERS
var charLimit = 18;
// ASSUME THE TEXTAREA IS EMPTY, COULD GET ACTUAL WIDTH HERE INSTEAD
var currentChars = 0;
$('textarea').on('change', function{
// GET ALL NEW INPUT
var chars = $(this).val();
// FOR LIMITING THE INPUT, THIS IS THE FINAL STRING THAT WILL END UP IN THE TEXTBOX
var limitedUserInput = '';
// CHECK EACH CHAR ONE BY ONE, COMPARING ITS WIDTH USING THE MAP
for(var x = 0; x < chars.length; x++){
currentChars += chars[x];
// IF SIZE LIMIT NOT HIT, ADD CHARACTER TO OUTPUT STRING
if(currentChars < charLimit){
limitedUserInput += chars[x];
}
}
// DISPLAY THE OUTPUT IN THE TEXT AREA (TRIMMING ANY EXTRA CONTENT)
$(this).html = limitedUserInput;
})
This would allow you to have 18 x charMap.i (18) or 9 x charMap.M (18).
I hope that makes some kind of sense.
Here's my bid on a solution to the problem. There are a few bugs, but I'm quite satisfied with it.
I spend a lot of time trying to work something out by counting lines in the text area, but abandoned the effort as I came across increasingly complex solutions.
This solution depends on the div height and trims a .substring generated from the textarea user input so it fits within the desired div, in this case myDiv. The trimed string is also put into a second textarea which will be the one used in the form.
<!doctype html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myDiv{
min-height: 100px;
width: 100px;
background-color: pink;
position: absolute;
}
#mySecondDiv{
background-color: transparent;
border: 1px solid black;
};
</style>
</head>
<body>
<textarea id='userInput' cols="30" rows="7"></textarea>
<textarea id="toBeStored"></textarea>
<div class='myDiv'></div>
<div class='myDiv'></div>
<div class='myDiv' id='mySecondDiv'></div>
<script>
//For live versions set the 'left' property for .myDiv(0) and #toBeStored to negative so they are off screen
$('.myDiv').eq(0).offset({ top: 200, left: 350 });
$('#toBeStored').offset({ top: 10, left: 350});
$('.myDiv').eq(1).offset({ top: 200, left: 10 });
$('.myDiv').eq(2).offset({ top: 200, left: 10 });
var currentMaxChars = 0;
var testString = "";
var myDivHeight = $('.myDiv').height()
$(document).ready(function(){
while($('.myDiv').eq(0).height() <= myDivHeight ){
testString += " i";
$('.myDiv').eq(0).html(testString);
currentMaxChars++;
};
currentMaxChars = currentMaxChars*2;
maxChars = currentMaxChars;
$("#userInput").on('change keyup paste', function() {
var input = $(this).val().replace(/\n/g, '<br/>');
$('.myDiv').eq(1).html(input);
var str = $('#userInput').val().replace(/\n/g, '<br/>');
if(str.length == currentMaxChars){
currentMaxChars = maxChars;
};
if($('.myDiv').eq(0).height() <= myDivHeight){
$('.myDiv').eq(0).html(str.substring(0, currentMaxChars));
$('#toBeStored').html(str.substring(0, currentMaxChars));
} else {
while($('.myDiv').eq(0).height() > myDivHeight){
currentMaxChars--;
$('.myDiv').eq(0).html(str.substring(0, currentMaxChars));
$('#toBeStored').html(str.substring(0, currentMaxChars));
};
};
});
});
</script>
</body>
</html>
I'm trying to make a grid of divs that, when mouseentered change color. Then, when the a button is clicked and new number is entered to then generate a new grid with a side length of that many divs. I'm new to javascript and jQuery and can't figure out why my code won't generate the divs.
here's my script
$('.block').mouseenter(function () {
$(this).css('background-color', 'black');
});
function newGrid(x) {
for (i = 0; i > x * x; i++) {
$('.container').append('<div class="block"></div>');
}
$('.block').height(960 / );
$('.block').width(960 / );
}
function clearContainer() {
$('.block').remove();
}
function askGrid() {
var num = prompt("enter box length");
clearContainer();
newGrid(num);
}
function firstGrid() {
newGrid(16);
$('#reset').click(function () {
askGrid();
});
}
$(document).ready(firstGrid);
here's my css
.container {
margin: 30px auto 0px auto;
height: 960px;
width: 960px;
border: 1px solid black;
}
.block {
border:0px;
margin:0px;
padding:0px;
float:left;
background-color: yellow;
}
#reset {
display:block;
padding:5px 20px;
margin:0 auto;
}
html has a css reset and in the body i have a button with id="reset" and a div with class="container"
thanks!
Several problems:
The slash when setting height and width is wrong (either is 960 divided by something or just 960)
The for loop is wrong: it should be
for (i = 0; i < x * x; i++)
And the css thing is not going to apply since there are no .block elements when executed. You should probably move it into newGrid
You have a bug here for (i = 0; i > x * x; i++) it should be i < x.
And im not sure what this is
$('.block').height(960 / );
$('.block').width(960 / );
you can set the height and width respectively in the css
Also you need to this for the mouseenter event to work
$('.container').on('mouseenter','.block',function () {
$(this).css('background-color', 'black');
});
Since the items added are dynamic.
Welcome to jquery, a world of excitement and pain!
This code
$('.block').mouseenter(function () {
$(this).css('background-color', 'black');
});
binds the hover function to all existing .block elements on the page when it is run. It's at the top of your script so it'll execute once, binding this property to all .block elements when the page loads, but not to .block elements created after. To fix this add it inside your "newGrid" function so it rebinds each new element as they are created.
In your loop, you want for (i = 1; i < x * x; i++), starting index from 1 rather than 0, or else you'll have an off by 1 error and create an extra box.
To set the proper heights of .block, you want to divide your .container's dimentions by x, the size of block:
$('.block').height(960 / x);
$('.block').width(960 / x);
The following are general programming tips:
As a good practice, functions should have a specific job and only do that job. I moved the clearContainer call to inside newGrid, because it should be the function that builds the new grid that clears the old one, not the one called askGrid. askGrid should do as it is named, and only ask for your new grid dimension.
You should do a validation on the number received through askGrid. If the user types something that isn't a number, or a negative number, or 0, you shouldn't start making boxes or newGrid will break. I added a loop to keep asking for a size until a proper dimension is provided, but you can chose your behaviour.
I changed the variable "x" to "block_length" since variables should be given names indicative of that they mean, so that there aren't a bunch of mysterious variables all over the place called x, y, z that you can't tell what they mean from a glance.
Demo in this fiddle!
I have a page with 60 different inputs. They are all numbers and need to be checked against one of the inputs. If that input is 3 greater than the parent div changes to red. Everything works beautifully except if I try to print the style I give through my javascript function (document.getElementById(classid).style.backgroundColor = "red";) does not display print. How do I get the page to print with the style given by the function?
<script type="text/javascript">
function CheckThisNumber(val, id){
var x = document.getElementById("a6").value;
var y = Number(x) +3;
var classid = "p" + id;
if((val)>=y) {
document.getElementById(classid).style.backgroundColor = "red"; }
else { document.getElementById(classid).style.backgroundColor = "white"; }
}
</script>
One of the many inputs:
<div class="a1" id="pa1">
<strong>A1</strong><br><input type="number" name="a1" id="a1" style="width:95%" onKeyUp="CheckThisNumber(this.value,this.id)">
</div>
As I said in the comments, it is based on the browser's print settings. You can enable it in the browser's settings and it would just print them normally, but by default it is disabled to save ink.
Some browser support a non-standard CSS to force the BG to print
-webkit-print-color-adjust: exact
info: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust
And another fall back would be to use box shadows
.redBG { box-shadow: inset 0 0 0 100px #FF0000; }
.whiteBG { box-shadow: inset 0 0 0 100px #FFFFFF; }
If you are using it on a large textarea, you might need to set the 100px to a much larger value.
This question already has answers here:
How do I get the (x, y) pixel coordinates of the caret in text boxes?
(2 answers)
Closed 8 years ago.
In my project I'm trying to get the offset position of the caret in a textarea in pixels. Can this be done?
Before asking here, I have gone through many links, especially Tim Down's, but I couldn't find a solution which works in IE8+, Chrome and Firefox. It seems Tim Down is working on this.
Some other links which I have found have many issues like not finding the top offset of the caret position.
I am trying to get the offset position of the caret because I want to show an auto-complete suggestion box inside the textarea by positioning it based on the offset position of the caret.
PS: I can't use a contenteditable div because I have written lots of code related to a textarea.
You can create a separate (invisible) element and fill it with textarea content from start to the cursor position. Textarea and the "clone" should have matching CSS (font properties, padding/margin/border and width). Then stack these elements on top of each other.
Let me start with a working example, then walk through the code: http://jsfiddle.net/g7rBk/
Updated Fiddle (with IE8 fix)
HTML:
<textarea id="input"></textarea>
<div id="output"><span></span></div>
<div id="xy"></div>
Textarea is self-explanatory. Output is a hidden element to which we'll pass text content and make measures. What's important is that we'll use an inline element. the "xy" div is just an indicator for testing purposes.
CSS:
/* identical styling to match the dimensions and position of textarea and its "clone"
*/
#input, #output {
position:absolute;
top:0;
left:0;
font:14px/1 monospace;
padding:5px;
border:1px solid #999;
white-space:pre;
margin:0;
background:transparent;
width:300px;
max-width:300px;
}
/* make sure the textarea isn't obscured by clone */
#input {
z-index:2;
min-height:200px;
}
#output {
border-color:transparent;
}
/* hide the span visually using opacity (not display:none), so it's still measurable; make it break long words inside like textarea does. */
#output span {
opacity:0;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* the cursor position indicator */
#xy {
position:absolute;
width:4px;
height:4px;
background:#f00;
}
JavaScript:
/* get references to DOM nodes we'll use */
var input = document.getElementById('input'),
output = document.getElementById('output').firstChild,
position = document.getElementById('position'),
/* And finally, here it goes: */
update = function(){
/* Fill the clone with textarea content from start to the position of the caret. You may need to expand here to support older IE [1]. The replace /\n$/ is necessary to get position when cursor is at the beginning of empty new line.
*/
output.innerHTML = input.value.substr( 0, input.selectionStart ).replace(/\n$/,"\n\001");
/* the fun part!
We use an inline element, so getClientRects[2] will return a collection of rectangles wrapping each line of text.
We only need the position of the last rectangle.
*/
var rects = output.getClientRects(),
lastRect = rects[ rects.length - 1 ],
top = lastRect.top - input.scrollTop,
left = lastRect.left+lastRect.width;
/* position the little div and see if it matches caret position :) */
xy.style.cssText = "top: "+top+"px;left: "+left+"px";
}
[1] Caret position in textarea, in characters from the start
[2] https://developer.mozilla.org/en/docs/DOM/element.getClientRects
Edit: This example only works for fixed-width textarea. To make it work with user-resizable textarea you'd need to add an event listener to the resize event and set the #output dimensions to match new #input dimensions.
Here's an approach using rangyinputs, rangy and jQuery.
It basically copies the whole text from inside the textarea into a div of the same size. I have set some CSS to ensure that in every browser, the textarea and the div wrap their content in exactly the same way.
When the textarea is clicked, I read out at which character index the caret is positioned, then I insert a caret span at the same index inside the div. By only doing that I ended up having an issue with the caret span jumping back to the previous line if the user clicked at the start of a line. To fix that I check if the previous character is a space (which would allow a wrap to occur), if that is true, I wrap it in a span, and I wrap the next word (the one directly after the caret position) in a span. Now I compare the top values between these two span's, if they differ, there was some wrapping going on, so I assume that the top and the left value of the #nextword span are equivalent to the caret position.
This approach can still be improved upon, I'm sure I haven't thought of everything that could possibly go wrong, and even if I have, then I haven't bothered implementing a fix for all of them as I don't have the time to do so at the moment, a number of things that you would need to look at:
it doesn't yet handle hard returns inserted with Enter (fixed)
positioning breaks when entering multiple spaces in a row (fixed)
I think hyphens would allow a content wrap to occur as well..
Currently it works exactly the same way across browsers here on Windows 8 with the latest versions of Chrome, Firefox, IE and Safari. My testing has not been very rigorous though.
Here's a jsFiddle.
I hope it will help you, at the very least it might give you some ideas to build on.
Some Features:
I have included a ul for you which is positioned in the right spot, and fixed a Firefox issue where the textarea selection was not re-set back to its original spot after the DOM manipulations.
I have added IE7 - IE9 support and fixed the multiple word selection issue pointed out in the comments.
I have added support for hard returns inserted with Enter and multiple spaces in a row.
I have fixed an issue with the default behaviour for the ctrl+shift+left arrow text selection method.
JavaScript
function getTextAreaXandY() {
// Don't do anything if key pressed is left arrow
if (e.which == 37) return;
// Save selection start
var selection = $(this).getSelection();
var index = selection.start;
// Copy text to div
$(this).blur();
$("div").text($(this).val());
// Get current character
$(this).setSelection(index, index + 1);
currentcharacter = $(this).getSelection().text;
// Get previous character
$(this).setSelection(index - 1, index)
previouscharacter = $(this).getSelection().text;
var start, endchar;
var end = 0;
var range = rangy.createRange();
// If current or previous character is a space or a line break, find the next word and wrap it in a span
var linebreak = previouscharacter.match(/(\r\n|\n|\r)/gm) == undefined ? false : true;
if (previouscharacter == ' ' || currentcharacter == ' ' || linebreak) {
i = index + 1; // Start at the end of the current space
while (endchar != ' ' && end < $(this).val().length) {
i++;
$(this).setSelection(i, i + 1)
var sel = $(this).getSelection();
endchar = sel.text;
end = sel.start;
}
range.setStart($("div")[0].childNodes[0], index);
range.setEnd($("div")[0].childNodes[0], end);
var nextword = range.toHtml();
range.deleteContents();
var position = $("<span id='nextword'>" + nextword + "</span>")[0];
range.insertNode(position);
var nextwordtop = $("#nextword").position().top;
}
// Insert `#caret` at the position of the caret
range.setStart($("div")[0].childNodes[0], index);
var caret = $("<span id='caret'></span>")[0];
range.insertNode(caret);
var carettop = $("#caret").position().top;
// If preceding character is a space, wrap it in a span
if (previouscharacter == ' ') {
range.setStart($("div")[0].childNodes[0], index - 1);
range.setEnd($("div")[0].childNodes[0], index);
var prevchar = $("<span id='prevchar'></span>")[0];
range.insertNode(prevchar);
var prevchartop = $("#prevchar").position().top;
}
// Set textarea selection back to selection start
$(this).focus();
$(this).setSelection(index, selection.end);
// If the top value of the previous character span is not equal to the top value of the next word,
// there must have been some wrapping going on, the previous character was a space, so the wrapping
// would have occured after this space, its safe to assume that the left and top value of `#nextword`
// indicate the caret position
if (prevchartop != undefined && prevchartop != nextwordtop) {
$("label").text('X: ' + $("#nextword").position().left + 'px, Y: ' + $("#nextword").position().top);
$('ul').css('left', ($("#nextword").position().left) + 'px');
$('ul').css('top', ($("#nextword").position().top + 13) + 'px');
}
// if not, then there was no wrapping, we can take the left and the top value from `#caret`
else {
$("label").text('X: ' + $("#caret").position().left + 'px, Y: ' + $("#caret").position().top);
$('ul').css('left', ($("#caret").position().left) + 'px');
$('ul').css('top', ($("#caret").position().top + 14) + 'px');
}
$('ul').css('display', 'block');
}
$("textarea").click(getTextAreaXandY);
$("textarea").keyup(getTextAreaXandY);
HTML
<div></div>
<textarea>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea>
<label></label>
<ul>
<li>Why don't you type this..</li>
</ul>
CSS
body {
font-family: Verdana;
font-size: 12px;
line-height: 14px;
}
textarea, div {
font-family: Verdana;
font-size: 12px;
line-height: 14px;
width: 300px;
display: block;
overflow: hidden;
border: 1px solid black;
padding: 0;
margin: 0;
resize: none;
min-height: 300px;
position: absolute;
-moz-box-sizing: border-box;
white-space: pre-wrap;
}
span {
display: inline-block;
height: 14px;
position: relative;
}
span#caret {
display: inline;
}
label {
display: block;
margin-left: 320px;
}
ul {
padding: 0px;
margin: 9px;
position: absolute;
z-index: 999;
border: 1px solid #000;
background-color: #FFF;
list-style-type:none;
display: none;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
span {
white-space: pre-wrap;
}
}
div {
/* Firefox wrapping fix */
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
/* IE8/IE9 wrapping fix */
padding-right: 5px\0/;
width: 295px\0/;
}
span#caret
{
display: inline-block\0/;
}
There's a much simpler solution for getting the caret position in pixels, than what's been presented in the other answers.
Note that this question is a duplicate of a 2008 one, and I've answered it here. I'll only maintain the answer at that link, since this question should have been closed as duplicate years ago.
Copy of the answer
I've looked for a textarea caret coordinates plugin for meteor-autocomplete, so I've evaluated all the 8 plugins on GitHub. The winner is, by far, textarea-caret-position from Component.
Features
pixel precision
no dependencies whatsoever
browser compatibility: Chrome, Safari, Firefox (despite two bugs it has), IE9+; may work but not tested in Opera, IE8 or older
supports any font family and size, as well as text-transforms
the text area can have arbitrary padding or borders
not confused by horizontal or vertical scrollbars in the textarea
supports hard returns, tabs (except on IE) and consecutive spaces in the text
correct position on lines longer than the columns in the text area
no "ghost" position in the empty space at the end of a line when wrapping long words
Here's a demo - http://jsfiddle.net/dandv/aFPA7/
How it works
A mirror <div> is created off-screen and styled exactly like the <textarea>. Then, the text of the textarea up to the caret is copied into the div and a <span> is inserted right after it. Then, the text content of the span is set to the remainder of the text in the textarea, in order to faithfully reproduce the wrapping in the faux div.
This is the only method guaranteed to handle all the edge cases pertaining to wrapping long lines. It's also used by GitHub to determine the position of its # user dropdown.
JsFiddle of working example: http://jsfiddle.net/42zHC/2/
Basically, we figure out how many columns fit in the width (since it will be monospace). We have to force scrollbars to always be there otherwise the calculation is off. Then we divide the number of columns that fit with the width, and we get the x offset per character. Then we set the line height on the textarea. Since we know how many characters are in a row, we can divide that with the number of characters and we get the row number. With the line height, we now have the y offset. Then we get the scrollTop of the textarea and subtract that, so that once it starts using the scrollbar, it still shows up in the right position.
Javascript:
$(document).ready(function () {
var cols = document.getElementById('t').cols;
var width = document.getElementById('t').clientWidth;
var height = $('textarea').css('line-height');
var pos = $('textarea').position();
$('#t').on('keyup', function () {
el = document.getElementById("t");
if (el.selectionStart) {
selection = el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
selection = 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
selection = rc.text.length;
} else { selection = 0 }
var row = Math.floor((selection-1) / cols);
var col = (selection - (row * cols));
var x = Math.floor((col*(width/cols)));
var y = (parseInt(height)*row);
$('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x +"px<br>y: " + y +"px<br>Scrolltop: "+$(this).scrollTop()).css('top',pos.top+y-$(this).scrollTop()).css('left',pos.left+x+10);
});
});
HTML:
<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>
CSS:
textarea {
height: 80px;
line-height: 12px;
overflow-y:scroll;
}
span {
position: absolute;
}
I couldn't get something similar to work, so my solution was to locate the character position of the caret in the textarea, cut out the current paragraph and display this next to the textarea.
Using the offset, I placed a fake cursor (div, display:inline, 1px wide, border-left: 1px solid black) in this view of the editable text.
This way, you can create a visual feedback area where you can show the result of effects (quite like stackoverflow does when you write an answer).