Folder names being used as IDs in CSS

(Ryan Archer) #1

I have a bit of a dilemna,

 

I am creating my menu using the mysource matrix code in the design file. I want to assign a unique ID to each top level list element so I am using the following piece of code:

<li class="isFolder" id="<MySource_PRINT var='asset_name' />"><a href="<MySource_PRINT var='asset_link' />" title="<MySource_PRINT var='asset_name' />"><MySource_PRINT var='asset_short_name' /></a>

The issue is that it is quite common for the folders that the li pulls the name data from are named/titled with more than one word, and in css this just won't work because of the inheritance principle. Is there another way to give a Squiz Matrix an alternate name where i can insert dashes/underscores to close up the spaces but still use the 'common name' for presentation at the front end of the website?

 

I.e. just like standard pages can have A Page Name and a Page Short Name

 

The reason I want to assign unique ID's to the elements is that I have a Javascript file that will perform some algorithms to target the specific IDs if certain conditions are met.

(Nick Papadatos) #2

Maybe try this id="<MySource_PRINT var='asset_assetid' />">

(Ryan Archer) #3

Thanks for the suggestion Nick,

 

 

Lol I just figured it out using this keyword modifier:

 

%asset_name^underscore& 

 

So I inserted it like thus

 id="<MySource_PRINT var='asset_name^underscore' />">

Exactly what I needed. Thank god for keywords and keyword modifiers - seem to get me out of tight corners....

(Tim Davison) #4

A better modifier might be css_safe, it may catch some of the edge cases better.  From the manuals:

 

Returns a keyword string that is suitable for use as an HTML class or ID, which in turn can then be used as a CSS selector.
Example: %asset_name^css_safe%
Effect: 'Welcome to Squiz Matrix!' > 'Welcome_to_Squiz_Matrix'

 

And yes, it's amazing what you can get modifiers to do - and sometimes heartbreaking when they can't do the little things (especially when it *is* available but only in a version later than yours).

(Ryan Archer) #5

Ok, that works too!

I did not see that keyword modifier before, yes it does make better sense to use it.