François Poteau

Tweet est un excellent plugin jQuery, bien conçu, non-intrusif, rapide à implémenter et à personnaliser (contrairement au widget twitter). Aperçu du code utilisé sur ce site et issu d'un exemple donné sur le site officiel.

JavaScript

$(document).ready(function(){
       $("#tweet").tweet({
          username: "fpoteau",
          page: 1,
          avatar_size: 0,
          count: 20,
          loading_text: "loading ..."
        }).bind("loaded", function() {
          var ul = $(this).find(".tweet_list");
          var ticker = function() {
            setTimeout(function() {
              ul.find('li:first').animate( {marginTop: '-200px'}, 500, function() {
                $(this).detach().appendTo(ul).removeAttr('style');
              });
              ticker();
            }, 10000);
          };
          ticker();
        });
      });

CSS

#tweet ul.tweet_list {
	height: 200px;
	overflow:hidden;
}
#tweet .tweet_list li {
	height: 200px;
}

Je créerais bien un plugin PluXml d'ailleurs ...

Un morceau de jQuery qui permet d'étendre un morceau de code, sans faire déborder le conteneur, ni poser problème lors d'une consultation mobile (et un bon pretexte pour tester highlight.js que je trouve bien plus sympa à l'utilisation que SyntaxHighlighter)

 // absolutifyCode()
function absolutifyCode() {
// for each text code
$('code').each(function(i) {
	var x = $(this).offset().left;
	$(this).css('width',$(window).width() - x - 20); // -20px for scrollbar
	var height = $(this).parents('pre').filter(':first').height(); // height of pre before absolutify :)
	$(this).css('position','absolute'); // absolute position to avoid overflow
	var pre = $(this).parents('pre').filter(':first');
	$(pre).height(height).width('100%'); // restore height of pre
});
// responsive ?
$(window).resize(function() {
	// for each text code
	$('code').each(function(i) {
		if($(this).offset().left + $(this).width() < ($(window).width() - 20)) { absolutifyCode(); }
    		else { $(this).width('100%').css('position','relative'); }
	});
});

And the css, with the ugly overflow because you have no choice when the window is too small

code { margin: 0; padding: 0; overflow: auto; }

Using standard HTML

<pre><code></pre></code>