Simple Layout - Update CSS w/ JS | XM Community
Solved

Simple Layout - Update CSS w/ JS

  • 8 April 2024
  • 2 replies
  • 81 views
G
Rank
Userlevel 1
Badge +3

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?  

icon

Best answer by Tom_1842 8 April 2024, 23:06

View original

2 replies

Tom_1842
Rank
Userlevel 7
Badge +27

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
Rank
Userlevel 1
Badge +3

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

Leave a Reply


Terms & Conditions