Twitter feed and Javascript/CSS

Hi guys,

I’m using a Twitter feed that I have used on Cargo and on Tumblr, but for some reason it doesn’t want to work on WP and since WP has been far superior so far with everything I’m wanting to do I was wondering if you could could help me figure this out.

The javascript I use, which I place in header.php is:

<script type='text/javascript'>  

var twitter_id = '253294068'; //obtained from the twitter RSS feed associated with your user id  

var twitter_userid = 'curatorialnoise'; //your user name on twitter (this is mine of course)  

var twitter_count = 5; //limit the number of tweets that show up on your page  

    window.onload = function() {

    var url = 'http://twitter.com/statuses/user_timeline/'+ twitter_id+ '.json?callback=twitterCallback&count='+ twitter_count;

    var script = document.createElement('script');

    script.setAttribute('src', url);

    document.body.appendChild(script);

}

function twitterCallback(obj){  

    var html = "";  

    var stop=0;  

    if (obj.length>=twitter_count){stop=obj.length}else{stop=twitter_count};  

    for(var i=0; i<stop; i++){  

        if (obj[i]!=undefined){  

        html += "<li><a href='http://twitter.com/" + twitter_userid +"' target='_blank'>" + obj[i].text + "</a></li>";  

        }  

    }

    $('body').append('<div id="tweets"><p>Most Recent Tweets</p><ul id="twitter_data">'+html+'</ul><span><a href="http://twitter.com/'+twitter_userid+'" target="_blank">View All Tweets</a></span></div>');

    $("#tweets").fadeIn(500);

}

</script>

I then add this to my CSS:

#tweets p{
color:#003bff;
margin:5px 0px;
font-family: "Times New Roman",serif;
font-size: 24px;
font-weight: bold;
}

#tweets {
position: absolute;
top: 295px;
z-index: 5000000000;
display: block !important;
margin-left: 925px;
width: 250px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
word-spacing: 1px;

}

#tweets ul{
width:200px;
margin:0px;
}
#tweets li{
list-style-type:none;
font-size:11px;
margin:0 0 10px -40px;
color:#808080;
}
#tweets span a{
text-decoration:underline;
}
#tweets a { width:215px;text-decoration:none; color:#808080; font-size:11px; padding:5px; display:block; position:relative; }
#tweets a:hover { width:215px;color:#ddd; background:#232428; padding: 5px; }
#tweets a:active { width:215px;color:#161616; background:#fff; }

You can see an example of it in working progress here http://curatorialnoise.richardgordoncook.com and here http://curatorialnoise.tumblr.com/

I really can’t figure out why it’s not working since I’m implementing it the same way I did for Tumblr and Cargo. I am using the Twenty Ten theme (heavily edited).

Cheers!
Richard