Develop Reference

Textarea increase ++ one row on enter and keypress using .attr() update

I have a textarea on which I want to increase his height with one row on every enter and on each time when text it goes into another row wile typing. So I have 3 conditions, when is displayed I want to number all used rows and set rows height based on this:
one: var countRows = $("textarea").val().split(/\r|\r\n|\n/).length;
two: when keypress == 13 is used
and three: when text it goes into another row wile typing
Till now I have achived this but is not really working :|
var countRows = $("textarea").val().split(/\r|\r\n|\n/).length;
var keynum = 13; //enter keynum
//for default state
//not calculating
$("textarea").attr("rows", countRows + 1);
//for enter key
//not really working
$("textarea").on('keypress', keynum, function() {
$(this).attr("rows", countRows + 1);
// alert("jjj");
});
//for case whentext it goes into another row wile typing
I just want to do that using .attr() and updating that attribute "rows" when one more row is added or removed.

From https://stackoverflow.com/a/10080841/4801673
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});

$('textarea').keyup(function(e) {
var $lineHeight = $(this).height() / $(this).get(0).rows;
var $lines = $(this).val().split(/\r|\r\n|\n/).length;
$(this).get(0).rows = $lines;
});
Increase size if add new lines to textarea.
Decrease size if remove lines from textarea.
Nothing to do if lines not added/removed in textarea.

How to give a unique id for each cell when adding custom columns?

I wrote following code to add a custom column to my table. but i want to add a unique id to each cell in those columns. the format should be a(column no)(cell no>)
ex :- for the column no 4 :- a41, a42, a43, ........
So please can anyone tell me how to do that. Thank You!
$(document).ready(function ()
{
var myform = $('#myform'),
iter = 4;
$('#btnAddCol').click(function () {
myform.find('tr').each(function(){
var trow = $(this);
var colName = $("#txtText").val();
if (colName!="")
{
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td>'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
}
});
iter += 1;
});
});

You seem to have code that's modifying the contents of the table (adding cells), which argues fairly strongly against adding an id to every cell, or at least one based on its row/column position, as you have to change them when you add cells to the table.
But if you really want to do that, after your modifications, run a nested loop and assign the ids using the indexes passed into each, overwriting any previous id they may have had:
myform.find("tr").each(function(row) {
$(this).find("td").each(function(col) {
this.id = "a" + row + col;
});
});
(Note that this assumes no nested tables.)

try this
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'">'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'"><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
you just have to define and iterate the column_no and cell_no variable

When all other cells are numbered consistently (for example using a data-attribute with value rXcX), you could use something like:
function addColumn(){
$('table tr').each(
function(i, row) {
var nwcell = $('<td>'), previdx;
$(row).append(nwcell);
previdx = nwcell.prev('td').attr('data-cellindex');
nwcell.attr('data-cellindex',
previdx.substr(0,previdx.indexOf('c')+1)
+ (+previdx.substr(-previdx.indexOf('c'))+1));
});
}
Worked out in this jsFiddle

jQuery traversing and finding textboxes

If I am looping through elements in a table - say a hidden field of class "pmtos" - how do I get a reference to the text field (input) within the same cell in the table?
jQuery is:
// Loop through each hidden field, which holds the outstanding amount
$(".pmtos").each(function () {
var os = $(this).val();
//
//find text box in same cell - and populate with some value
//
//
});
Thank you for any guidance in getting this working.
Mark

Here's a solution to the question before it was edited (as requested):
$('#allocate').click(function () {
var recd = parseFloat( $('#pmtRecd').val() );
$('input.pmtallocated').each(function() {
var value = parseFloat( $(this).parent().prev().text() );
this.value = (recd >= value) ? value : recd;
recd = recd - this.value;
if (recd == 0) {
return false;
}
});
});
Note: This doesn't rely on the hidden input. It takes the text from the td in the second column.
Here's the fiddle
To answer the question post-edit
You can use siblings('.pmtallocated') or prev('.pmtallocated') to get the input. Using siblings() would probably be the better of the two as it doesn't rely on pmtallocated coming directly before pmtos in the markup:
$(this).siblings('.pmtallocated').val()

Try
// Loop through each hidden field, which holds the outstanding amount
$(".pmtos").each(function () {
var os = $(this);
var cell = os.parent(); // gets the parent, i.e. the table cell
var input = cell.find('input')[0];
});

You could use $(this).closest('input')

Check this out. may works for you.
$(".pmtos").each(function () {
var os = $(this).val();
var input = $(this).closest('td').find('input[type=text]');
});

Filter :nth-child ignoring where css display is none

I have got a script that takes some floating divs in columns of 3 gets the largest height from the 3 columns on 1 row and makes all 3 divs the same height. It then repeats it for each row, the script works fine however I have built a custom filter system in JQuery that makes certain divs hidden or shown depending on the selection of price range, or brand etc.
When I am using the filter it will then remove say column 2 of the top row and make column 4 of the second row move up to the top row. Leaving column 2 in the code and so re-running the height/column check script will not work.
So what I am trying to do is where I am using my filter(':nth-child(3n-2)') add an if statement that will skip all div's that are hidden from the :nth-child selection.
I do understand I can use a function inside my filter(); but its a function that's new to me so am unsure on how to use it exactly.
Here is my working code:
var $sections = $('.section-link');
$sections.filter(':nth-child(3n-2)').each(function () {
var $this = $(this),
$els = $this.nextAll(':lt(2)').addBack();
var sectionheight = new Array();
$els.each(function () {
var value = $(this).find('.section-title').height();
sectionheight.push(value);
});
var newsectionheight = Math.max.apply(Math, sectionheight);
$els.find('.section-title').height(newsectionheight);
})
JSfiddle example
Am trying to use something like this so far:
$sections.filter(function() {
return $(this).css('display') !== 'none';
}, ':nth-child(3n-2)')

Okay managed to get it working by returning the css property before calling the :nth-child
function makeheight(){
var $sections = $('.section-link');
$sections.filter(function() {
return $(this).css('display') == 'block';
}, ':nth-child(3n-2)').each(function () {
var $this = $(this),
$els = $this.nextAll(':lt(2)').addBack();
var sectionheight = new Array();
$els.each(function () {
var value = $(this).find('.section-title').height();
sectionheight.push(value);
});
var newsectionheight = Math.max.apply(Math, sectionheight);
$els.find('.section-title').height(newsectionheight);
});
}

Populating div with checkboxes

I use this code to determine checkbox width and height:
var chk = $('input[type="checkbox"]:first');
chkWidth = chk.innerWidth()
+ parseInt(chk.css('margin-left').replace('px', ''))
+ parseInt(chk.css('margin-right').replace('px', '')); /*IS there better way instead of px replace?? */
chkHeight = chk.innerHeight()
+ parseInt(chk.css('margin-top').replace('px', ''))
+ parseInt(chk.css('margin-bottom').replace('px', ''));
fieldWidth = gamefield.innerWidth();
fieldHeight = gamefield.innerHeight();
Then i try to fill div with the number of checkboxes that exactly fits given div. In fact i get a lot of checkboxes out of div.
http://dl.dropbox.com/u/3473965/jq/tetris.html
http://dl.dropbox.com/u/3473965/jq/tetris.js
Is there anyway to solve this? Thank you!

leaving other things as such, this makes the difference (on FF3.5):
var cols=Math.floor(fieldWidth/chkWidth);
var rows=Math.floor(fieldHeight/chkHeight);
var html='';
for(var i=0;i<=rows;i++) //if yo use i<rows there is space for one more row
{
for(var j=0;j<cols;j++)
{
html +="<input type='checkbox'/>";
}
}
gamefield.html(html);