Simple Layout - Update CSS w/ JS | XM Community
Skip to main content

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?  

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>

 

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

Leave a Reply


Terms & Conditions