Question

Here’s my situation. I have a sliding jquery menu like this: http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu.

The code of menu is:

<div id="sbi_container" class="sbi_container">
        <div class="sbi_panel" data-bg="images/1.jpg">
            <a href="#" class="sbi_label">About</a>
            <div class="sbi_content">
                <ul>
                    <li><a href="#">Subitem</a></li>
                    <li><a href="#">Subitem</a></li>
                    <li><a href="#">Subitem</a></li>
                </ul>
            </div>
        </div>
        <div class="sbi_panel" data-bg="images/2.jpg">
            ...
        </div>

CSS:

.sbi_content{
    position:absolute;
    border-top:2px solid #000;
    bottom:90px;
    left:0px;
    width:100%;
    background:transparent url(../images/pattern.png) repeat top left;
    display:none;
    overflow:hidden;
}
.sbi_content ul{
    padding:10px;
}
.sbi_content ul a{
    display:block;
    color:#f0f0f0;
    font-size:16px;
    padding:4px 6px 4px 14px;
    background:transparent url(../images/triangle.png) no-repeat 3px 50%;
    opacity:0.9;
}
.sbi_content ul a:hover{
    background-color:#000;
    color:#fff;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
}

And here’s a JavaScript piece I have a problem with:

    $content.each(function(i) {
            var $el = $(this);
// save each content's height (where the menu items are)
// and hide them by setting the height to 0px
            var num = $el.find('ul li').size();

            $el.data( 'height', num * 35 + 10 ).css( 'height', '0px' ).show();
                    });

I need to count a height of these <ul>.
That I’m doing now is counting how many there are <li> items, then multiply it by number of one’s height (35) and adding a 10px for margin..

Everything would be ok, but when there is a realy long <li> item, it jumps to second row and problem is that this code doesn’t count that second row height.

Any ideas how can I solve this problem?

Thank you.

Answer 1

You can use the scrollHeight property:

$("ul")[0].scrollHeight

For your specific case –

$content.find('ul')[0].scrollHeight