For future reference, please use the code tags to display your code (see the # button in the message toolbox).
I'm guessing that your problem lies in the widget.js file. I didn't take a look at that file, but here's an alternative way of doing what you want. I created a twitter feed that displays on a image click. This is using mootools, but could be adapted for jquery or even normal Javascript I'm sure. I basically create a iframe that has the effect of 'popping up' on the page, with a button that can close it and dispose of the iframe. It is the same concept as 'lightbox' or 'bumpbox', without the lengthy javascript file that comes with those.
in my javascript file:
$('TweetBtn').addEvent('click', function(e){
e.stop();
$('TweetDiv').setStyle('z-index', '999999');
var Tpar = document.getElementById('TweetDiv');
Tpar.innerHTML = '<iframe src="twitter.html" style="position: absolute; top: 300px; left: 700px; width: 0px; height: 0px; z-index: 999999;" id="TwEEt"></iframe>';
var ef=document.getElementById("TwEEt");
var efL = parseFloat(ef.style.left);
var efT = parseFloat(ef.style.top);
efL = efL - 150;
efT = efT - 150;
$("TwEEt").morph({width: 300, height: 300, left: efL, top: efT});
(function(){$("TweetCloseBtn").setOpacity(1)}).delay(500);
});
$('TweetClose').addEvent('click', function(e){
e.stop();
var ef=document.getElementById("TwEEt");
var efL = parseFloat(ef.style.left);
var efT = parseFloat(ef.style.top);
efL = efL + 150;
efT = efT + 150;
$("TwEEt").morph({width: 0, height: 0, left: efL, top: efT});
$("TweetCloseBtn").setOpacity(0);
(function(){
var Tpar = document.getElementById('TweetDiv');
Tpar.innerHTML = '<iframe src="" style="position: absolute; top: 300px; left: 700px; width: 0px; height: 0px; z-index: 0;" id="TwEEt"></iframe>';
$('TweetDiv').setStyle('z-index', '0');
}).delay(750);
});
In my index.html:
<div id="Twitter" style="position:absolute; left: -300px; top: 475px; z-index: 10;">
<a id="TweetBtn" style="outline:none" rel="300-250" href="twitter.html" onmouseover="javascript:largeButton('twitterIMG', 'Twitter')" onmouseout="javascript:smallButton('twitterIMG', 'Twitter')" ><img name="twitterIMG" src="images/twitter.jpg" alt="" style="width: 50px; border: none;"></a>
</div>
<div style="z-index: 999999" id="TweetDiv">
</div>
<div style="z-index: 99999999">
<a id="TweetClose" href="" style="z-index: 99999999"><img id="TweetCloseBtn" src="images/closed.png" alt="" style="border: none; position: absolute; top: 145px; left: 840px; width: 0px; height: 0px; z-index: 99999999;"></a>
</div>
In my twitter.html:
<head>
<style type="text/css">
body
{
background-color: #fff;
overflow: auto;
}
</style>
<link rel="stylesheet" type="text/css" href="css/twitter.css" />
</head>
<body>
<div>
<img src="images/twitter_logo.jpg" style="width: 200px">
</div>
<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/TrinityUMC1" target="_blank" id="twitter-link" style="display:block;text-align:right;">follow us on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TrinityUMC1.json?callback=twitterCallback2&count=5"></script>
</body>
As you can see, this uses the 'blogger.js' script from Twitter.
