So I am checking the the scrollHeight of some dynamically generated content to determine whether or not to include a more button in the content. The user can click the more button to expand the content and see everything inside. However using the same function every time sometimes it says the scrollHeight of the elements is 0 which needless to say breaks the function for those elements. I am beyond boggled as to why this function would work 90% of the time but sometimes say the elements don't have a scrollHeight when they clearly do (they take up space on the page).

Here is the function:

function hide_show_expand_button(length){
    var current_div = '';
    var current_span = '';
    //console.log(length);
    for(var i = 0; i < length; i++){
        if(document.getElementById("message_span"+i)){
            current_div = document.getElementById("items_content"+i);
            current_span = document.getElementById("message_span"+i);
            console.log(current_div.scrollHeight, "height of the div")
            if(current_span.scrollHeight > 128 && current_div.scrollHeight < 170){
                console.log("inside of the check for the conversation screen");
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_conversation\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && document.getElementById("items_content"+i).scrollHeight > 200 ){
                current_div.innerHTML+="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_attatchment\" style=\"color:blue;\"  onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && current_div.scrollHeight < 200){
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            }
        }
    }
}

As you can see I am checking the scrollHeight on the span and on the div because I have a couple of different types of cells that are being generated and I have to place the more button in different places depending on the type of cell. This function only gets called at the end of the function that generates the content being checked and I have tried it with a setTimeout() call on the miniscule chance that it was going through this function before they were fully created (I don't know how that would happen but who knows).

P.S. This is all taking place inside of a chrome ext. I don't think that has anything to do with it but who knows. Also the position on the elements is relative as I have seen others post about scrollHeight issues with position: absolute.

Edit to make more specific:

Hopefully this helps, the cells I am trying to measure are in a containing div that gets its display set to none several different ways. What is happening above happens in one of the instances where I have navigated away (set display to none) from the container and then navigated back to it (set display to block). You can do this in about a dozen ways inside of the chrome ext. but it only says they don't have a scrollHeight (or any height for that matter I tried using getBoundingClientRect() and it returned 0 for everything) for one case which is why I am confused.

Also might be useful to know, on navigation back to the container the cells are rebuilt every time and as I stated above my function to get the scrollHeight is called at the end of the function to build the cells. So everytime you get back to the container my function is also called.

So I am checking the the scrollHeight of some dynamically generated content to determine whether or not to include a more button in the content. The user can click the more button to expand the content and see everything inside. However using the same function every time sometimes it says the scrollHeight of the elements is 0 which needless to say breaks the function for those elements. I am beyond boggled as to why this function would work 90% of the time but sometimes say the elements don't have a scrollHeight when they clearly do (they take up space on the page).

Here is the function:

function hide_show_expand_button(length){
    var current_div = '';
    var current_span = '';
    //console.log(length);
    for(var i = 0; i < length; i++){
        if(document.getElementById("message_span"+i)){
            current_div = document.getElementById("items_content"+i);
            current_span = document.getElementById("message_span"+i);
            console.log(current_div.scrollHeight, "height of the div")
            if(current_span.scrollHeight > 128 && current_div.scrollHeight < 170){
                console.log("inside of the check for the conversation screen");
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_conversation\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && document.getElementById("items_content"+i).scrollHeight > 200 ){
                current_div.innerHTML+="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_attatchment\" style=\"color:blue;\"  onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && current_div.scrollHeight < 200){
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            }
        }
    }
}

As you can see I am checking the scrollHeight on the span and on the div because I have a couple of different types of cells that are being generated and I have to place the more button in different places depending on the type of cell. This function only gets called at the end of the function that generates the content being checked and I have tried it with a setTimeout() call on the miniscule chance that it was going through this function before they were fully created (I don't know how that would happen but who knows).

P.S. This is all taking place inside of a chrome ext. I don't think that has anything to do with it but who knows. Also the position on the elements is relative as I have seen others post about scrollHeight issues with position: absolute.

Edit to make more specific:

Hopefully this helps, the cells I am trying to measure are in a containing div that gets its display set to none several different ways. What is happening above happens in one of the instances where I have navigated away (set display to none) from the container and then navigated back to it (set display to block). You can do this in about a dozen ways inside of the chrome ext. but it only says they don't have a scrollHeight (or any height for that matter I tried using getBoundingClientRect() and it returned 0 for everything) for one case which is why I am confused.

Also might be useful to know, on navigation back to the container the cells are rebuilt every time and as I stated above my function to get the scrollHeight is called at the end of the function to build the cells. So everytime you get back to the container my function is also called.

• javascript
• html
• css
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Nov 11, 2011 at 23:45 Ryan asked Nov 11, 2011 at 21:19 RyanRyan 5,68233 gold badges3939 silver badges6666 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I would remend looking at these (I couldn't locate a similar link for Chrome):

MSDN: http://msdn.microsoft./en-us/library/ms530302%28v=VS.85%29.aspx

MOZ: https://developer.mozilla/en/Determining_the_dimensions_of_elements

It seems that scrollHeight is only valid if something is large enough to need to scroll, so I would assume that 0 means no scrolling needed (all content is visible). From looking at the above links, maybe what you want is clientHeight.

I figured out the problem, It had to do with the what I was trying to check after different elements were set to display none. For some reason for 5-8 cells it was checking other content instead of the page I was on and then switching to the current content. Changing some Id's ultimately let me fix it.