jQuery Roundup: Fathom.js, jQuery-News-Ticker, jVectorMap

14 Jun 2011 | By Alex Young | Tags jquery plugins maps graphics

Fathom.js

Fathom.js (GitHub: markdalgleish / fathom, License: MIT) by Mark Dalgleish is a plugin for building presentations.

Given this HTML:

<div id="presentation">
<div class="slide"> <h1>My Presentation</h1> </div>
<div class="slide"> <h2>My Dot Points</h2> <ul> <li>First dot point</li> <li>Second dot point</li> <li>Third dot point</li> </ul> </div>
</div>

It just needs $('#presentation').fathom(); to display the content as a slide show. It comes bundled with CSS and supports keyboard shortcuts, so it’s easy to get started and use for real presentations.

jQuery-News-Ticker

jQuery-News-Ticker (GitHub: rhodimus / jQuery-News-Ticker, License: GPL v2) by Rhodri George is a news ticker plugin, similar to the one featured on the BBC News site. Before you scoff, this is exactly the kind of thing clients nag me to add to their sites, and this plugin is very well presented.

With some suitable markup, $('#js-news').ticker(); will do its magic:

<div id="ticker-wrapper" class="no-js">
  <ul id="js-news" class="js-hidden">
    <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
  </ul>
</div>

jVectorMap

jVectorMap is a nice little plugin for rendering maps with various attributes. The basic useage is just $('#map').vectorMap();, and this will even show zoom controls.

And, there’s no need to worry about IE!

It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML.


blog comments powered by Disqus