Skip to content

Commit

Permalink
created example for multiple at once
Browse files Browse the repository at this point in the history
  • Loading branch information
@michikono
michikono committed Aug 23, 2014
1 parent 0ff7ba7 commit b74fa3b
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 94 deletions.
14 changes: 14 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,22 @@ Boxfit is a jQuery plugin for resizing text. It will scale text to fit inside a
Usage
=====

Include the library after jQuery:

```html
<script src="dist/jquery.boxfit.min.js" type="text/javascript"></script>
```

Create a div:

```html
<div id="my-big-box" style="width: 500px; height: 500px">
This is some text
</div>
```

Apply the transformer:

```javascript
$('#my-big-box').boxfit();
```
Expand Down Expand Up @@ -76,6 +86,10 @@ Valid parameters:
- *minimum_font_size*: (default 5) minimum font size (changing this may cause some "shrink" scenarios to overflow instead)
- *maximum_font_size*: (default null) set to the max font size you want for the element, if none is given there is no maximum

Demo
====
View the file at demo.html for examples in action.


License
=======
Expand Down
47 changes: 36 additions & 11 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</head>
<meta charset='utf-8'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.boxfit.js"></script>
<script src="dist/jquery.boxfit.min.js" type="text/javascript"></script>
<style>
div { padding: 5px; margin: 5px; border: 2px solid red; }
</style>
Expand All @@ -14,38 +14,38 @@ <h1>Standard example</h1>
<textarea cols=80 rows=5>
<div id="box1" style="width: 500px; height: 200px">Word.</div>
<script>
$("#box1").boxfit()
$("#box1").boxfit();
</script>
</textarea>
<div id="box1" style="width: 500px; height: 200px">Word.</div>
<script>
$("#box1").boxfit()
$("#box1").boxfit();
</script>
<hr/>

<h1>Standard exmaple with too much text</h1>
<textarea cols=80 rows=5>
<div id="box2" style="width: 250px; height: 100px">No wrapping allowed. This can sometimes makes things awkward/shrink.</div>
<script>
$("#box2").boxfit()
$("#box2").boxfit();
</script>
</textarea>
<div id="box2" style="width: 250px; height: 100px">No wrapping allowed. This can sometimes makes things awkward/shrink.</div>
<script>
$("#box2").boxfit()
$("#box2").boxfit();
</script>
<hr/>

<h1>Text wrapping enabled</h1>
<textarea cols=80 rows=5>
<div id="box3" style="width: 200px; height: 300px">this is some cool text I want to fit here</div>
<script>
$("#box3").boxfit({multiline: true})
$("#box3").boxfit({multiline: true});
</script>
</textarea>
<div id="box3" style="width: 200px; height: 300px">this is some cool text I want to fit here</div>
<script>
$("#box3").boxfit({multiline: true})
$("#box3").boxfit({multiline: true});
</script>
<hr/>

Expand All @@ -54,25 +54,50 @@ <h1>Max font size</h1>
<textarea cols=80 rows=5>
<div id="box4" style="width: 500px; height: 400px">Max font size 36</div>
<script>
$("#box4").boxfit({maximum_font_size: 34})
$("#box4").boxfit({maximum_font_size: 34});
</script>
</textarea>
<div id="box4" style="width: 500px; height: 400px">Max font size 36</div>
<script>
$("#box4").boxfit({maximum_font_size: 34})
$("#box4").boxfit({maximum_font_size: 34});
</script>


<h1>Turn off centering and alignment</h1>
<textarea cols=80 rows=5>
<div id="box5" style="text-align: right; width: 500px; height: 400px">Inherit alignment settings</div>
<script>
$("#box5").boxfit({align_center: false, align_middle: false, maximum_font_size: 40})
$("#box5").boxfit({align_center: false, align_middle: false, maximum_font_size: 40});
</script>
</textarea>
<div id="box5" style="text-align: right; width: 500px; height: 400px">Inherit alignment settings</div>
<script>
$("#box5").boxfit({align_center: false, align_middle: false, maximum_font_size: 40})
$("#box5").boxfit({align_center: false, align_middle: false, maximum_font_size: 40});
</script>


<h1>Multiple at once :)</h1>
<textarea cols=80 rows=9>
<table class="boxes">
<tr>
<td><div style="width: 300px; height: 300px">Example huge cells</div></td>
<td><div style="width: 300px; height: 300px">Example huge cells</div></td>
</tr>
</table>
<script>
$(".boxes td div").boxfit({align_center: true, align_middle: true});
</script>
</textarea>

<table class="boxes">
<tr>
<td><div style="width: 300px; height: 300px">Example huge cells</div></td>
<td><div style="width: 300px; height: 300px">Example huge cells</div></td>
</tr>
</table>
<script>
$(".boxes td div").boxfit({align_center: true, align_middle: true});
</script>

</body>
</html>
161 changes: 79 additions & 82 deletions dist/jquery.boxfit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,94 +5,91 @@
To use: $('#target-div').boxFit()
Will make the *text* content inside the div (or whatever tag) scale to fit that tag
*/
'use strict';

(function () {
(function ($) {
return $.fn.boxfit = function (options) {
return this.each(function () {
var current_step, inner_span, next_font_size, original_height, original_text, original_width, settings, span;
settings = {
// manually set a width/height if you haven't set one explicitly via CSS
width: null,
height: null,
// the amount to change each time - bigger numbers are faster but fit less perfectly
step_size: 1,
// the number of font size iterations we should step through until we give up
step_limit: 200,
// set to false to NOT align middle (vertically)
align_middle: true,
// set to false this to NOT center the text (horizontally)
align_center: true,
// set to false to allow the big text to wrap (useful for when you want text to fill a big vertical area)
multiline: false,
// minimum font size (changing this may cause some "shrink" scenarios to overflow instead)
minimum_font_size: 5,
// set to a number to limit the maximum font size allowed
maximum_font_size: null
};
$.extend(settings, options);
(function ($) {
$.fn.boxfit = function (options) {
return this.each(function () {
var current_step, inner_span, next_font_size, original_height, original_text, original_width, settings, span;
settings = {
// manually set a width/height if you haven't set one explicitly via CSS
width: null,
height: null,
// the amount to change each time - bigger numbers are faster but fit less perfectly
step_size: 1,
// the number of font size iterations we should step through until we give up
step_limit: 200,
// set to false to NOT align middle (vertically)
align_middle: true,
// set to false this to NOT center the text (horizontally)
align_center: true,
// set to false to allow the big text to wrap (useful for when you want text to fill a big vertical area)
multiline: false,
// minimum font size (changing this may cause some 'shrink' scenarios to overflow instead)
minimum_font_size: 5,
// set to a number to limit the maximum font size allowed
maximum_font_size: null
};
$.extend(settings, options);

// take measurements
if (settings.width) {
original_width = settings.width;
$(this).width(original_width + "px");
} else {
original_width = $(this).width();
// take measurements
if (settings.width) {
original_width = settings.width;
$(this).width(original_width + 'px');
} else {
original_width = $(this).width();
}
if (settings.height) {
original_height = settings.height;
$(this).height(original_height + 'px');
} else {
original_height = $(this).height();
}

if (!original_width || !original_height) {
if (window.console !== null) {
return console.info('Set static height/width on target DIV before using boxfit! Detected width: ' + original_width + ' height: ' + original_height);
}
if (settings.height) {
original_height = settings.height;
$(this).height(original_height + "px");
} else {
if (!settings.multiline) {
$(this).css('white-space', 'nowrap');
}
original_text = $(this).html();
if ($('<div>' + original_text + '</div>').find('span.boxfitted').length === 0) {
span = $($('<span></span>').addClass('boxfitted').html(original_text));
$(this).html(span);
} else {
original_height = $(this).height();
span = $($(this).find('span.boxfitted')[0]);
}
if (settings.maxFontSize !== undefined) {
settings.maxFont = true;
current_step = 0;
inner_span = span;
$(this).css('display', 'table');
inner_span.css('display', 'table-cell');
if (settings.align_middle) {
inner_span.css('vertical-align', 'middle');
}
if (settings.align_center) {
$(this).css('text-align', 'center');
inner_span.css('text-align', 'center');
}
if (!original_width || !original_height) {
if (window.console != null) {
return console.info("Set static height/width on target DIV before using boxfit! Detected width: '" + original_width + "'; height: '" + original_height + "'");
}
} else {
if (!settings.multiline) {
$(this).css('white-space', 'nowrap');
}
original_text = $(this).html();
if ($("<div>" + original_text + "</div>").find("span.boxfitted").length === 0) {
span = $($("<span></span>").addClass("boxfitted").html(original_text));
$(this).html(span);
} else {
span = $($(this).find('span.boxfitted')[0]);
}
current_step = 0;
inner_span = span;
$(this).css("display", "table");
inner_span.css("display", "table-cell");
if (settings.align_middle) {
inner_span.css("vertical-align", "middle");
}
if (settings.align_center) {
$(this).css("text-align", "center");
inner_span.css("text-align", "center");
}

// keep growing the target so long as we haven't exceeded the width or height
inner_span.css("font-size", settings.minimum_font_size);
while ($(this).width() <= original_width && $(this).height() <= original_height) {
if (current_step++ > settings.step_limit) {
break;
}
next_font_size = parseInt(inner_span.css("font-size"), 10);
if (settings.maximum_font_size && next_font_size > settings.maximum_font_size) {
break;
}
inner_span.css("font-size", next_font_size + settings.step_size);
// keep growing the target so long as we haven't exceeded the width or height
inner_span.css('font-size', settings.minimum_font_size);
while ($(this).width() <= original_width && $(this).height() <= original_height) {
if (current_step++ > settings.step_limit) {
break;
}

// go back one step
inner_span.css("font-size", parseInt(inner_span.css("font-size"), 10) - settings.step_size);
return $(this);
next_font_size = parseInt(inner_span.css('font-size'), 10);
if (settings.maximum_font_size && next_font_size > settings.maximum_font_size) {
break;
}
inner_span.css('font-size', next_font_size + settings.step_size);
}
});
};
})(jQuery);
}).call(this);

// go back one step
inner_span.css('font-size', parseInt(inner_span.css('font-size'), 10) - settings.step_size);
return $(this);
}
});
};
})(jQuery);
2 changes: 1 addition & 1 deletion dist/jquery.boxfit.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b74fa3b

Please sign in to comment.