2011-08-11 14 views
3

小さなTwitterロゴがコーナーに欲しいと思っているサイトで働いています。クリックすると小さな24x24ロゴの「飛び出し」ボックスにstandard Twitter Widgetが表示されます隠れる)。jqueryを使用して動的にTwitterウィジェットを読み込んでいます

jqueryでうまく管理しましたが、かなり遅いことに気づき、ほとんどの人がこの画像をクリックしないので、ウィジェットは必要な場合にのみ動的に読み込む必要があります。

しかし、私は限られたjqueryの専門知識の終わりに達しているようですので、助けていただければ幸いです。

これまでの私の試み:私は仕事にこれを取得するために多くの、さまざまな方法を試してみました

new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 320, 
    height: 340, 
    theme: { 
    shell: { 
     background: '#b0b0b0', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#f7f4f7', 
     color: '#474647', 
     links: '#a16d99' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: false, 
    behavior: 'all' 
    } 
}).render().setUser('TWITTERUSERNAME').start(); 

<div id = "twittertoggle"><img src="images/Twitter_logo.png" alt="David's Twitter feed" id="twibble" /></div> 
<div id = "twitterwidget">Widget to go in this DIV.</div> 
<script language="javascript" > 
$('#twitterwidget').hide(); // hide the container DIV on load 

$('#twibble').bind('click', function() { // event for clicking on the twitter logo 
$('#twitterwidget').toggle(); // toggle show or hide the widget container DIV 
$.getScript('http://widgets.twimg.com/j/2/widget.js', function() { // attempt to load the JS for the widget 
$.getScript('twitterwidget.js'); // fail horribly. 
    }); 
}); 
</script> 

私は「twitterwidget.js」ファイルに次のコードを配置(おそらく2〜3時間)しかし、私は今徹底的に立ち往生しているので、いくつかのアドバイスをいただければ幸いです! (ウィジェットJSは現在非同期ロードんが。)

+0

私はスクリプトがコンテナを「twitterwidget」にウィジェットを配置する方法を知っているかのように少し困惑しますか? – rlemon

+0

jsfiddle.netまたはjsbin.comにデモを投稿できますか? – Abraham

+0

私も恐れています。スクリプトがすべて(つまり、動的に読み込まれるのではなく)ページロードされている場合、コードが呼び出された場所にウィジェットが配置されます。 – Stevemid

答えて

関連する問題