JQuery TabContainer Theme with Tab Transition Animations

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition.

Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)

JQuery Tab Theme

Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just like with the previous tab theme sample, I am making use of a single image sprite that contains both the background image for the active and inactive tabs.

In the common style section I define the font characteristics for the control, the common styles for both active and inactive tabs as well as the style I want applied to the tab body.

The inactive JQuery tabs use a light green image for the background and have a single pixel of white space between the tab header and the tab body.  Also, if you look closely at the background images I am using for the tab headers, both the left and right edges of the image is slightly rounded.  To make sure this rounded appearance is visible, I added a margin to the outer and inner style classes.  Also notice how I am forcing the ajax__tab_outer background image to align to the right (so the right rounded edge is visible) and the ajax__tab_inner image aligns to the left for the same reason.

The style rules for the active tab is very similar.  The main difference is that the background rule includes an offset and the margin is removed.

Creating the TabAnimationExtender

Now that we have the JQuery theme created, we can move on to building the component that handles the animation.  The animation effect I have implemented in the demo is a FadeIn Animation.  Of the ones I saw on the JQuery site, this is the one I liked the best.  Just like the ModalPopup example, to implement this feature I created a new extender control - the TabAnimationExtender.  This control contains a single property (OnActiveTabChanged) of type Animation.  Assuming that I have already added the markup to the page for a TabContainer control with ID 'jquery', the following shows how I tell my new extender control to fade in the tab's body when the selected tab changes.  Because I have not specified any attributes for the FadeIn Animation all of the default values are used (duration = 1 sec, frames per sec = 25, max opacity = 1, min opacity = 0).

If you haven't created an extender control before, they are usually made up of 3 components: the class for Extender, the class for the Extender's designer, and the JavaScript behavior that defines the client side functionality (here is a good tutorial).  Usually your extender will inherit directly from ExtenderControlBase, but because the TabAnimationExtender uses the toolkit's Animation infrastructure, it will inherit from the AnimationExtenderControlBase instead.  If you download my sample solution, you can see there isn't too much to my extender class and designer - the extender class contains just a single property.  For this sample, the only real complexity is with the JavaScript behavior. 

When the TabAnimationExtender's client side behavior is initialized, it is passed the HTML DIV element that is the container element of the tab.  In this initialize function, I find the DIV node that has the ajax__tab_body class applied to it.  Once I have found this node, I use it to initialize the client side component for the Animation I want to run for the tab transitions.  I use the body DIV instead of the DIV container because I don't want the animation to include the header tabs.  In the last initialization step, I fetch the behavior for the TabContainer and attach to the activeTabChanged event.  The handler for this event is where I run the transition animation.

Things I learned ...

Well that's about it for the implementation details.  However I did learn a few new items that I thought I would pass along.

1. The FadeAnimation isn't great about cleaning up after itself too well.  I noticed this before with a few of our UpdatePanelAnimationExtender's that use a FadeAnimation.  After the fade has completed, the control looks slightly blurry.  Checkout the 2 images below.  The one on the left is how the text originally is rendered in IE7 on my Vista PC.  The image on the right is what it looks like after the animation has run.  It's not nearly as crisp.  I don't have this problem on my IE6/XP machine.  

I used the IE Developer Toolbar to try to troubleshoot this.  I narrowed it down to the filter style that is applied.  If I use the developer toolbar to delete the filter style, the text looks good again.  I couldn't find a good way to programmatically accomplish this, the closest I came was to run a ScriptAction that runs after the Fade to remove the filter from the cssText.  Anyone run into this or know of a good solution? 

 

2. The TabContainer doesn't have a BehaviorID, so to fetch the client side behavior you will need to use the ClientID for the TabContainer - you will have to take NamingContainer's into account.

 

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/86

Comments


Posted by: Ted Glaza on November 17, 2007 12:00 AM

Thanks for another great post! The problem youre seeing with the FadeIn animation has to do with how IE and ClearType work together. Searching "IE ClearType Opacity" should provide more details.

Posted by: Ryan Anderson on November 23, 2007 12:00 AM

Matt, you just keep dishing out the goods! Well done, keep it up!

@Ted -

Thanks for the info Ted.

Is there a workaround for it? If I open IE Toolbar and delete the filter, the page looks crisp again. Could this be automated as part of the Fade animation?

Matt.

Posted by: ZitizonX on November 27, 2007 12:00 AM

Hey Matt,

I am so in love with ur Blog.To be honest its one of the best informative blogs I have ever seen.

I think I can make that comment because you just do all the things that I wanted to do in my Development Environment. Youre a legend and keep up the great work.

Can I ask you something where do you find time to do all this work? Do you work or are you running your own business? Thanks a lot for sharing your great knowledge with everyone. Have a great day

ZitizonX

@ZitizonX -

Wow what a great compliment. Thank you!

I am just another Joe Developer - I work for The Man at a smallish software shop in Jacksonville FL. As for finding time to blog - I enjoy research and writing so sneaking an hour here or there to put a post together isnt too much of a challenge.

Matt.

Posted by: anne on January 7, 2008 12:00 AM

hi matt and everybody, i am an ajax newbie and i am trying to figure it out how to combine a dynamic php gallery with javascript transition effects like fade out into white. i know there must be an answer but i am too beginner.. anyone for annieone here..?

Posted by: Liu on January 25, 2008 12:00 AM

Wow, very nice! I installed and tweaked it like you said, but I want to center the tabs instead of having them floating on the left. I trued "float: none" and other tweaks, but can;t get it in the center. Any ideas?
Tks!

nice thing the jquery tabs with effects. thank you

I solved the switching tabs programmatically problem. I discovered the .set_activeTabIndex(index) method from this post.

Keep up this good info.

Thanks.

kw.

Posted by: Erik Roll on March 14, 2008 12:00 AM

Just wondering if youve made any progress on the filter problem, the one where the line looks something like :
progid:DXImageTransform.Microsoft.Alpha(opacity=100)

because it leaves a salt spray of white pixels on portions of my images! Until I read your blog I thought I was losing my mind. Its IE 7 specific too!

Posted by: Gajendra Dixit on April 10, 2008 12:00 AM

Very nice and step by step explaination is given.
Thanks for such a useful post, Keep it up.........

Great post and just what Im looking for BUT if JavaScript is disabled I dont see any content. Do you have a standards compliant version?

Well,pretty good. Do you have a mouse move over then change the tab instead of a click otn tab?

I really like this tabbed menu theme and I hope to use it one some websites I am creating.

Really great!! this is the stuff we need :)

Posted by: Atanu Banerjee on May 8, 2008 12:00 AM

Hi

I am using this UI.tabs in my application but it causes the image-flicker problem in IE6.

I dont understand what the problem actually is. Please clarify it?

Matt,

Great example! I'm using this as a basis for a site design, but I ran into something odd; perhaps you can explain what I'm seeing.

I'm using a FadeIn on the tab transitions, in sequence with a ReSize. Any contents of the tab that are not set as "relative" or "absolute" fade in with the tab wonderfully; however, any item that's been set with an absolute or relative position seems to be immune to the fade. Any suggestions on what's causing this behavior?

Posted by: Martin on September 15, 2008 07:34 AM

Matt,

I’ve come across a fix for the blurry text problem in IE when using the fadeIn and fadeout effects. If you go to http://jquery.cherryaustin.com/ and do a find for “cleartype” there’s a nice easy fix for the problem.

Hope this helps.


Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Martin wrote: Matt, I’ve come across a fix for the blurry text problem in IE when using the fadeIn and fadeout ...
  • Carole Bennett wrote: Matt, Great example! I'm using this as a basis for a site design, but I ran into something odd; pe...
  • Atanu Banerjee wrote: Hi I am using this UI.tabs in my application but it causes the image-flicker problem in IE6. I do...
  • Tweend webdesign wrote: Really great!! this is the stuff we need :) ...
  • Dale wrote: I really like this tabbed menu theme and I hope to use it one some websites I am creating. ...
  • stay wrote: Well,pretty good. Do you have a mouse move over then change the tab instead of a click otn tab? ...
  • Gajendra Dixit wrote: Very nice and step by step explaination is given. Thanks for such a useful post, Keep it up............
  • Darren Taylor wrote: Great post and just what Im looking for BUT if JavaScript is disabled I dont see any content. Do you...