Posted By

secretgspot on 03/23/11

Tagged

resize
text

Versions (?)

Last Edited at 03/23/11 09:15am

Statistics

Viewed 522 times

Favorited by 0 user(s)

Related snippets

jquery automatic text resize

/ Published in: jQuery

simple jquery plugin that powers the text auto-resizing that is the basis of textagon.com

Highlighted TextExpand

function resizer() {
    this.resize = function(element, size) {
        this.init(element);
        element.css('font-size', this.growTo(size) + 'px');
        this.tester.remove();
    }

this.init = function(element) {
        $('#resizeroo').remove();
        this.tester = element.clone();
        this.tester.css('display', 'none');
        this.tester.css('position', 'absolute');
        this.tester.css('height', 'auto');
        this.tester.css('width', 'auto');
        $('body').append(this.tester);
        this.size = 1;
        this.tester.css('font-size', this.size + 'px');
    }

this.emitWidth = function() {
        console.log(this.tester.width());
    }

this.grow = function() {
        this.size++;
        this.setSize();
    }

this.setSize = function(size) {
        this.size = size;
        this.tester.css('font-size', this.size + 'px');
    }

this.growTo = function(limit) {
        lower = 1;
        upper = limit-1;

// do binary search going midway to determine 
        // the best size
        while( lower < upper ) {
            midpoint = Math.ceil((upper+lower)/2);
            this.setSize(midpoint);
            
            if( Math.abs(limit - this.tester.width()) <= 1) {
                // close enough
                break
            }

if(this.tester.width() >= limit) {
                upper = this.size-1;
            }
            else {
                lower = this.size+1;
            }       
        }

while(this.tester.width() > limit) {
            this.setSize(this.size-1);
        }

return(this.size);

}
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.