Alfa Jango Blog Engineering, Software, and Entrepreneurship

It’s only been a week since the last release, but I’m excited to present jQuery EasyTabs v2.2. New with this release:

• Panel height animated transitions
• Animation transition options

• 
  View demo with new features
• 
  View plugin homepage
• 
  View changelog

Animated height transitions

In many cases, the tab panels (where the tabbed content lives) are not the same height. Now, EasyTabs automatically animates the height transition between panels of differing heights. The speed for the animation to scale panel heights depends on the animationSpeed option.

View the demo to see this new effect in action.

Animated transition options

As requested, EasyTabs now gives more control over the effects used to transition between panels. The default transitions are still fadeIn and fadeOut, respectively. But now, you can specify any other jQuery effect to use as well. The new options are:

For example:

To see this in action, check out the demo.

The jQuery EasyTabs plugin is now at version 2.1.0 2.1.2 (I managed to bump the version number twice before publishing this post). This release adds three four new features:

• uiTabs option
• collapsible option
• Cancel tab-change in ‘easytabs:before’ hook
• Useful parameters in callback hooks

• 
  View demo with new features
• 
  View plugin homepage
• 
  View changelog

uiTabs option

Perhaps my favorite addition to the EasyTabs options, when uiTabs: true, EasyTabs will automatically add and use the same class names used by the jQuery UI tabs. This feature opens the doorway to making EasyTabs a drop-in replacement for jQuery UI tabs once you’ve outgrown UI’s out-of-the-box theming and structure.

If you are currently using UI tabs with this:

Simply replace the above line with this:

And your tabs will still look and function the same as before. Now you can start customizing the CSS and HTML markup with the flexibility of EasyTabs.

(more…)

jQuery EasyTabs has reached version 2.0! We’re so proud, they grow up so gosh darn fast these days.

If you don’t know, EasyTabs is our jQuery plugin that allows you to create simple, easily customizable tabs, keeping your markup clean and easy to style.

EasyTabs v2 is completely backwards compatible with v1.x, so you should be able to swap in the new version, with only one minor modification:

… now becomes:

We simply dropped the capitalization of the “T” to make it easier to type.

So, what’s new for EasyTabs v2?

(more…)

I’ll keep this post short and sweet. My good friend, Anthony Montalbano, has released a WordPress plugin for our CSSEmoticons jQuery plugin. Now you can use pure-CSS emoticons in your blog or WordPress site simply by installing and activating the WordPress plugin.

The WP plugin currently has options for you to apply “emoticonization” to your posts, the comments, or both.

Also, since the CSSEmoticons jQuery plugin doesn’t currently work with Internet Explorer, the WP plugin automatically reverts to WordPress’s built-in emoticon image-replacement for Internet Explorer.

Be sure to check it out and try it on your blog if you’re cool enough B-) . We’re already using it on this one, and we <3 our new plugin.

CSS3 is great and there is no shortage of amazing showcases highlighting what you can do with a little CSS3 and a lot of time. One popular theme for showing off the capabilities of CSS3 has been creating pure-CSS icons that you’d swear are images (like these or these).

Why other pure-CSS icons are not practical

Complex pure-CSS icons are not practical for use in production websites. They are difficult to maintain and are often only possible with an un-semantic mess of markup. Not to mention, we already have the perfect tool for graphic representations: images. (For more on this, see Faruk Ateş’s post on the subject.)

Why pure-CSS emoticons ARE practical

Think about it, the great thing about emoticons is that they are textual representations that are inherently and immediately recognizable as faces expressing the emotions they represent.

Traditionally, if you wanted to display emoticons graphically on a web page, you used a script (typically javascript) to find and replace text-emoticons with small smiley-faced images that correspond to each emoticon. But if textual emoticons already resemble these faces, isn’t it overkill to completely replace them with images that resemble these faces just slightly more?

Further, inserting images now breaks the ability for visitors to copy and paste the text elsewhere. Well, technically they can still copy and paste, but it completely skips the emoticon images, instead of allowing them to simply copy the original text as written. I.e. The following text:

gets copied and pasted as this:

Notice, the smiley is omitted, potentially altering the context of the original text.

UPDATE: Many browsers will copy the alt attribute text of the image if it is set properly. However, webkit-based browsers, such as Safari and Chrome, do not do this. Thanks for the tip, Faruk Ateş (via email).

Enter our new jQuery plugin / stylesheet. It keeps the text emoticons completely intact, and just gives them a little anthropomorphic nudge with CSS. Now, using pure-CSS emoticons, this:

gets copied and pasted as this:

Benefits of pure-CSS emoticons

There are several reasons to use pure-CSS emoticons over the traditional image-replacement method:

• Keeps text markup semantic (plugin only wraps textual emoticons in a single <span> element).
• Retains original text, as typed, for copy/paste and page indexing.
• Automatically sizes to fit the text. No need for multiple emoticon image sets of varying sizes.
• Does not break the line-height of paragraphs like most of the image-replacement methods.

Check it out

I’ve recently made the jQuery EasyTabs plugin more flexible and usable. These updates came out of upgrades to our web app, LeadNuke, which uses it in production on the Feature Tour page (and some internal pages as well). And best of all, thanks to some other optimizations, the EasyTabs plugin is still the exact same size, coming in at just 4KB!

So, without further ado, let’s look at the updates.

(more…)

I recently wrote a lightweight jQuery plugin called EasyTabs, and it is now released on the official jQuery plugin website. Most front-end developers are familiar with the jQuery-UI tab plugin. However, it is a very magical plugin with a complex structure, which completely styles your tabs for you, and limits your options when deciding how to structure the tabbed content.

For instance, it is very difficult to place your tabs below the tabbed content with jQuery-UI tabs.. You must perform some crazy CSS trickery, because jQuery-UI tabs forces you to place your <ul> before your content <div>s. Not to mention all of the jQuery-UI styling it does to your tabs by default, making it difficult to override and apply custom stylization to your tabs.

This new plugin, jQuery EasyTabs, is very flexible for the required markup and structure of your tabs and content. Also, it handles only the functionality of creating in-page tabs, leaving all of the styling up to you and your own CSS.

To check it out, see our documentation and demos. Then when you’re ready, you can download it from the jQuery plugins website.