1

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

Joshc
  • 3,825
  • 16
  • 79
  • 121

3 Answers3

3

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!

Vap0r
  • 2,588
  • 3
  • 22
  • 35
  • Perfect dude, thanks so much man! - Thanks for taking a look, I wouldn't of found that handler - though I've never used the .bind before but am sure to now. – Joshc Nov 17 '11 at 15:41
2

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});
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
1

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
});
Manuel van Rijn
  • 10,170
  • 1
  • 29
  • 52
  • Yeah just had a look inside side the pluggin - thank you for explain this to me, helped alot! – Joshc Nov 17 '11 at 15:40
  • hello, I know this is a bit cheeky, but as your familiar with my problem earlier, could you please take a look at this [http://goo.gl/NWNx8](http://goo.gl/NWNx8) - can donate via paypal if you can help :) – Joshc Nov 17 '11 at 22:52
  • Hi try this as rewrote question http://stackoverflow.com/questions/8176034/iscroll-4-stops-working-because-of-container-css-created-by-javascript-jquery - thanks – Joshc Nov 18 '11 at 08:51