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

コードを書くときに改行をしないと、非常に横長になることがあります。
改行すると見やすくないし・・・というような時に、のばして表示できると便利です。
via:Making an Expanding Code Box
長くなったコードをJavaScriptでぐいっと伸ばす 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>

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

sponsors

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

記事作成:
記事URL:

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