How We Use Our Stuff on IG.com Vol. 1

I've been quiet for some time because I've been trying to get the new web site out the door.  Now that it's been released, I can take some time to just kick back, relax, and take a break.  NOT!  One thing I love about this place is that we're always on the move; we don't rest on our laurels, etc. :)  So I'm on to new things, and one of those things is the chance to blog a bit here and there. 

My first blog in this vein is the first in a series of how we use our stuff on the new infragistics.com web site.  I actually intend to put something up on the site itself about this to serve kind of as an addendum to our demos and samples browsers, but for now, blogging will do.

Before I move on to that, I do want to mention that it was our intent for the web site to work in Firefox 1.5+, IE 6, and IE 7 at a minimum.  So if you have problems with the site and are using one of those, please don't assume that we're expecting you to use a specific browser; just let us know what the problem is, and we'll do our best to fix it. 

I did also note that most of the site appears to work in Opera 9, and I'd like for it to work in Safari, so if you use those or have another favorite browser and run into issues, just send an email to webmaster@infragistics.com, tell us what browser and version you're using as well as steps to repro.  I can't promise anything, but if we can make it work with reasonable effort, we'll do so.  Also, our target minimum resolution is 1024x768, so if you run into issues at that res, please let us know.

Now back to the point at hand.  For the first one in this series, let's look at our WebTab control and how we use it on our control features pages.  For example, check out the WebGrid for ASP.NET Features list.

Note that when you hover over a tab, after a brief pause, it changes the content pane.  This can be achieved by creating a Javascript function like this:

function OnFeaturesTabOver(oWebTab, oTab, oEvent)
{
    oWebTab.showTimer = window.setTimeout(function() {oWebTab.setSelectedTab(oTab);}, 350);
}

You'll need to set the OnFeaturesTabOver (or whatever your method is called) as the MouseOver event handler in the control's ClientSideEvents.  But this is only half the solution.  Because we're using the setTimeout to create the delay effect, we need a corresponding MouseOut event handler to cancel the change if the user mouses out before the pause time has elapsed.  This allows a user to move the mouse over other tabs quickly without triggering a change.  So for instance, if they wanted to go see one of our flyout images and accidentally slid over another feature category, it wouldn't change the selected tab.  To achieve this, use a JS function like so:

function OnFeaturesTabOut(oWebTab, oTab, oEvent)
{
    if (oWebTab.showTimer)
        window.clearTimeout(oWebTab.showTimer);
}

And of course, you need to set that method to be the ClientSideEvents.MouseOut handler for the WebTab.  That's all you need to do to get WebTab to change the content pane on hover with a user-friendly delay.

While I'm here, though, I should mention a few other tweaks we used to get the look and feel the way we wanted.  First off, because the WebTab is meant to function out of the box and look like a tabbed interface, there are some default styles that are applied.  Most of these can be overridden with CSS, but at least one has to be set directly.  Here's the markup we're using for that instance of the WebTab:

<igweb:FeatureWebTab runat="server" ID="FeatureTabs" TabOrientation="LeftTop" CssClass="FeatureTabs" 
  BorderWidth="0">
    <DefaultTabStyle CssClass="Normal" />
    <HoverTabStyle CssClass="Selected" />
    <SelectedTabStyle CssClass="Selected" />
</igweb:FeatureWebTab>

You'll note right way that it looks like I'm using a custom control, but really, this control (FeatureWebTab) simply inherits from UltraWebTab to encapsulate some of the data binding we're doing, which really isn't all that interesting.  All the properties you see are those of the WebTab itself.  The one in particular you'll need to set to override the default styling is the BorderWidth.  That gets rid of the tabbish L&F of the WebTab and allows you to style it to look however you want.  The other key thing was the TabOrientation, which just specifies we want the tabs to show vertically on the left, aligned to the top.  The rest are just our CSS classes that specify our particular L&F.

In addition to that, I found it helped to specify the ClientSideEvents.InitializeTabs method to OnFeaturesTabInit, which you see next:

function OnFeaturesTabInit(oWebTab)
{
    // find reference to ContentPane TD
    var cp = document.getElementById(oWebTab.ID+"_cp");
    if(cp)
        cp.vAlign = 'top'; // make the content panel top align
}

This ensured that my content pane content was all aligned to the top due to the unreliable nature of CSS vertical alignment.

So that's pretty much it in general terms.  The details of how we achieved our specific look and feel have more to do with the HTML and CSS we put into the tab, not the tab itself, but I wanted to highlight how easy it is to give the WebTab a light feel with hover switching that makes you feel like you're not really using tabs at all.  If you'd like to know more on the particular HTML and styling we're using, just comment on this post and say so.