Tab system for main content area.

[dsockrider]

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?

[smeranda]

David:

Can you share a URL?

Thanks!

[dsockrider]

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

Can you provide a URL of it functioning?

[smeranda]

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.

[dsockrider]

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]

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?

[smeranda]

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!

[Erin Paseka]

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

[smeranda]

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!

[Erin Paseka]

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.

[saltybeagle]

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.