読者です 読者をやめる 読者になる 読者になる

Web・IT うんたらら

業務系とWeb系の狭間でIT業界を彷徨いながら備忘録と足跡を残していきます

【JavaScript】htmlで縮小して全体を表示

JavaScript

overflow: hiddenとかscrollとか、そういうのじゃなくて縮小して納めてよという時にどうぞ。
これまた泥臭い手法です。いわゆるバッドノウハウとはこういうことでしょうか。

jQuery.fn.extend({
    isProtrudeHeight: function(){
        var orgScrollTop = this.scrollTop();
        this.scrollTop(0);
        this.scrollTop(1);
        var result = (this.scrollTop() > 0);
        this.scrollTop(orgScrollTop);
        return result;
    },
    compressionFontSize: function(){
        this.each(function(){
            $this = $(this);
            var fontSize = parseInt($this.css('fontSize').replace('px', ''));
            while ($this.isProtrudeHeight() && fontSize >= 0){
                $this.css('fontSize', --fontSize + 'px');
            }
        });
        return this;
    }
});


呼び出し方はこんな感じ

$("div").compressionFontSize();

結果がこれ

処理前

f:id:vamview:20130612002051p:plain

処理後

f:id:vamview:20130612002045p:plain

css3のtransformを使えばギュッと横幅だけ縮めて納めたりもできますが、それはまた別の話。