We Keep Coding

Set focus to next id

To improve my jquery skills I am working on an online crossword type game.
I will insert an id, such as d-1 for down 1 or a-5 for across 5 in the appropriate square.
I would like to use jquery to set the focus to the next appropriate square after the user types in a letter; for example if they type in foo, starting at the top right, the word FOO would appear going down the right column.
I have spent a long time to accomplish this with no success.
Below is some sample code with the id hardcoded (though finding the next across id would probably be different than the next down id)
Thanks for any help.
Jsfiddle
HTML
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td" id="a-1"contenteditable></div>
<div class="live-cw-css-table-td" id="a-1" contenteditable></div>
<div class="live-cw-css-table-td contenteditable" id="d-1 a-1" contenteditable></div>
</div>
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td live-cw-css-nb"></div>
<div class="live-cw-css-table-td live-cw-css-nb" id="d-1" contenteditable></div>
<div class="live-cw-css-table-td " id="d-1" contenteditable></div>
</div>
</div>
jquery
$('.live-cw-css-table-td').on('input',function(e){
if ($(this).text().length > 1) {
$(this).next().find('#d-1').focus();
}
});

How to Count Number of divs within another div

I saw that one can calculate the number of divs by id with the following code:
$('div[id^=d]').length
however I want to calculate the number of divs inside a in specific , example below
<div class="DAD">
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
</DIV>

$('div.DAD div').length would do it.
Or
$('div.DAD div.The.DIV.BE.TOLD').length
jsFiddle example
See: http://api.jquery.com/length/

JQuery allows you to use the syntax of CSS selectors (have a look here):
$('div.DAD div').length
should give the answer you're looking for

Changing div class with jQuery

I try to develop some charts which should have online values. I have found this nice and free dashboard :
[http://jiji262.github.io/Bootstrap_Metro_Dashboard/][1]
I use Web sockets to change values of charts and it works very nice. I use justgage([http://justgage.com/][2]) plug-in. As you can see there are some square shapes with different colors(Disk Space Usage,Bandwidth,memory,CPU etc.) and i want to change color of these squares according to values.
Here is div construction :
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox green">
<div class="header">Machine 1</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">cards/hour</span>
</div>
</div>
</div>
g1 is justgage gauge and i use this code to change div class : (to change of square)
$('#ID1').addClass('circleStatsItemBox green').removeClass('circleStatsItemBox orange');
But this code changes title and footer color as same with body color. I want that footer and header color should be arranged according to new div class (for example according to circleStatsItemBox orange at my sample)
Thanks

try to remove before adding:
$('#ID1').removeClass('circleStatsItemBox orange').addClass('circleStatsItemBox green');

try with toggleClass in jquery.
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
$('#ID1.circleStatsItemBox').toggleClass('orange green');

How do I calculate width of div based on previous child width

So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks

Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});

Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});

Scroll to down in textarea with jQuery

<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<textarea id="one" class="inner">
Goodbye
</textarea>
</div>
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
LIVE: http://jsfiddle.net/tGFmq/
how can i make automatically scroll to down in this textarea?

Add this bit to your code (preferably at the end of whatever inserts you have):
var psconsole = $('#one');
if(psconsole.length)
psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());

See this Live Demo: here
To calculate the bottom scrollTop, you can simply subtract the height from the scrollHeight:
var oneDiv = $("#one");
bottom = oneDiv.prop('scrollHeight') - oneDiv.height()
Then you can set its scrollTop to bottom, or use amazing jQuery's animate() for cool animation.
Live Demo: here

I realised my problem was that I had the code in the incorrect place. -> Placed under the element and got the problem to solve (rookie mistake....) -- Just a reminder to all.