Thread

Hi everyone,

I’ve been working on finishing development of a Video page for a clients site.  For this I have 1 video template group and 3 templates within that.  Two of the templates need to have an active state css property applied to my category permalinks so you know what category you are in at all times.  The Video page currently uses 1 video channel which has 3 categories.

Btw here’s what I’m using:

EE Version 2.1.3 Build 20101220
PHP Version 5.3.6

As of now I got the active state working for one of the templates using a conditional based on the url segment.

URL: http://example.com/index.php/video/page/category/community

Code for that: See my attached file since apparently the forum removes the conditional and permalink when you post using the code tags.

class=“currentChannel” highlights the current channel link in green with css.

My next template where I need to get this working has a url that looks like this..

URL: http://example.com/index.php/video/view/dancing

So I’m not really sure how to get this one to work because the entry in this case “dancing” will always be changing so a conditional won’t work.  And if I set this conditional to apply the active state for the view template, then all my categories will be highlighted in green.

I’m sure someone has ran into something like this before.  I tried searching and couldn’t find an answer.  Let me know what you guys think.

With example.com/index.php/video/view/dancing the word “dancing” is segment_3 not segment_4 as in the image

bluedreamer

Yes you are correct, dancing is segment 3.

Sorry, I think I should have explained things better.  So the attached image is the code I used for the first URL that ends in community (aka segment 4).  This is all set up and working well.

What I’m trying to figure out now is how I can have my category navigation apply the active state when I am viewing a video for instance, “dancing” which is part of the community category.

Ok so after some further digging I found a very useful post located here:

http://ellislab.com/forums/viewthread/89951/#459710

So that is essentially what I am trying to do except use it for the categories of my videos and not the blog.

Here’s what my code currently looks like on my view template.  Keep in mind my path is getting stripped out due to this forum’s formatting.

{exp:channel:categories channel="videos" style="nested" disable="pagination|category_fields|member_data" cache="yes" refresh="720"}
<a href="http://{path=">{category_name}</a>
{/exp:channel:categories}

I’m still trying to figure out how I would set up the above code to achieve the results that xlawdog got for his category navigation.

You can query a segment to add in a class name, eg this will query the category URL title and if it’s the currently viewed category will add a class name:

Edit: sorry won’t let me post the code here! :(

Would you be able to pm the example to me or share it as an attachment?

Hi bluedreamer,

Not sure if you saw my last post, is there any way you can show me your example?

I can pm you my email address if you like.

Thanks,

-Jeff

Hi Jeff,

You could always use GWcode CatMenu, which I’ve created specifically for these kind of problems.

Check it out here:
http://gwcode.com/add-ons/gwcode-catmenu
or here:
http://devot-ee.com/add-ons/gwcode-catmenu/

It adds a “current” class to the currently active category that you provide with either the cat_id or cat_url_title parameter.

So, you could use something like this for example:

{exp:gwcode_catmenu group_id="1" cat_url_title="{segment_3}" style="simple"}
    <a href="http://{path=">{cat_name}</a>
{/exp:gwcode_catmenu}

So, if you have an url like this, where “dancing” is the name of the category:
http://domain.com/video/view/dancing

..it will show the categories from category group 1 and add a “current” class to the category called “dancing”.

If your category group has nested categories it will be more complicated, but there are a range of parameters and variables available to get the job done.

Let me know if that helps!

Cheers,
Leon

Leon,

Thanks a ton!  I’ve got some other projects I’m juggling as well as this site right now, probably won’t get a change to implement this until late next week.

When I do I’ll post back with some feedback / input.

Really appreciate the info, thanks again.

-Jeff

No problem Jeff, if you can’t get it to work let me know!

Hi Leon,

Finally have some time to revisit this.

Looking back at what you wrote, I’m still not sure if the GWcode CatMenu will work for what I’m trying to do.

In the url example from your post: http://domain.com/video/view/dancing

“dancing” is actually the name of an entry, not a category.

In my template I have a list of the categories (3 of them) and a list of entries below that in a separate div.

My goal is to have the following: User clicks on the entry “dancing” for example, and then views the entry (video technically) while the category it belongs to will have a current class applied to it.  I don’t need the current entry to have any css style applied to it.

Maybe I’m making this sound more complicated than it is.

Check out my dumbed down wireframe so you can see what I’m trying to do.

Hi Jeff,

Ah right, so segment_3 is the entry’s url_title. No problem.

You can use this:

{exp:gwcode_catmenu url_title="{segment_3}"}
    <a href="#">{cat_name}</a>
{/exp:gwcode_catmenu}

It will then create an unordered list of the categories, where the category that needs to be highlighted has an “active” class. So you should then be able to highlight it with CSS.

If you want an “active” class to be added to the hyperlink tag, that’s possible as well. You’ll then need to add this in your hyperlink:

{if "{active}" == "yes"} class="active"{/if}

Let me know if that works!

Well it did work when I click on an entry it highlights the proper category.

But now when I click on the categories from the view template, it shows there are no related entries. 

Just can’t seem to get all 3 templates to work in the way I want.  Really don’t want to give up on this but its starting to look that way *sigh*... feel like I’ve already spent too much time trying to get this to work.

Just wanted to say thanks for your help so far Leon.  I think I’ll be able to make it work I just need to step away from this for a day or two an then give it another try. 

For now I just reverted to my previous code that was working, but doesn’t have any active or current state applied to the categories.

Hi Jeff,

But now when I click on the categories from the view template, it shows there are no related entries.

Are you sure the URL’s to the categories are correct? You really should be able to get this working. If you still can’t get it to work in a couple of days, just let me know what exactly does and doesn’t work and what URL’s you’re using to call those templates.

Cheers,
Leon