Develop Reference

Targeting specific row/line of textarea and appending that row

I want to be able to click on a specific element, and have it send a value to a textarea. However, I want it to append to a specific row/line of the textarea.
What I am trying to build is very similar to what happens when you click the notes of the fret board on this site: http://www.guitartabcreator.com/version2/ In fact, i want it almost exactly the same as this.
But right now I am really just trying to see how I can target the specific row, as it seems doable based on this website.
Currently I am using javascript to send a value based on clicking a specific element.
Here is the js:
<script type="text/javascript">
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
}
</script>
This is the HTML that represents the clickable element:
<td> x </td>
This is the textarea:
<textarea rows="6" cols="24" id="tabText" name="text">-
-
-
-
-
-</textarea>
This works fine for sending the value. But it obviously just goes to the next available space. I am a total newb when it comes to javascript, so I am just not sure where to begin with trying to target a specific line.
What I have currently can be viewed here: http://aldentec.com/tab/
Working code:
After some help, here is the final code that made this work:
<script>
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}}
window.onload = function() {
addNote0('', 'tabText');
};
</script>

Tried to solve this only in JS.
What I did here is use an array to model each row of the textfield (note the array length is 6).
Then I used a jQuery selector to trigger any time a <td> element is clicked which calculates the fret and string that was clicked relative to the HTML tree then calls the updateNote function. (If you change the table, the solution will probably break).
In the update note function, I iterate through the tabTextRows array, adding the appropriate note. Finally, I set the value of the <textarea> to the array joined by '\n' (newline char).
Works for me on the site you linked.
This solution is dependant on jQuery however, so make sure that's included.
Also you should consider using a monospaced font so the spacing doesn't get messed up.
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}

I wrote the guitartabcreator website. Jacob Mattison is correct - I am using the text area for display purposes. Managing the data occurs in the backend. After seeing your site, it looks like you've got the basics of my idea down.

Is there a way with Javascript or jQuery that I can hide elements in a list in relation to the height of the element and adjacent column?

I have a wordpress site that has a custom sidebar so that we run promotional ads in. The same layout is executed on 10 different pages. to the left of the sidebar is a 'main content' area.
The sidebar area pulls from a separate sidebar.php file which has an unordered list of elements (apx. 25) which consist of an image and text each. Onload a shuffle.js function runs in order to show different promos each time.
Here is the script I currently have.
<script type='text/javascript'>//<![CDATA[
$(function(){
var li = $('ul li');
var len =li.length;
while($('#shuffleunorderedlist li:visible').length > 28) {
li.eq(parseInt(len * Math.random(), 10)).hide();
}
);//]]>
</script>
<!--JS shuffle scripts I added at launch-->
<script language="javascript" type="text/javascript" src="http://orlandovisitornetwork.com/wp-content/themes/Paradise/js/jquery.shuffle.js"> </script>
<script type="text/javascript">jQuery(function($){window.onload = function(){
$('#shufflemultidivcontainer, #shuffleunorderedlist, #shufflemultidivcontainerhotels').shuffle();
};
});
</script>
<!--END shuffle JS Scripts-->​
The problem is the client wants each of the pages columns to be even, pull from the same pool of promo's and randomly display them. Unfortunately all of the li's vary in height.
Currently, I have to go in to the code of each page when I add or remove a promo and hide the li's that would cause the 'main content' and 'sidebar' to not be of an even height. Of course this doesn't get them even but very close to it.
To automate this some I am trying to figure out a way to shuffle the promo list, look at the height of 'main content' and show as many of the promos from the shuffle so that the 'sidebar' is equal to or slightly less than 'main content'. I have an idea of how to do it but main content not always being the same height and the li's being different heights is throwing me off.
I looked for WP plugins and something in jQuery that may help me but didn't find anything.
I hope I made this clear. Appreciate any suggestions and answers. Thanks
You can see the jsfiddle of what I have so far here.... http://jsfiddle.net/2cPMm/

Hmm I suppose you could iterate through the li elements and see if their position is below the position of the div of interest. If so, hide them.
foreach(li in whateverElement)
if(li.pos.y > div.pos.y)
li.hide();

Here's the code that actually got this working for me. (Of course I got here with the help of everyone on stack.
jQuery(function($)
{
// Shuffle
$('ul').shuffle();
// Watch Columns
var mainHeight = $('#main').outerHeight();
var sidebarHeight = $('#sidebar').outerHeight();
// Compare and hide li
if (mainHeight < sidebarHeight) { // You are hiding things from the sidebar correct? Strictly speaking, this check isn't necessary, but it prevents us from looping when we don't need to.
$('div#sidebar li').each(function() { // I removed reverse as it gave me a reference error. If it is defined for you, feel free to use it.
if (sidebarHeight > mainHeight) {
$(this).hide(); // hide only the current element
sidebarHeight = $("#sidebar").outerHeight(); // update sidebarHeight
}
});
}
});

javascript - check if a div is empty

I have the following setup:
<div id="whatever">
<!-- Here some dynamic divs will be loaded -->
</div>
I need to know when the "whateverdiv" has nothing inside. The catch is that when I say nothing I mean if user sees nothing. So if inside the div something like
<div style="display: none">LOOOONG TEXT</div>
is loaded I consider it empty.
If is full of blank spaces is also empty, etc... if user doesn't see anything in it is empty.
Since there are too many cases to cover (content with height 0, content with display none, blank spaces, tabs, hidden inputs etc... almost anything may be loaded there depending on situations) I tried to use the height attribute to see if has content (the div expands depending on content). This idea worked ok but now I have another problem: I must add display: none on it sometimes. When I do that the height is always load as 0. I can't use visibility because div has 10px padding that I don't want to see when is not shown. So I'm back to square one... finding some sort of way to see if a div is empty in all that cases.
Any idea how should I do that?

var d = $('#myDiv');
var empty = d.text().trim().length === 0 || !d.is(':visible');

This one should work.
http://jsfiddle.net/fedmich/SmRnT/
I'm cleaning the html comments via Regex
$(function() {
var w = $('#whatever').clone();
w.find(':hidden').remove();
var html = w.html();
html = html.replace(/<!--.*-->/g,'')
html = $.trim(html);
alert( html );
});​
To summarize
clone the object
remove hidden elements
remove html comments
$.trim( )

If you dont count whitespace as if something is not empty:
$("selector").is(":empty")
OR
$("selector").contens().length
Does the trick.
If you dont want to count text nodes as empty:
$("selector").children().length
See:
http://api.jquery.com/empty-selector/
http://api.jquery.com/contents/
http://api.jquery.com/children/

jQuery break out of table

I have a standard HTML formatted table, that dynamically generates the content, via Zend Framework. From which I have an issue altering the form internally PHP side. So I need to alter the tables appearance somehow. With that on the occasion I have an element show up in one of the rows and when this element shows up I want to break out of the table and then do something after it then start the table again.
Basically I want to inject the equivlant of
</tbody></table>/*other stuff*/<table><tbody> after the row containing the one element I seek which in this case is a label.
I tried $("label[for='theLable']").parents('tr').after('</tbody></table><br><table><tbody>') which appears to ignore the ending table parts add the br, and then does a complete open/close tag for table and tbody within the same table I am trying to break out of so inbetween tr tags basically it adds this new table
Whats the best way to approach this concept?
update with jsfiddle link
http://jsfiddle.net/cPWDh/

You can't really modify the HTML of the document the way you're thinking, since it's not a legitimate way to alter the DOM.
Instead, I would create a new table and .append the rows you want to move to it, which will automatically move them from their current location (instead of copying them):
$(document).ready(function() {
var $trow = $('label[for="specialLabel"]').closest('tr'),
$table = $trow.closest('table');
$('<table>').append( $trow.nextAll().andSelf() ).insertAfter($table);
});​
http://jsfiddle.net/cPWDh/1/

this approach won't work in js. What you could do if the table has not too many rows is this:
var nextTable = $("table").after("/*other stuff*/<table id="nextTable"></table>");
//now you loop over the lines of your original table that you want to have after the "break", and move them to the nextTable:
var before = true;
$("table tr").each(function(){
if ($(this).has("[for='theLable']")) {
before = false;
}
if (!before) {
nextTable.append($(this));
}
});

get textNode of a elementNode of a web page via javascript

In a web page,i want to get every visible text in a textnode.I don't want to put all the result into one array.I mean, when i meet a visible text, i will do something else.
How could i achieve it?

I guess you want something like this:
<script type="text/javascript">
function textnodes(){
function iterate(node){
var nodes=node.childNodes
var len=nodes.length
for(var a=0;a<len;a++){
if(nodes[a].nodeType==3){
if(!nodes[a].nodeValue.match(/^[\s]*$/)){
alert(nodes[a].nodeValue) //Insert your code here.
}
}
else{
if(nodes[a].nodeName.toLowerCase()!="script"){
iterate(nodes[a])
}
}
}
}
iterate(document.body)
}
textnodes()
</script>
The script as it is might be a bit overzealous, you get along a lot of invisible text nodes, you can sort those out if you don't need them.
Edit: Modified to sort out invisible nodes since you specifically requested only visible nodes.