Interactive map of the origin-destination stocks by country.The map allows you to see for every country X in the world either the top ten providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from X. On top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita, the HIV and Tuberculosis prevalences and the death rate of children under five.
jQuery Scrollable Table Plugin
This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.
The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.
Simile Widgets : JavaScript Interactive Timeline
Timeline is a JavaScript widget for creating interactive timelines. You can scroll through items featured in chronological order by using your mousewheel or by holding down your mouse button on the timeline and dragging left or right. Clicking on a dot, which represents an item in the time line, will reveal more information. Timeline is open source, released under the BSD license.
jQuery EasyTabs Plugin
EasyTabs is a jQuery plugin that handles all of the tab functionality, leaving the styling to you.
Features :
- Lightweight: the minified version is only 8KB – vs 20KB for only the jQueryUI core + tabs widget
- Provides smooth transitions between panels when tab is selected
- Allows complete customization of appearance, layout, and style via CSS
- Supports back-button and forward-button in browsers
- Tabs are bookmarkable and SEO-friendly
- Loads AJAX content, or anything not already on the page
- Tabs can automatically cycle at a specified interval
- Can have multiple EasyTabs instances on one page
- Written in jQuery plugin format, chain-able with other jQuery commands
- Styles your tabs in any way (either through javascript or CSS)
jQuery iFrame Sizing
One thing I have always detested about iframes is they are not aware of the dimensions of their content. Setting the width of an iframe is trivial, because you generally know how wide its contents will be. The pain point often comes when specifying height, because pages always vary in length.
With a fixed height, the iframe is either too tall or short. This causes one of two undesirable outcomes: cutoff content, or a scrollbar. One of the cardinal sins of design is to have multiple scrollbars per page, and cutoff content just looks awkward. These two factors make iframes nearly unusable.
This past week, I thought to myself: “Wouldn’t it be nice if iframes just auto-magically knew what height they needed to be?” After a few days of toiling, with the help of jQuery, auto-sizing iframes are a reality.
Create – On-site web editing interface with jQuery
Create, from the Midgard Project, is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
The user interface philosophy behind Create is simple: all content that you are allowed to change becomes editable, right there on the page you’re reading. Any modifications you make are retained in your browser and can be sent back to the CMS with a push of a button. With Create, it is time to stop filling forms and to start communicating with your web audience.
Scrolling Parallax: A jQuery Plugin
Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the background to name a few. Addtionally you can attach the parallax to any piece of markup, as well as pass an image path as described above.
