Question

I am trying to create a div that is scrollable only when it’s above a certain height after appending text to it. I check the height using jquery and it returns zero every time. Any suggestions?

HelpOverlay.prototype.buildContent = function(helpMappings){
this.content = $('<div class="content"></div>');
var table = $('<table></table>');
table.append($('<tr><td class="key"><h3>Key</h3></td><td class="command"><h3>Command</h3></td></tr>'));
this.content.append(table);
for (var whichCategory = 0; whichCategory < helpMappings.categories.length; whichCategory++) {
    var category = helpMappings.categories[whichCategory];
    var categoryDiv = $('<div class="category">' + category.category + '</div>');
    this.content.append(categoryDiv);
    var categoryTable = $('<table></table>');
    for (var whichMapping = 0; whichMapping < category.mappings.length; whichMapping++) {
        var mappings = category.mappings[whichMapping];
        var row = $('<tr></tr>');
        var keyCell = $('<td class="key">' + mappings.key + '</td>');
        var commandCell = $('<td class="command">' + mappings.command + '</td>');
        row.append(keyCell);
        row.append(commandCell);
        categoryTable.append(row);

    }
    this.content.append(categoryTable);
}

this.helpOverlay.append(this.content);
console.log(this.content.height());
}

console.log(this.content.height()) is returning zero.

Answer 1

In reference to this line:

this.helpOverlay.append(this.content);

Is this.helpOverlay already part of the DOM? Any element that is not inserted into the DOM will return 0 for height and width until it is inserted.

Edit:

this.content.css( 'display', 'none' ).appendTo( 'body' );
var dims = { 'height': this.content.height( ),
             'width':  this.content.width( ) };
this.content.detach( );