CODEWITHSUNDEEP
jquerydomhtmlheightvar
Joshc
Joshc

Reputation: 3853

Get height of div once javascript dynamic content is loaded into it

I just realized I messed up on my last question.

I'm using this script below to get the dynamic height on DIV#tweet-area and insert that height into CSS. 

    var tweetheight = $("#tweet-area").height();
    $("#sidebar-wrapper").css({ bottom: tweetheight});

It works a beaut but I just realized the height it's getting, is the height of the div before my twitter content is loaded. My twitter content is generated by a jQuery plugin, see below.

I'm using this jQuery twitter plugin - tweet.seaofclouds.com/jquery.tweet.js

And loading the script like this - 

    $("#latest-tweet").tweet({
        count: 1,
        username: ["motocomdigital"],
        loading_text: "searching twitter...",
    });

Im loading the tweets into DIV#latest-tweet which is inside DIV#tweet-area. See below

    <div id="tweet-area" class="clearfix">
        <div id="latest-tweet"></div>   
    </div>

Ive tried adding my height script after the twitter script but still gets the same height :/

    <script>
        $(document).ready(function() {

                $("#latest-tweet").tweet({
                        count: 1,
                        username: ["motocomdigital"],
                        loading_text: "searching twitter..."
                });

                var tweetheight = $("#tweet-area").height();
                $("#sidebar-wrapper").css({ bottom: tweetheight});

        });
    </script>

Any help would be awesome as this is a little expert for me. Thank so much

Upvotes: 1

Views: 5257

Answers (3)

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

on line 229 of the plugin you read

$(widget).trigger("loaded")

this triggers the event loaded on the div you binded tweet on. So you could do

$("#latest-tweet").tweet({    
    // options
}).bind("loaded", function(){
    // calc height
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The seaofclouds plugin doesn't have a callback, instead it has a loaded event which is fired when the loading of tweets has completed.

Therefore the following should work for you:

$("#latest-tweet").tweet({
    count: 1,
    username: ["motocomdigital"],
    loading_text: "searching twitter..."
})
.bind("loaded", function() {
    var tweetheight = $("#tweet-area").height();
    $("#sidebar-wrapper").css({ bottom: tweetheight});
});

Upvotes: 2

Vap0r
Vap0r

Reputation: 2616

Try something along the lines of:

    <script>
        $(document).ready(function() {

                $("#latest-tweet").tweet({
                        count: 1,
                        username: ["motocomdigital"],
                        loading_text: "searching twitter..."
                }).bind("loaded", function(){
                        tweetheight = $("#tweet-area").height();
                        $("#sidebar-wrapper").css({ bottom: tweetheight});
                });
        });
    </script>

This implements a poorly documented caller in the plugin you got, which is a call to the loaded handler after the code is run. Good luck!

Upvotes: 3

Related Questions