Tip

Easy maintenance of Web site tabs

View member feedback to this tip.

So you've got your web site ready to go, the tabs to all the site sections are all lined up and working perfectly, and then you get a call from the Web site designer or the graphics person, saying the design of the tab graphics has changed, the highlighted tab color has changed, etc. Back to the drawing board? No! Here's an easy way to set the tabs up which provides a quick and easy way to implement changes.


I am assuming two sets of tabs, one set being the tab "highlight" color, which would be used when a person is viewing or editing a document in that tab's section of the site, and the other set being a "non-highlight" color.

First, on the form or forms in your database which will display the site tabs, create a field called PageType. Make it a drop-down field which contains all the page types in the site, i.e. each of the tab names plus any other page type names your site might contain but for which there is no tab, like Contact Us, Search, Site Map, etc.

Create a subform in your database called NavTabs. On this subform, create one Computed for Display Text field for each site tab. Call them something generic like "Tab1", "Tab2", "Tab3", etc.

In each of the Tab fields, put the following code:

@If(PageType = "Research"; "[<A HREF=
"/dbname.nsf/pages/research?OpenDocument">
<IMG SRC="/dbname.nsf/res_hi.gif" 
ALT="Research" BORDER=0></A>]"; 
"[<A HREF="/dbname.nsf/pages/research?
OpenDocument"><IMG 
SRC= "/dbname.nsf/res_dk.gif" ALT="Research" BORDER=0></A>]")

Here's what's happening with this code:

You're first finding out the page type of the current document. In the example, we're finding out whether or not the current page has a page type of "Research." If so, when the Research tab is clicked, it will open the document in the database called "research," which would be the home page of the Research section of the site.

Also, if this document has a page type of "Research," the Tab field will pull in the highlight-colored version of the tab graphic for that section. If the document has a page type other than "Research," the non-highlight-colored version of the tab graphic will be pulled in.

You'd then pull this subform into the top of all the forms in your database which need to display site tabs.

Once these formulas and fields are in place, if the tab graphics change in any way, all you'll have to do is name them res_hi.gif and res_dk.gif and replace the current res_ files in the image resources with the new files. No re-coding necessary!

MEMBER FEEDBACK TO THIS TIP

Here's how to highlight the current document in an Web menu. In Web applications we often use menus that may include the current document in the list. It could be a tabbed dialog, a horizontal menu or a left menu. With a little help of CSS and @Formula you can make the display of the current site automatic.

First create a stylesheet (CSS) like the following (in R6 you can attach it into a stylesheet resource; in R5 you create a page that is marked as "Treat as HTML").

menu { background-color: #9999FF
float: left
position: relative
width: 150px
font-size: x-small
}

menu li { border-bottom: 1px 
solid #999999
margin: 0
}

menu li a { background-color: #6666FF
border-left: 10px solid #9999FF
color: #FFFFFF
display: block
padding: 5px 5px 5px 0.5em
text-decoration: none
width: 100%
}

menu li a.current 
{ background-color: #6666FF
border-left: 10px solid #000066
border-right: 10px solid #000066
color: #FFFFFF
display: block
font-weight: bold
padding: 2px 5px 5px 0.5em
text-decoration: none
width: 100%
} // Prevent the current selection
 to be highlighted

menu li a.current:hover 
{ background-color: #6666FF

border-left: 10px solid #000066
color: #FFFFFF

}

menu li a:hover { background-color: 
#BBBBFF
border-left: 10px solid #FF0000
color: #000000
}

menu p { background-color: #6666FF
border-top: 2px solid #FFFFFF
margin-left: 0px
margin-right: 0px
margin-top: 0px
margin-bottom: 2px
padding: 2px
white-space: nowrap
}

menu ul { border: none
list-style: none
margin: 0
padding: 0
}
Include the CSS in your form (in R6 by right clicking, in R5 by adding a formula in the HTMLHead field). Then create one computed for Display field surrounded by pass-through HTML.
 
[dMenuLookup] 
dMenuLookup has the following formula: 
REM "The next variable contains a 
URL that points to the currently open document"
tmpcurrent := " href=\""+dcurURL+"\""
tmpkey := "...here goes your lookup
 key depending on your application ...."
tmpError := "Sorry "+tmpkey+" not found in "+tmpview
tmpLook := @DbLookup("Notes":"NoCache"
""
"LookupMenu"
tmpkey;4)
tmpResult := @If(@IsError(tmpLook)
tmpError+": "+@Text(tmpLook)
tmpLook)
REM "Now asseble the whole menu"
tmpMenuCandidate := " 
Menu here
"+@NewLine+"
      "+ @Implode(tmpResult;" 
      ")+ "
"
@If(@IsError(tmpMenuCandidate)
@Text(tmpMenuCandidate)
@ReplaceSubstring(tmpMenuCandidate
tmpcurrent
" class=\"current\""+tmpcurrent))

-- Stephan W.


Do you have comments of your own? Let us know.

This was first published in May 2003

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.