Tab system for main content area.

Notes on the visual redesign process

What's wrong

Postby dsockrider » Mon Aug 10, 2009 1:29 pm

I opened a new template file, pasted in the code exactly how you have it displayed, uploaded ....and it doesn't show any graphics nor does it function. What am I missing?
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby smeranda » Mon Aug 10, 2009 1:45 pm

David:

Can you share a URL?

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

Under Development

Postby dsockrider » Mon Aug 10, 2009 2:51 pm

Sorry No, My testing server only allows 4 IP addresses to view it....

Can you provide a URL of it functioning?
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby smeranda » Mon Aug 10, 2009 3:53 pm

I have it working on my machine:
http://ucommmeranda.unl.edu/workspace/U ... ebug.shtml

This is my laptop, so if it is unplugged, you won't be able to access until I hook back up.

Many of these files have changed recently, so as part of the debugging I would suggest making sure you are using the latest template files.
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

yeaaaa

Postby dsockrider » Mon Aug 10, 2009 5:08 pm

Yea, your page won't load. Maybe I'll catch you plugged in sometime.

I downloaded all new files and started over so everything is current as of today.
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Here it is

Postby dsockrider » Wed Aug 12, 2009 11:23 am

Here's the page with non working tabs: http://engineering.unl.edu/2009/

Any idea why it doesn't work when pasted in as you've indicated?
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby smeranda » Wed Aug 12, 2009 2:19 pm

It doesn't look like anything is working on that page...

You have outdated template dependents in the /wdn directory. You need to update these files to the latest version, which load the tabs.js and css files needed.

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 Erin Paseka » Fri Sep 11, 2009 3:41 pm

I'm liking these tabs--very easy to use, and with some extra JS I even got them to work in my "tabs all going to different pages" places.

Request: Can we get a code tweak to support slightly longer text in the final tab?

Whenever the rightmost tab has label text more than roughly 130px wide, it has a gap in the background graphic when selected. It displays fine when not selected, or with shorter text, or in any other tab position. Surprisingly, I'm seeing the gap in Firefox 3.5.3 and Safari 4.0.3 but it's displaying just fine (no gap) in IE 7. (All on a Vista PC.)

Examples: http://www.unl.edu/gradstudies/beta2009 ... html#tabA3
Erin Paseka
 
Posts: 147
Joined: Tue Jul 13, 2004 3:02 pm
Location: Graduate Studies

Postby smeranda » Fri Sep 11, 2009 4:20 pm

Erin:

Thanks for noticing that. I have committed an longer version, it should be available in the morning.

What JS changes did you add for "tabs all going to different pages"? Is that something that others could benefit from?

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 Erin Paseka » Mon Sep 14, 2009 9:58 am

Thanks for the quick fix!


As for my "all to different pages" usage of tabs, it might be of use to others. There are basically 3 parts:

1. Create a tabs.html file containing only the tab links, using 2 WDN classes and an ID, like this:
Code: Select all
<ul id="gsTabsWDN" class="wdn_tabs disableSwitching">
<li><a href="index.shtml">Intro</a></li>
<li><a href="degrees.shtml">Degree Equivalency</a></li>
<li><a href="deadlines.shtml">Deadlines</a></li>
<li><a href="finances.shtml">Finances</a></li>
<li><a href="english.shtml">English Proficiency</a></li>
<li><a href="immigration.shtml">Immigration</a></li>
<li><a href="usa.shtml">Arriving in the US</a></li>
</ul>


2. In each .shtml file on which the tabs should display, paste this at the top of the maincontentarea:
Code: Select all
<!--#include virtual="tabs.html" -->


3. Put this JS in the sharedcode footer to look for that UL's ID and select the appropriate tab:
Code: Select all
// Usage:  <ul id="gsTabsWDN" class="wdn_tabs disableSwitching"><li><a href="foo.shtml">Foo</a></li></ul>
// Tab anchors must use "index.shtml" instead of "./" because WDN's components will trigger errors referencing "#./".
if (document.getElementById('gsTabsWDN')) {
   var url = window.location.href;  // IE returns relative URL as in html, Moz/FF/Saf/Opera return full/absolute URL.
   if (url.substr(url.length-4)!="html") url="index.shtml"; // Can't use url.substr(-4) because IE returns the entire string.
   var lis = document.getElementById('gsTabsWDN').getElementsByTagName('li');
   for (i=0; i<lis.length; i++) {
      anch = lis[i].getElementsByTagName('a')[0];
      anch.innerHTML="<span>"+anch.innerHTML+"</span>";
      href = anch.getAttribute("href");  // IE returns full/absolute URL, Moz/FF/Saf/Opera return relative URL as in html.
      lis[i].className = (url.indexOf(href)>-1 || href.indexOf(url)>-1) ? "selected" : "";
   }
}


It has limitations, like assuming that the index is a .shtml (my workaround compromise when href="./" conflicted with something in WDN's coding), and I made it put in span tags so I wouldn't have to manually add them to my pre-existing submenu/tab files, which may not be useful for anybody else. But it seems to work across browsers, despite the best efforts of IE's developers.
Erin Paseka
 
Posts: 147
Joined: Tue Jul 13, 2004 3:02 pm
Location: Graduate Studies

Postby saltybeagle » Thu Sep 17, 2009 12:09 pm

How about using the rel attribute to indicate the index <a rel="index" href=blah"></a>, or directly matching the url. The WDN tab js could be modified to match the url and automatically select that tab as well... might be something to look into.
Brett Bieber
Image
saltybeagle
 
Posts: 376
Joined: Fri Jan 16, 2004 3:10 pm
Location: 321 Admin

Previous

Return to Visual Redesign

Who is online

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

cron