Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A jquery typography plugin.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
$().hatchShow();
});
jQuery.fn.hatchShow = function(){
$('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){
var t = $(this);
t.wrap("<span class='hatchshow_temp' style='display:block'>");
var pw = t.parent().width();
while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"),
function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}};
};
}).css('visibility','visible');
};
jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};
</script>
@drawby

This comment has been minimized.

Copy link

drawby commented Jul 14, 2014

thanks for this

@roseg43

This comment has been minimized.

Copy link

roseg43 commented Jul 30, 2014

This is so beautifully simple. Awesome stuff!

@laverix

This comment has been minimized.

Copy link

laverix commented Jul 31, 2014

nice

@FrancescoQ

This comment has been minimized.

Copy link

FrancescoQ commented Aug 1, 2014

Hi, nice script! but i had to modify a little because if the start font size make the text larger than the target width it goes into an infinite loop, (or maybe i was doing something wrong.. i don't know... but in that circumstance it didn't work for me ) also for my need i modified it to make me choose to what selector apply the effect and a couple of other things, but it was only for my specific need , if you want to see it i've created a fork!
Thanks
Francesco

@mmswi

This comment has been minimized.

Copy link

mmswi commented Sep 19, 2014

Hey, this is good, but unfortunately it's not responsive. Whenever I resize the window, I need to refresh the page on the new window size in order to get the text displayed correctly. Any idea how to fix this?

@bdelespierre

This comment has been minimized.

Copy link

bdelespierre commented Nov 29, 2016

There a several issues with this... I'm working on a fix 😉

@bdelespierre

This comment has been minimized.

@bdelespierre

This comment has been minimized.

Copy link

bdelespierre commented Nov 29, 2016

@mmswi A bit late (yes) but if you want it to be responsive:

    (function($){
        jQuery.fn.hatchShow = function(){
            return els = $(this), $(window).resize(function(){
                els.css({ display: 'inline-block', whiteSpace: 'pre' }).each(function(){
                    var parent = $(this).parent(),
                        fontSize = parseInt($(this).css('font-size').replace('px', '')),
                        maxWidth = parent.width() - (parent.outerWidth(true) - parent.width());

                    while ($(this).outerWidth(true) < maxWidth) {
                        $(this).css('font-size', ++fontSize)
                    }

                    while ($(this).outerWidth(true) > maxWidth) {
                        $(this).css('font-size', --fontSize)
                    }
                })
            }).resize(), els
        }
    })(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.