長くなったコードをJavaScriptでぐいっと伸ばす via:Making an Expanding Code Box

コードを書くときに改行をしないと、非常に横長になることがあります。
改行すると見やすくないし・・・というような時に、のばして表示できると便利です。
via：Making an Expanding Code Box

使用方法

jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
	$("pre").hover(function() {
		var codeInnerWidth = $("code", this).width() + 10;
	    if (codeInnerWidth > 450) { //ここの数値は後述するwidthと同じ
			$(this)
				.stop(true, false)
				.css({
					zIndex: "100",
					position: "relative"
				})
				.animate({
					width: codeInnerWidth + "px"
				});
			}
	}, function() {
			$(this).stop(true, false).animate({
				width: 450 //ここの数値は後述するwidthと同じ
	});
	});

});
</script>

あとはCSSで上記数値とoverflow:hiddenを記述します。

<style>
pre { 
  overflow: hidden;
  width: 450px; 
}
</style>

上記のようにwidthより横幅が小さいと動作しません。

サンプル

<script language="javascript" type="text/javascript">
$(function() {
	$("pre").hover(function() {
		var codeInnerWidth = $("code", this).width() + 10;
	    if (codeInnerWidth > 450) {
			$(this).stop(true, false).css({zIndex: "100",position: "relative"}).animate({width: codeInnerWidth + "px});
		}
		}, function() {
			$(this).stop(true, false).animate({width: 450});
	});
});
</script>

Javascriptサンプルページ一覧

skuare.net