DailyJS

DailyJS

The JavaScript blog.


Tagtabs
Featured

libraries modules tabs localStorage client-side

The Local Storage Bridge

Posted on .

Doing something as simple as passing values between iframes and tabs is surprisingly awkward, and you'll end up trying anything to get it to work. Krasimir Tsonev has created a library called lsbridge (GitHub: krasimir/lsbridge, License: MIT, npm: lsbridge), or Local Storage Bridge. It allows you to send messages between tabs using Local Storage as a communication channel.

lsbridge

The API uses the .send and .subscribe methods to pass messages one way. You can also call lsbridge.isLSAvailable to check if the Local Storage API itself is available. Here's an example of the usage:

lsbridge.send('my-namespace', { message: 'Hello world!' });

lsbridge.subscribe('my-namespace', function(data) {  
  console.log(data); // prints: { message: 'Hello world!'}
});

console.log(lsbridge.isLSAvailable); // prints "true" or "false"  

Internally, lsbridge uses a setTimeout polling loop to set and remove items. The interval is 100 milliseconds, and there's a separate interval for item removal which is set to a second.

This is a pragmatic way to send data between tabs that doesn't require ugly hacks. For more context behind the library, see Krasimir's blog post Using Local Storage as a communication channel.

Featured

libraries animation jquery ui tabs

PWS Tabs, wheelnav.js

Posted on .

PWS Tabs

PWS Tabs (GitHub: alexchizhovcom/pwstabs, License: MIT) by Alex Chizhov is a jQuery plugin that helps you create modern, flat tabs, with CSS3 animations and Font Awesome Icons.

It uses data- attributes to set the tab's title and icon. The $(selector).pwstabs method accepts options for the tab position (horizontal or vertical) and the animation effect name.

The plugin source itself is fairly leightweight, and it comes with examples that include CSS. When I reviewed this plugin I had to download the examples because I couldn't access Alex's site, but he does link to a live demo in the readme.

wheelnav.js

wheelnav.js (GitHub: softwaretailoring/wheelnav) by Gábor Berkesi is an SVG-based library that you can use for a centerpiece animated navigation component. This might work well for a marketing website, which is the example Gábor uses, but I think it would be really cool on a child-friendly site with lots of bright colours site as well.

The licensing is mixed -- there are free versions but also more advanced paid versions.

A good example of the library can be found on the download page, which ties a spinning component in with some tabbed navigation.

Featured

jquery plugins jquery-ui tabs slideshow

jQuery Roundup: jq-tiles, plusTabs, Kwicks

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jq-tiles

jq-tiles

jq-tiles (GitHub: elclanrs / jq-tiles, License: MIT) is a slideshow plugin that breaks images up into tiles and uses CSS3-based effects. The number of tiles can be changed, and the transition and animation speeds can be configured.

To use the plugin, call $('.slider').tilesSlider(options) on an element that contains a set of images. Events are used to stop and start the slideshow: $('.slider').trigger('start').

plusTabs

plusTabs compared with standard tabs

plusTabs (GitHub: jasonday / plusTabs, License: MIT/GPL) by Jason Day groups jQuery UI tabs under a tab with a menu. Jason's example is scaled to a slim resolution that might be found on a smartphone, showing how jQuery UI tabs become cluttered and messy in such circumstances.

Kwicks

Kwicks (GitHub: jmar777 / kwicks, License: MIT) by Jeremy Martin is a sliding panel plugin. It can display vertical or horizontal panels, and grow or shrink them on hover. It can also be used to create a slideshow.

Kwicks works with nested elements like an unordered list, but it'll actually work with any tag, so <li> isn't hardwired.