Skip to content

Allow me to undo the fittext #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Allow me to undo the fittext #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
edf71d4
Adding a throttle to resize, and also give the ability to reset via c…
wheeyls Feb 7, 2012
211569a
Removed obsolete change to example
wheeyls Feb 7, 2012
496b354
Updated to drop throttle, added note to readme about resetting.
wheeyls Feb 7, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and `

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

### Resetting
You can reset all fitted text so that it will fallback to CSS defaults by triggering the "fittext-reset" event.

$(document).trigger("fittext-reset");

## CSS Tips

* Make sure your headline is `display: block;` or `display: inline-block;` with a specified width, i.e. `width: 100%`.
Expand Down
22 changes: 19 additions & 3 deletions jquery.fittext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,21 @@
*/

(function( $ ){

function setup_listener() {
$(window).resize(function() {
$(document).trigger("fittext-resize");
});
// only once
setup_listener = function(){};
}
$.fn.fitText = function( kompressor, options ) {

var settings = {
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
};

setup_listener();

return this.each(function(){
var $this = $(this); // store the object
Expand All @@ -30,15 +38,23 @@
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// resetter() wipes out inline fonts and stops listening
var resetter = function() {
var style = $this.attr("style");
$this.attr("style", style.replace(/font-size:.*?;/, ""));
$(document).unbind("fittext-resize", resizer);
$(document).unbind("fittext-reset", resetter);
};

// Call once to set.
resizer();

// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
$(document).bind("fittext-resize", resizer);
$(document).bind("fittext-reset", resetter);

});

};

})( jQuery );
})( jQuery );