[SOLVED]Problem with alternating row colour in navigation Topic is solved

[ballantyne]

I am using the smarty cycle tag to make alternating row colours in my vertical navigation. When I'm browsing the parent page, the alternating colours start at the first child page. When I browse a child page, the parent page now becomes the first row and takes the first colour. So the bottom row is either colour 1 or 2 depending on which page I'm browsing. This looks a bit lame. How can I fix it, please?


The css looks like this

div#menu_vert li.odd {
   background:#99CCFF;
}
div#menu_vert li.even {
   background:#FFFFFF;
}
...snip

div#menu_vert li a.activeparent {
   background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
   background-color: #99CCFF;
   color: #FFFFFF;
   font-weight:bold;
   font-size:110%;
}

div#menu_vert ul ul li a.activeparent {
   background-position: 1.5em center;
   background-color: transparent;
   color: #18507C;
}
..snip

and the .tpl is like this

{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}


...snip

Jonathan

[nivekiam]

Don't know what to say, it works fine for me.  Can you post a link to the page you are having a problem with?

[ballantyne]

http://rbo.level-five.com - try clicking on a child page and watch how the nav colours change

[nivekiam]

Oh, I see.  Well it's doing exactly what you tell it

RBO Home is always the activeparent

Example, Tuggerah is the "currentpage"

It cycles through doing even (erina-fair), odd (mann-st-gosford), even (lakehaven), odd (mthutton).  Now the cycle skips because of the current page Tuggerah, now back to the cycle, even (charlestown), odd, etc

It doesn't count the current page as part of the cycle, you need to change your logic in your menu template.  I can help out here a little bit as I've dissected the menu to see what it's doing on my own site, but I don't have the time tonight.

Perhaps this untested change:

Your original code:

{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

My untested change, yanking out the setting for Current Page:

{if $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

or maybe this, equally untested code

{if $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
current == true} " currentpage"{/if}[/b][/color]">url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

Gotta go for now, so much to do, so little time.

[ballantyne]

Thanks for your help - you've certainly pointed me at the right place to solve this problem. The solution in words is simple: there is a third class of line called "currentpage" that is not in the odd,even cycle, so all I need to do is make the cycle function's counter advance by one when the currentpage condition is true, as it does in the else condition. There is a parameter for this in the smarty tag, but I don't know how to code this into this particular template. I can write procedural php, so I guess I could write my own tag? Whadyreckin?
Jonathan

[ballantyne]

In the navigation tpl the cycle tag is used to generate the line class, like so (see red bit):

{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

Is it possible to simply call the cycle tag in the currentpage condition, so that the cycle counter increments in that condition as well,  without using it to generate the line class, like so:

{cycle values="even,odd"}Current page is {$node->hierarchy}: {$node->menutext}

?I guess my question is really about the syntax of tags.
Jonathan

[nivekiam]

ok.  I dug into it more.  Looks like you are using the simple_navigation template as a basis.

Do this, similar to what I posted before, but tested.  Add the code that bolded in red

{if $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
current == true} currentpage{/if}[/b][/color]">url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{/if}

Now, you just need to define some CSS for the currentpage class

Example:

Code: Select all

div#menu_vert li.currentpage a {color: red; font-size: 2em;}

This way you can define different looking text for the current page and the background still alternates.  This is just one simple example.  I think you can get really complex if you want.

You can make your smarty code more readable and eliminate white space in the generated HTML by using the {strip} tag.  Lookup it's usage at www.smarty.net

[ballantyne]

It actually turns out this is the solution in red:

{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}



{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

{/if}


And I am afraid I have no idea why it works.
Jonathan