Tab system for main content area.

Notes on the visual redesign process

Tab system for main content area.

Postby 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/
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby 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
____


Robert J Crisler
Manager, Internet and Interactive Media
University Communications
321 Canfield Administration Building
University of Nebraska-Lincoln
402-472-9878
rcrisler1
Site Admin
 
Posts: 153
Joined: Wed May 12, 2004 12:20 pm
Location: Lincoln

Postby 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
acoleman
 
Posts: 48
Joined: Tue Sep 20, 2005 2:54 pm
Location: 321 Canfield

Postby 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.
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby 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?
Erin Paseka
 
Posts: 147
Joined: Tue Jul 13, 2004 3:02 pm
Location: Graduate Studies

Postby dsockrider » Mon Jul 06, 2009 12:12 pm

Seth do you mean this link: http://wdn.unl.edu
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby 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
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby 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.
Erin Paseka
 
Posts: 147
Joined: Tue Jul 13, 2004 3:02 pm
Location: Graduate Studies

Postby smeranda » Mon Jul 13, 2009 4:46 pm

No, it has not been updated.

Care to work on it? :)
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Is the tabbed content system working for everyone else?

Postby 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
mjoconnor
 
Posts: 16
Joined: Fri May 16, 2008 11:56 am

Postby 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.
acoleman
 
Posts: 48
Joined: Tue Sep 20, 2005 2:54 pm
Location: 321 Canfield

Page still unhappy

Postby 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
mjoconnor
 
Posts: 16
Joined: Fri May 16, 2008 11:56 am

Postby acoleman » Fri Jul 17, 2009 11:55 am

Dang! I totally thought that would fix it. :D

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.
acoleman
 
Posts: 48
Joined: Tue Sep 20, 2005 2:54 pm
Location: 321 Canfield

Postby 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!
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby 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:

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Next

Return to Visual Redesign

Who is online

Users browsing this forum: Yahoo [Bot] and 0 guests

cron