Easy maintenance of Web site tabs

This tip describes a method for 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

Dig deeper on Lotus Notes Domino Formula Language

0 comments

Oldest 

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:

-ADS BY GOOGLE

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.UK

Close