How to use

1) Add the class "stretch" to the element you want to stretch.

2) Then add the class "stretch-container" to the parent or grand-parent it should inherit the width from

if you want a header with 2 or more lines where every line is stretched to the max, just break the lines with the <br> tag and every line will get the optimal font-size.

This also works for flexible designs. Resize your window and the header-sizes follow. (except for <= ie8, you'll have to refresh the page after resize)

example, in the header add your mootools: ```html

<script src="javascript/mootools-core-1.4.5-min.js"></script>

```

```html #HTML

<div id="container" class="stretch-container">
            <div id="header">
                <h1 class="stretch normal-height">Here's your header</h1>
            </div>
            <div id="left-column" class="stretch-container">
                <h2 class="stretch">And here is one<br>spread over two lines</h2>
                <p>...</p>
            </div>
            <div id="right-column" class="stretch-container">
                <h2 class="stretch">And here one<br>spread over<br>three lines</h2>
                <p>...</p>
            </div>
</div>
<script src="javascript/headerstretch.js"></script>

<script>window.addEvent('load' , function() {
    HeaderStretch = new HeaderStretch([options]);
});</script>

```

The options are optional:

fontSize : defaults to 24

lineHeight : defaults to 0.8

increase : defaults to 2

where:

1) fontSize is the minimum font-size, here starts the increaseFontSize loop.

2) lineHeight: headers with big letters might look better when line height is a bit less than the normal line-height - also dependent on font you use. Use the class "normal-height" for the tags you want to keep normal line-height of 1 (if you have a big header on top of the page f.ex. to prevent getting top of the text off screen)

3) increase: when in the last phases of tuning the font-size, the size will increase with [increase]px in every loop. if you work with smaller text you might want to change it to 1. The smaller the number, the higher the precision and the more loops (and time) are needed.

Notes

You might prefer the 'domready' instead of 'load', but you shouldn't change it when using webfonts. The fonts have to be loaded first else the function runs with the default font and the result won't be good.

Example

a working example you'll find on mamboozo.com

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.