Marker within a state is showing it's popup only in HTML5

Hi Heroes, 

I created a custom button, a shape with a (+) marker within the states. It looks like this:

Button with Marker

When testing in a browser, it works fine. The user can click either the circle, or the marker and it all functions well(shows a layer). However, when testing in mobile environments, if the user taps the (+) marker specifically, it shows the layer AND the built-in marker popup. I know if i check 'Audio only' when using markers, it won't open the marker popup. But the problem is, when the marker is within the state of the larger circle button, the option for 'audio only' is greyed out. 

How can I prevent this popup from showing when its in a state?


BTW, the reason I added the marker in the states of the shape is to avoid excessive coding with hovers. Both the marker and the shape change colour when you hover over them, and its just a huge pain to do that when they are individual items; they flicker when you hover because the states don't always change that the same time. So, Adding the marker to the state streamlined my workflow, and made the button behave appropriately. 

Hopeful for a fix, 

8 Replies
Jackson Hamner

So you want to set your markers so that the little message box doesn't open?

I haven't tried it, but a couple of ideas:
1) set the show audio only before you put it into the state, so create the marker and set its properties, then cut and paste it into the state when its set up how you like.

2) go to your marker format and set the label fill, label border, and the text color to transparent so that the label will open but the learner wont see anything.

I hope one of those helps!

Sarah MacDonald

Okay! So! 

1) I had previously taken care of the 'audio only' option before putting the marker inside the state, so thats done. 

2) Setting the fill and stroke of the label worked! Fantastic! 

But...theres always a but. 

Now, in other instances where the marker is on its own (not coupled with other elements of a button) and is used to open a layer, the marker stays above the layer! Whats up with that?? 

Jackson Hamner

Oops I missed the part about the problem being on mobile. I cant test out mobile, so I can only offer suggestions :P

So if the marker is appearing over the layer, maybe you could hide the selected marker when the layer appears? Go to the Base Layer section of the timeline in your layer and click the little eye next to the element you want to hide. In this case you would want to hide the marker that opened the layer to begin with, since they learner wont have a reason to click it since the layer is already open. When the layer hides the marker will automatically come back.

Another option is to recreate the marker from shapes. Since you aren't using the label or the animations you could recreate it with a circle and a cross objects and they might interact better with layers on mobile?

One more thing to try might be to group the marker with an invisible object (no fill no border) and see if that stops it. If your grouped marker from earlier wasn't having this issue, grouping it with an object might solve your problem. 

I hope something here helps!