Applying class to selected asset in asset listing

Squiz Matrix Support
1

Hi


I'm wanting to apply a class to an individually selected asset within its asset listing.



Using an ordered list, I have applied CSS to an asset listing to make the listing tabbed navigation displaying standard pages.



Within the standard page type format I have this HTML



<LI><A href=%asset_url%><SPAN>%asset_name%</SPAN></A></LI>



I need to apply <LI class="current"> to the selected page and I'm not sure how to do this.



Can any help please?



Thanks very much

Sam Morritt

2

[quote]
Hi



I'm wanting to apply a class to an individually selected asset within its asset listing.



Using an ordered list, I have applied CSS to an asset listing to make the listing tabbed navigation displaying standard pages.



Within the standard page type format I have this HTML



<LI><A href=%asset_url%><SPAN>%asset_name%</SPAN></A></LI>



I need to apply <LI class="current"> to the selected page and I'm not sure how to do this.



Can any help please?



Thanks very much

Sam Morritt

[/quote]

Hi Sam,



I have something like that for



parse file:

It's looks like this:

http://mrp.wup-katowice.pl (bottom menu, check in header.css for style)



Maybe this will help.



Regards

Arek

3

Hi Arek


Thanks very much for this. I shall give this a go.



Cheers

Sam


[quote]

Hi Sam,



I have something like that for



parse file:

It's looks like this:

http://mrp.wup-katowice.pl (bottom menu, check in header.css for style)



Maybe this will help.



Regards

Arek

[/quote]

4

[quote]
Hi Arek



Thanks very much for this. I shall give this a go.



Cheers

Sam

[/quote]



What Arek posted was only for a parse file, not for an asset listing.



Are you wanting to add the selected class to the current page listed in the asset listing, or just a specific page in the asset listing?

5

Hi
I wanted to add a selected class to the current page listed in the asset listing.



Following is an example of a page



http://www.dca.wa.gov.au/funding/grants/all_applicants_and_art_forms/development/about



In this instance I want the "about" tab to remain highlighted as the current page.



thanks for your help


[quote]

What Arek posted was only for a parse file, not for an asset listing.



Are you wanting to add the selected class to the current page listed in the asset listing, or just a specific page in the asset listing?

[/quote]

6

[quote]
Hi

I wanted to add a selected class to the current page listed in the asset listing.



Following is an example of a page



http://www.dca.wa.gov.au/funding/grants/all_applicants_and_art_forms/development/about



In this instance I want the "about" tab to remain highlighted as the current page.



thanks for your help

[/quote]



I can't think of a way to do this in Matrix. But, you could easily do this with javascript and just compare the current URL with the URL of the <a> element.

7

I was trying to avoid using javascript if possible.
Thanks anyway.


[quote]

I can't think of a way to do this in Matrix. But, you could easily do this with javascript and just compare the current URL with the URL of the <a> element.

[/quote]

8

As long as you don't have too many pages otherwise your CSS will be hideous


You can either in the parse file add:

<body class="%asset_name%">



or the containing UL within the asset, not in the nested asset listing

<UL class="%asset_name%">



then in the asset listing

<LI class="%asset_name%"><A href=%asset_url%>%asset_name%</A></LI>



is the CSS

.asset_name .asset_name, .asset_name1 .asset_name1, .asset_name2 .asset_name2 … { style goes here }



could use %asset_id% or another unique identifier



I would, if possible make use of the menu options within the design file aka the parse file option suggested by Arek, much cleaner, simpler and you don't need to update your CSS every time you add a page to the site.

9

%asset_href% looks like it would make sense in this context, so your CSS could be:

    
    
    body.about li.about { font-weight: bold; }
    body.Assessment_Criteria li.Assessment_Criteria { font-weight: bold; }
    /* ... */




%asset_name% or %asset_short_name% would also be good choices.



For complete control, create/apply a metadata schema and field, then use this in your CSS/HTML. Eg. %globals_asset_metadata_bodyclass%



<shameless_plug>I talk about internal metadata schemas and body classes in my Matrix Secrets book.</shameless_plug>