Simple Layout - Update CSS w/ JS | XM Community
Skip to main content
Michael_Cooksey
Administrator
10 days ago
Solved

Simple Layout - Update CSS w/ JS

G
QPN Level 2 ●●
Forum|alt.badge.img+4

I have an unusual situation where I need to control the Look & Feel of different brands in a single survey. We are locked into the “Simple Layout” and I have most of the JS working with the exception of a few selectors giving me trouble. 

The various brands are getting passed in by a web query so it’s all controlled by the JS in the Header. 

Here’s one example - Matrix Column Bottom Border Color


jQuery(".matrix .matrix-table .matrix-scale-points-item.hover").css({
    "border-bottom-color" : "#5e5e5e"
});

Unfortunately, I cannot seem to figure out how to update the color for the mouseover/hover/focused effect. Any ideas?  

Best answer by Tom_1842

Something that's worked for me before is to use Branching at the top of the Survey Flow to set Embedded Data fields with CSS values. Then in the Header, the CSS values are piped into CSS properties via a Style tag. So if the Survey Flow was set up like the below and “Brand” was included in a Query string from the URL:

 

And in the Header:

<style>
.matrix .matrix-table .matrix-scale-points-item.hover {
border-bottom-color: ${e://Field/Color1};
}
</style>

 

View original

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • April 8, 2024

Something that's worked for me before is to use Branching at the top of the Survey Flow to set Embedded Data fields with CSS values. Then in the Header, the CSS values are piped into CSS properties via a Style tag. So if the Survey Flow was set up like the below and “Brand” was included in a Query string from the URL:

 

And in the Header:

<style>
.matrix .matrix-table .matrix-scale-points-item.hover {
border-bottom-color: ${e://Field/Color1};
}
</style>

 

G
1 person likes this
  • G
    GreyGhost
G
QPN Level 2 ●●
Forum|alt.badge.img+4
  • GreyGhost
  • Author
  • QPN Level 2 ●●
  • 5 replies
  • April 8, 2024

Very interesting! I’d have to strip out the JS, but that might be a lot easier...

Leave a Reply


Terms & Conditions