Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Highlight Category Nav on detail page, better ways?

September 21, 2007 7:31pm

Subscribe [3]

#1 / Sep 21, 2007 7:31pm
asozzi
262 posts
I fought a battle with EE on highlighting category based Navigation when on a single weblog:entry page. I got a solution working and would like to know if anyone has a better solution or comments. See attached image:
Problem:
The problem arises when I want to highlight the left hand dynamic navigation (list of weblog categories) on single a weblog:entry (article) page. Since any entry may belong to several categories there is no standard way.

Solution (elaborate):
- Get the category(ies) of the current entry (passed as an embed variable in my case) using something like:
```
current_cat="{exp:weblog:entries weblog="hazmat" limit="1" status="not home" disable="trackbacks|member_data|pagination"}{categories backspace='1'}{category_id},{/categories}{/exp:weblog:entries}"
```
Then pass the string to javascript. The javascript will search for document.referrer (the last clicked link) for a category ( e.g. ...com/blah/etc/C127) and compare it with the current category. If it matches any of the categories it highlights that link. If not it will highlight the first category in current_cat.
```
{if "{embed:current_cat}"!=""}
{jQuery}
    
    var current_cat="{embed:current_cat}";
    $(document).ready(function(){
    /*** Highlight menus when ***/
    if(document.referrer.match(/\/C(\d+)\//)) {
        matching=current_cat.match(RegExp.$1)[0]
            $('.C'+matching).addClass('active')
    } else {
            singCat=parseInt(current_cat);
            $('.C'+singCat).addClass('active');
    }
    });
    
{jscripts}
    {/if}
```
The actual highlighting is done by adding the class “active” to the matched link using jQuery (it is a bit more elaborate if not using jQuery but not much).

Is there a more EE compatible way of doing this?
#2 / Sep 23, 2007 7:08pm

grantmx
1439 posts

There may be another way, but EE is so flexible, you don’t need another way; Especially if it works well.
#3 / Oct 10, 2007 12:30pm

[/root.]
29 posts

Can you post the content of {jscripts} and {jquery}? Thanks.
#4 / Oct 10, 2007 12:54pm

grantmx
1439 posts

You can download jquery here http://jquery.com/.

Not sure about jscripts.
#5 / Oct 10, 2007 1:11pm
asozzi
262 posts
Hi /root

I assume you are looking for a more detailed explanation:

1) I am using Categories as ID’s like C32 etc not names. That is doable I’m sure but I didn’t look into it.

2)I’m listing the categories in a nested list with id #navList. Important: each category gets it’s category ID as a class name! (e.g C102)
```
{exp:weblog:categories style="nested" weblog="{embed:channel}" show_empty="yes" dynamic="off" id="navList"}
                    <a href="http://{path=" class="C{category_id}">{category_name}</a>
               {/exp:weblog:categories}
```
as you can see I use embedded variables a lot, but you get the idea.

3)The details template (showing individual weblog entries) starts with this header:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
       <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
       <title>Mydomain: {embed:page_title}</title>
       {stylesheets}

    {if "{embed:current_cat}"!=""}
{jQuery}
    
    var current_cat="{embed:current_cat}";
    $(document).ready(function(){
    /*** Highlight menus when ***/
    if(document.referrer.match(/\/C(\d+)\//)) {
        matching=current_cat.match(RegExp.$1)[0]
            $('.C'+matching).addClass('active')
    } else {
            singCat=parseInt(current_cat);
            $('.C'+singCat).addClass('active');
    }
    });
    
{jscripts}
    {if:else}
{jQuery}
{jscripts}
    {/if}
{metatags}
```
Where:
{embed:current_cat} is a coma separated list of category ID’s of the current entry:
```
current_cat="{exp:weblog:entries weblog="hazmat" limit="1" status="not home" disable="trackbacks|member_data|pagination"}{categories backspace='1'}{category_id},{/categories}{/exp:weblog:entries}"
```
{jQuery}: just calls…jQuery like so:
```
<code>[script type="text/javascript" src="/lib/jquery-1.2.1.pack.js">[removed]
```
replace the [ with < script tag won’t show here otherwise.
(you can download jQuery at www.jquery.com)

{scripts}: calls my other scripts which have nothing to do with this solution.

The highlight menu script does the following:
1) Check the last clicked link URL (referrer) for a category like e.g. “C102”. The regExp will find it anywhere in the URL and save the ID only (e.g. 102) in the variable “RegExp.$1”.

2)If found in referrer, find a match in the coma separated list passed from EE in “current_cat”. If match found, use jQuery to find the list item using it class name (e.g C102) and add class “active”.

3) IF no referrer URL just take “current_cat” list, parse first number in list and use that to highlight the category list.

4) You need to set the CSS accordingly. i.e. #navList.active {etc…..}

Hope that helps
#6 / Oct 12, 2007 8:12am

[/root.]
29 posts

Thanks for your time and solution. But this method is too complicated for me. Sure it is doable but i suppose there must be more elegant solution. Did you found some other variants?
#7 / Oct 12, 2007 12:39pm

asozzi
262 posts

Hi /root.

The solution is not complicated per-se, it should only take a few minutes to implement and it will always work, the explanation was just thorough. If you mean is there a more EE “compliant” method, the answer is not that I know of.
I guess you could do the same thing I did in PHP and keep it all server based, instead of using client side scripting….but I just don’t know much PHP (guess it would be a good little project to learn PHP for).

Please also put in your vote for an update of the category nested list tag in this thread to add a bit of weight.