Forum Discussion
Did an update at some point break my DIY tabs?
I swear this used to work sweet and everyone loved it now it being funky. I've been having to use rise for a bit and this is my first go back on sl in a while. Anyway.
So I do this diy tab thing with a main content box and then number boxes to change it, easy peasy.
2 custom states OVER and ON. basically hover and selected but I don't want them auto.
The triggers it uses are;
<change 1 to over when user hovers over 1 IF 1 IS NOT ON, set content to 1 when user clicks 1 and when content is 1 change 1 to ON and when any other number box is ON set 1 to NORMAL repeated as needed>
Hopefully that makes sense and it's all working except for the hover behaviour, its just going back to normal regardless. It works better if I turn off restore previous state but then it stays as over.
Are my triggers wrong? Do I need to add an ELSE? Should I turn off auto restore and just put a 99% transparent box behind it to trigger the change instead when user hovers over that? Should I just ditch the over step? (I like clickable things to let you know they're clickable before you click though, OVER also has a 10ms fade in/out because it looks better)
See the behaviour here and the relevant triggers/states below.
solo page sl file version attached
https://360.articulate.com/review/content/bb66506d-ac4a-4e3c-992f-ae476a042d36/review
triggers for number box to go over and change content box
triggers for setting number boxes to on based on content box
triggers for returning number boxes to normal when a different number is clicked
number box states
content box states (w/o content)
Help me articulate forum, you're my only hope.
5 Replies
- ThierryEMMANUELCommunity Member
Hello brucefrench . Let me summarize your problem to make sure I understand correctly: when you select (for example) tab2, you want it to remain selected (dark green) and not be changed by hovering the mouse over it (very light green) until you select another tab (1 or 3 or...). Only unselected and unopened tabs can be affected by hovering.
(I have the impression that jaybeecnc has not resolved this issue...)
If that's the case, OK.
I don't think you can solve the problem with just your tab states because, as far as I can tell, the normal state always returns after the hover state. To be confirmed by the Articulate staff.
So, I suggest a workaround and I'm SIMPLIFYING. There are so many triggers...
Look at the second slide of your .story file that I'm sending you back.
First, I use the built-in states for your tabs: Normal (green), Selected (dark green), and Hover (very light green with dark green text), which is simpler. You can add animations (fade in and fade out for example) to the states: I did this on the Hover state of tab1.
When I click on tab 1, your white box displays the associated content (1) AND a copy of the Selected state of tab1 on top of tab1. This way, even if tab1 below is affected by the mouse hover, it is no longer visible.
The same applies when the box displays its content (2) AND a copy of the Selected state from tab2 above tab2. And so on.
And there you have it. I deleted about 25 triggers, I think. In the end, I'll only have 7. And it works as you want it to.
In the demo, I only did the first 3 tabs. Copy and paste tab3 into tab 4. Add a state 4 to your box. Adjust the content. The triggers will automatically duplicate. Adjust the trigger terms. Then move on to tab5. Etc.
Don't forget to link the tabs with “Set of buttons.”
Is that clear enough? Let me know. I hope this helps.
- brucefrenchCommunity Member
Thanks for that. I'll have a good look at it.
- ThierryEMMANUELCommunity Member
In any case, jaybeecnc 's suggestion is very relevant. I tried to keep my demo as similar as possible to your original version. But layers are a better solution for displaying information rather than inside the states of an element for a tab interaction : it is much simpler and easier to adjust the content of layers.
- jaybeecncCommunity Member
Unless I am misunderstanding this, could you make your 1-9 buttons into a button set and just make the layers visible when the user selects the buttons?
- brucefrenchCommunity Member
Could I do that? I'll check that out actually, maybe I'm making things more difficult than they need to be.