how to apply class to individual result

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Donald Swofford 31 posts 101 karma points

Oct 03, 2014 @ 19:58

I have the code below which lists pages. Next to pages that have had attributes in a check box list checked there are letters listed. i.e. if the check the V and S check boxes the result will be V, S

I want to apply a border/box style around each individual letter but right now when I put the span class="extras" in it puts the border around all the results i.e. "V,S" instead of just the "V" then a "," Then the "S"

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt" 
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Examine="urn:Examine" 
    exclude-result-prefixes="msxml umbraco.library Examine ">

<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="2"/>
        <xsl:variable name="startNode" select="$currentPage/ancestor-or-self::*[@level = $level]" />
<xsl:variable name="nodesToShow" select="$startNode/*[@isDoc][not(umbracoNaviHide = 1)]" />

<xsl:template match="/">

<!-- The fun starts here -->
<xsl:if test="$nodesToShow">
    <img src="/media/1133/actheader2.png" alt="Activities in this Section" class="acttitle" />
</xsl:if>
    <ul>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
    <li>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:value-of select="@nodeName"/>
        </a>
        <span class="extras"><xsl:value-of select="activityextras"/></span>

    </li>
</xsl:for-each>
</ul>

</xsl:template>

</xsl:stylesheet>

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 12, 2014 @ 16:29

1

Hi Donald

When you select some of the items do you then make a postback, which sets a querystring? Then you should be able to make a check on the querystring value and set the desired class based on that.

Another approach could be to set the class purely by using JavaScript when clicking.

But I think it might help a bit if you could somehow show the page where this should happen so it's easier to give you some better advice on how to achieve your goal :)

Cheers, Jan

Copy Link
Donald Swofford 31 posts 101 karma points

Oct 17, 2014 @ 23:17

0

Sure thing. Below is a picture of the left column as you can see it lists a page of nodes and any node that has a V or S box checked gets those letters added to the right. I would also settle for adding icons. basically we are trying to let the visitors know what type of content is on that page without having to click it. a V lets them know that page has a video.

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 18, 2014 @ 09:03
1
Hi Donald

Ok, so I'm a bit confused now... Is the only objective to add an icon net to the list item in order to make it more clear what type of content the user can find by clicking one of the items?

Or does it also need to do something specific on click as well?

If it's a matter of setting the icons you could add a new property on the documents in Umbraco where it's possible to select the type of content. For instance you could create a dropdown datatype that could have the values "text", "image" and "video" and then put it on the document type where an editor can then select if the type should be one of the three. It could also be made like a checkbox if multiple icons are needed.

Then in your XSLT you could do a check on the property and see what value it contains and add a class attribute to the list item, which you can use to show the desired icon.

So in your XSLT it could look something like this
```
<li>
   <xsl:attribute name="class">
       <xsl:if test="yourproperty = 'video'">icon-video</xsl:if>
   </xsl:attribute>
</li>
```
Since you probably need to check on more values you might end up doing your checking using a <xsl:choose> check though, the above is just a simple example.

I hope this makes any sense.

Cheers, Jan
Copy Link
Donald Swofford 31 posts 101 karma points

Oct 20, 2014 @ 17:10

0

Yes just showing an icon would be ideal. sometimes it will be 1 icon sometimes it will be 3 icons. Could you help me get a little more specifically with this?

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 20, 2014 @ 17:27

1

Hi Donald

Ok - As I write above you'll need to be able to tag your content from the Umbraco backoffice to be able to do this.

If you have 3 categories for instance then you need a datatype as I described above where you add these values.

On each document that is displayed on your list you'll need to choose a "tag" in the Umbraco backoffice and then in your XSLT you need to add a class based on the value that has been chosen in Umbraco - On that class you can then define, which icon to show in your css.

I hope this helps at bit and makes sense.

Cheers, Jan

Copy Link
Donald Swofford 31 posts 101 karma points

Oct 20, 2014 @ 18:41

0

I think check box group would work best right now so that i dont have to worry about the users typing the tags wrong in the back end. if I want to make an image show up if they select any combination of the three boxes "V" "S" "PM" what would I put in the xslt?

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 21, 2014 @ 22:32
1
Hi Donald

If it's possible for an aritcle to have more than one icon I would probably do a check like this
```
<li>

<xsl:attribute name="class">

<xsl:if test="yourproperty = 'V'">icon-v </xsl:if>
<xsl:if test="yourproperty = 'S'">icon-s </xsl:if>
<xsl:if test="yourproperty = 'PM'">icon-pm </xsl:if>

</xsl:attribute>

</li>
```
This will add a class for each of the icons on the <li> element in this example. But you can add the class to any html element that you would like. You just need to know that you should use the xsl:attribute tag. Yourproperty should of course be the name of the alias you use to refer to your defined datatype (The checkbox list).

Then in your css you can define each class and the icon they should show.

Hope this makes sense.

Cheers, Jan
Copy Link
Donald Swofford 31 posts 101 karma points

Oct 22, 2014 @ 00:04

0

Ok im sorry jan this looks helpful but the page looks the same as before.. shouldn't i see the words icon-v and icon-s since this has both of those? but i just see the normal link. Do I need to add CSS

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 22, 2014 @ 09:06

1

Hi Donald

1: There is no offical attribute called "emptyclass". It should be named "class". This will be applied to the element in the rendered source.

2: You also need to add the attribute declaration right after the opening tag of where you want the class attribute to be applied. So change the name to class and move the declaration right after the opening
tag - Before your tag starts.

3: When you have done the above, view your html source and see if the class attribute is applied

Hope this helps.

/Jan

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Examine="urn:Examine"
    exclude-result-prefixes="msxml umbraco.library Examine ">

<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>


<xsl:variable name="level" select="2"/>
        <xsl:variable name="startNode" select="$currentPage/ancestor-or-self::*[@level = $level]" />
<xsl:variable name="nodesToShow" select="$startNode/*[@isDoc][not(umbracoNaviHide = 1)]" />

<xsl:template match="/">


<xsl:if test="$nodesToShow">
    <img src="/media/1133/actheader2.png" alt="Activities in this Section" class="acttitle" />
</xsl:if>
    <ul>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
    <li>
        <xsl:attribute name="class">
            <xsl:if test="yourproperty = 'V'">icon-v </xsl:if>
            <xsl:if test="yourproperty = 'S'">icon-s </xsl:if>
            <xsl:if test="yourproperty = 'PM'">icon-pm </xsl:if>
        </xsl:attribute>

        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:value-of select="@nodeName"/>
        </a>
    </li>
</xsl:for-each>
</ul>

</xsl:template>

</xsl:stylesheet>

<li> <xsl:attribute name="class"> <xsl:if test="contains(activityextras,'V')">icon-v</xsl:if> <xsl:if test="contains(activityextras,'S')">icon-s</xsl:if> </xsl:attribute> <a href="{umbraco.library:NiceUrl(@id)}"> <xsl:value-of select="@nodeName" /> </a> </li>