jQuery Roundup: FitText, gmap3, Awesomemarkup
jquery
plugins
geo
typography
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.
FitText
Somehow I missed this companion project to the popular Lettering.js, but in case you also missed it… FitText (GitHub: davatron5000 / FitText.js) by Dave Rupert and Paravel resizes text to fit the parent element. It makes creating fluid magazine-like layouts possible, just by using appropriate CSS and $('#responsive_headline').fitText();.
There’s also an interesting comment in the readme about window.resize:
If you oppose
window.resize(), it’s worth mentioning that @chriscoyier created a fork of FitText using a debounced resize method.
The original post about debouncing is here: Debouncing Javascript Methods.
gmap3
gmap3 (GitHub: jbdemonte / gmap3) by Jean-Baptiste Demonte makes working with Google Maps a lot simpler, leveraging jQuery’s succinctness rather nicely:
$('#example').gmap3();
It also takes parameters in the form of an array of objects. Each object has an action:
$('#example').gmap3(
{ action: 'init',
options: {
center: [46.578498, 2.457275],
zoom: 5
}
},
{ action: 'addMarker',
latLng: [48.8620722, 2.352047]
},
{ action: 'addMarker',
latLng: [48.8620722, 2.352047]
}
);
Awesomemarkup
Awesomemarkup (GitHub: clint-tseng / awesomemarkup, License: WTFPL) by Clint Tseng is a framework-agnostic library for generating markup. When used with jQuery, it’ll add $.tag:
// Instead of doing this:
var markup = '<div class="content ' + article.contentType +
'" style="display:' + (article.visible ? 'block' :
'none') + '">' + '<h2>' + article.title + '</h2>' +
'</div>';
// Awesomemarkup makes this possible:
var markup = $.tag({
_: 'div',
class: [ 'content', article.contentType ],
style: {
display: { i: article.visible, t: 'block', e: 'none' }
},
contents: {
_: 'h2',
contents: article.title
}
});
Clint has also added CommonJS support, which means Awesomemarkup can be used in Node too.
