How to implement conditional screen background colors based on user selection in a previous screen?

[Mark5731404]

Hi,

I have a screen where a user makes a selection of one of many (10+) options. Given their selection, I want the next screen loaded to have a background color that is dependent on the user selection from the previous screen. Is there a way to do this? Basically, I need some sort of conditional CSS (I think).

I found the following which looks like it is on the right kind of track for what I want, but I think it only is set up to work within a sheet, not across sheets.

http://inspectelement.com/tutorials/c...

How would such code work in Tiggzi?

I would like to learn of a solution to this problem as I think it is preferable (good coding!) to create one 'dynamic' sheet rather than creating 10+ sheets and conditionally loading them based on the user selection.

Thanks in advance for your help!

[Maryna Brodina]

Hello! Sorry for delay. You can change the color using JS. You would need to save to localStorage selected value. You can do that while navigating to another screen. For example on button click you can add the following JS:
codelocalStorage.setItem("selectedItem", Tiggzi("mobileselectmenuName").val());/code
where mobileselectmenuName - Selct name

This event should be after the Click event.

On page show event change background using saved value with the following code:

codevar selectedItem = localStorage.getItem("selectedItem");
var backgroundColor;
switch (selectedItem) {
case "item1Value":
backgroundColor = "#f0f0ff&quot
break;
case "item2Value":
backgroundColor = "#11ff22&quot
break;
//all other cases.....................
default:
backgroundColor = "#aaaa00&quot
}
Tiggzi("mobilecontainerName").css("background-color", backgroundColor);/code

mobilecontainerName- container name
item1Value, item2Value - Select values

[Mark5731404]

Thanks Marina, however after implementing this code only the default background color is being shown in the Test preview. Does the Test preview work with localStorage variables (as we are not testing on a real phone)? If yes then I will need to check over my code again. If not, then I would have solved this problem a while ago as I had already tried implementing localStorage variables!

Thanks for your assistance thus far.

[Maryna Brodina]

Yes, the Test preview works with localStorage variables. Could you please share your app with a href="mailto:support@tiggzi.com" rel="nofollow"support@tiggzi.com/a so we can take a look?

[Mark5731404]

Thanks Marina - I have shared the app. The issue is to click a grid cell in Screen1 and have it set as the background in Screen2. The yucky brown that shows is the default background color.

[Mark5731404]

I mean yucky yellow! Can you please email me directly with your advice rather than post here. Thanks!

[Kateryna Grynko]

Hi Mark,

Answered directly, copied my answer here for anybody who would need it.

To get name of the cell user clicked you should use the following JavaScript code:
codevar cellName = $(event.target).attr('name');
localStorage.setItem("selectedColor", cellName);/code

[Mark5731404]

Thanks, it works...amazing support!

Cheers.