Fog Creek Software
Discussion Board

Knowledge Base
Terry's Tips
Darren's Tips

Highlight current selection in navigation

I want to highlight the current selection in a set of navigation links; for example, in the News section, then the News link would have a tag:

<span class = "navlinkcurrent">News</span>

and the other links in the nav would have a tag like this:

<a href= "products" class ="navlink">Products</a>.

I also want this to be the case if I am looking at a news story rather than the news index page. I'm planning to keep the stories in a news_stories folder, so they would be one level down, but I still want the nav to dynamically highlight the News choice, and perhaps in that case, also be a link so the visitor could use it to return to the News Index page.

Thanks for any suggestions.


Friday, May 30, 2003

Chas - This is a feature I've wanted for a while...

I haven't played with it yet, but I suspect that you may be able to do it with next | previous.

Joel said you could do a number of next | previous links, so if you had a total of 10 links, then why couldn't something like this work:

{$ previousLink 9 var in (condition) sort $}
<span class="nav">{$var.headline$}</span>
{$ end $}

<span class="current">{$.headline$}</span>

{$ nextLink 9 var in (condition) sort $}
<span class="nav">{$var.headline$}</span>
{$ end $}

but I haven't gotten next | previous to work like I want and haven't had the time to play with it.

If you get it to work, please report back & post the code.
Friday, May 30, 2003

I think I did what you are trying to do.

Here is my template (with some of it cut out)


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>{$.sitename$}: {$.headline$}</title>
<link href="PTMFOG0000000097.css" type="text/css" rel="stylesheet" media="screen">
<link href="PTMFOG0000000121.css" type="text/css" rel="stylesheet" media="print">

<style type="text/css">
ul#leftMenu li#{$.extra1$} a{
    background-color: #E8B85D;
    border: 2px green dotted;
<div id="banner"> banner stuff here!!!</div>

<ul id="leftMenu">
{$ foreach x in (folder "/")$}
<li id="{$x.filename$}"><A href="{$$}">{$x.headline$}</A>{$next$}</li>

<div id="Content">
<h2>{$.headline $}</h2>
<div id="footer">

I use a ul to build my menu.  You can look at the css on the site if you like to see how its styled:

There is an article for each menu item in the / directory.  For sublevel content, I created a directory with the same name as the file in the / but with f prepended  (Ordering implies a menu called fOrdering, etc.)

In my "Ordering" article, and in each article in the fOrdering folder I fill $extra1$ with the name of the article (Ordering)

On the Ordering page I have links to all my fOrdering folder articles.  Now, whenever I click this group, the style snippet contained in the template alters my css to produce the highlighting!

I was going to write an article about this.  Its easier than I am making it sound!

Joel Goldstick
Monday, June 9, 2003

Looks good. Too bad you have to maintain an {$extra1$} to do it.
Tuesday, June 10, 2003

If you have only a single level of menus, you can id off the filename.  But if you want other articles to key the highlighting, the extra field seemed the easiest way to me at the time.

Maybe using the new {$include $} script in the template to pick up the snippet from a file which is good for everything in the folder.  Then user's could add articles and not have to mess with the extra field

Joel Goldstick
Tuesday, June 10, 2003

What I think JG is suggesting, and what I have also arrived at, is:


<style type="text/css">
{$ foreach x in (thisArticle) $}
font-style: italic;
{$ next $}


{$foreach x in (folder "/") $}
<A class="toplink_{$x.filename$}" href="{$$}">{$x.headline$}</A>


Using a prefix protects you against funny filenames. However, filenames with spaces will get you.

What I really need from cityscript, to avoid this hacking, is the ability to say:

foreach x in (....)
foreach y in (and(is x)(thisArticle))
    SPECIAL DISPLAY of y.headline
foreach y in (and(is x)(not(thisArticle)))
    normal display of y.headline

Tuesday, July 1, 2003

I think the problem is with CityDesk using a crippled language set. My experience has been that if you produce a crippled scripting language for your product you will eventually run into users who demand more.

Today is my first day with CityDesk and I've already felt sorely the lack of an equality testing operator. It leaves a bad taste in the mouth. Do I really want to use CityDesk on a large project? I'm beginning to have my doubts!

I know I haven't become totally familiar with the product, if the feature I seek is available in CityScript, please holler, and I'll eat my words!

I want to be able to say:
{$ foreach x in (all) $}
{$ if x in (thisArticle) $}
<!-- foo-->
{$ orelse $}
<!-- bar -->
{$ endif $}
{$ next $}

I realize that {$orelse$} is a kludge, but Joel used {$else$} already, an even greater kludge. Principle of least surprise anyone?

Srini Ramakrishnan
Monday, February 23, 2004

*  Recent Topics

*  Fog Creek Home