UNL Web Developer Network

by **dsockrider** » Wed Jun 24, 2009 12:46 pm

I'm interested in using a 5 tab system that spans 3 columns. Would it be possible to have a tab system created for the new template? Or should I just take care if it myself?

Here's a good article about tabs.
http://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/

by **rcrisler1** » Wed Jun 24, 2009 4:45 pm

There's code available in the wiki. Please feel free to modify and propose new/improved versions.

http://www1.unl.edu/wdn/wiki/Tabbed_Content_Areas

by **acoleman** » Thu Jun 25, 2009 12:02 pm

If you want to see a couple examples of that tab code in action (and modified to look nicer), check out:

The E.N. Thompson Forum website

The UNL Wellness Initiative website

by **smeranda** » Wed Jul 01, 2009 9:28 am

Since tabs are being used in the navigation bar, it would be ideal if any other tabs in the maincontent area followed a similar look. As an example, check out the modal box in the latest template (click one of the icons in the top right):
[url]
http://wdn.unl.edu[/url]

Ideally, this tab treatment will update the current tab styles used in the template as referenced by Bob above.

** Note, these are still in an early stage of refinement, and therefore may change.

by **Erin Paseka** » Thu Jul 02, 2009 4:52 pm

Seth, could you make a wiki page (or something) explaining how to implement tabs in that shared style?

Or tell us if such instructions might be coming soon, so we don't all spend a lot of time reinventing the wheel?

by **dsockrider** » Mon Jul 06, 2009 12:12 pm

Seth do you mean this link: http://wdn.unl.edu

by **smeranda** » Mon Jul 13, 2009 2:12 pm

Erin Paseka wrote:Seth, could you make a wiki page (or something) explaining how to implement tabs in that shared style?

Or tell us if such instructions might be coming soon, so we don't all spend a lot of time reinventing the wheel?

The wiki page that Bob mentioned above has this code:
http://www1.unl.edu/wdn/wiki/Tabbed_Content_Areas

by **Erin Paseka** » Mon Jul 13, 2009 4:21 pm

Seth: In the past 2-3 weeks, has that wiki page been updated, or has the template been modified to make that wiki code automatically display with your proposed-standard RSS/Weather/Events/etc. tab style?

I tried that code back when Bob mentioned it. Big improvement over me starting from scratch, but looked nothing like the RSS/Weather/etc. tabs... no way I can afford the time it would take to mod that code to look/act like your tab style... not between now & 8/17. If these things have been updated, say so & I'll try again.

by **smeranda** » Mon Jul 13, 2009 4:46 pm

No, it has not been updated.

Care to work on it?

by **mjoconnor** » Fri Jul 17, 2009 11:29 am

I have this on our current site and it works fine. However, it doesn't work in the new template - for me, anyway. It shows up as the four tab links as bullet points and then the blue area below, divided by red lines.

http://asctest3.unl.edu/dean/tabbedcontent.html

Any ideas? I did a straight copy-paste for the code elements into the page, changing only the html for the wording.

thanks, Mike

by **acoleman** » Fri Jul 17, 2009 11:42 am

I can't completely verify that this will fix it, but I think that a small error in your code is causing them to display improperly.

If you close your open

Code: Select all: <p>

tag before you insert your tabbed area div, I think it should work for you.

by **mjoconnor** » Fri Jul 17, 2009 11:48 am

I closed the <p> tag and reloaded - and now it validates! - but the tabbed system still doesn't do its thing. Good spot though.

Mike

by **acoleman** » Fri Jul 17, 2009 11:55 am

Dang! I totally thought that would fix it.

The next thing I would suggest is updating to the newest version of the templates from the WDN. I noticed that your footer on that page isn't quite updated and something in those older templates might be throwing off the display of the tabs for some reason.

I swiped the code directly from your page and pasted it into a test page on the WDN site (http://wdn.unl.edu/tab_test.shtml) and that worked, so my hopes are that a template update will solve your issue.

by **smeranda** » Fri Jul 17, 2009 2:01 pm

I believe Aaron's fix should help. There is a JS error that is causing most of the scripting to stop. Your templates are a month old, and many JS changes have been made since.

Let us know how it works after updating your templates.

Thanks!

by **smeranda** » Fri Aug 07, 2009 11:03 am

The tabs have been updated for the new template. Check out the wiki code for the implementation. It has been streamlined considerably (you only need to add the HTML, not the JS and CSS).

http://www1.unl.edu/wdn/wiki/Tabbed_Content_Areas

This is how the tabs will look:

UNL Web Developer Network

Tab system for main content area.

Tab system for main content area.

Is the tabbed content system working for everyone else?

Page still unhappy

Who is online