Getting auto scaleable text working using BigText.js

This javascript library https://github.com/zachleat/BigText calculates the width of a line of text and scales text accordingly. (See this demo to get the idea: https://zachleat.github.io/BigText/demo/wizard.html)

Really having trouble implementing this. Just to get it going, I am using $('#h1').bigtext(); to try to catch all h1 headers in the slide. Tried it both inline like so:

!SLIDE

# HELLO HELLO HELLO

<script>
$('#h1').bigtext();
</script>

And by putting the javascript in a .js file in the directory of the slideshow. No luck, can’t get it to fire. Any ideas?

Why is this important? Personally, my style of slideshow has lots of one word, or one sentence slides in big text. This means a slideshow template can have the largest text possible for each “headline” on the slide.

[binford2k]

Bigtext doesn’t work on individual elements, it works on containers of elements. (a div, p, ol, li, etc)

Here are a few things that work, play with them and see what works best.

Everything:

$('.content').bigtext()`

Only headers:

$('.content').bigtext({
    childSelector: '> h1'
})

A slide with a specific title:

$('#Introduction_Section').bigtext()

Only slides marked with a specific class (e.g. <!SLIDE bigly>):

$('.bigly').bigtext()

I’m not closing this ticket yet, because I think I might experiment with incorporating this library into core to support specifically the use case you describe.

[slambert]

Ha, I’m terrible when it comes to that – not something I’ve tested for in years!

I don’t have a machine I can test it with either, so maybe someone reading this can jump in and help out?