How to hide links until typed.js is complete

Question

Hi, I'm trying to implement a visual novel dialogue system in SugarCube but because links won't work within typed.js i have them outside of it. The only problem is that the player can see their dialogue options before the other person is done talking. I'm trying to create a conditional so that the links are not displayed until typed.js is complete. I'm using the typed.js integration module in SugarCube 2.21. To format the CSS I used Dan Cox's tutorial, I'm not sure if the <div class> stuff is causing trouble.  

 

<div class='container'>
<div class='topBackground'><div class="typed-speed80-delay800">here's some text hopefully it's in the right place</div></div>


$(document).on(':typedcomplete', function () {
    <<->>(<div class='textBubble'>[[it's a link that's really really really really long because i to test the css formatting]]</div>
);
});
</div>

 

Answer 1

$(document).on(':typedcomplete'

The section of your example that starts with the above is JavaScript code, which needs to be wrapped within a <<script>> macro if you want it to execute within the current Passage. You also can't embed TwineScript code within that JavaScript code the way you are doing it.

The following shows one possible way to achieve the effect you are looking for, it uses a display: none style to hide the div element containing the links, and then uses a jQuery show() function to reveal it again. I also replaced the jQuery on() function with the one() function because you only want that event handler to activate a single time in the use-case.

<<nobr>>

<div class='container'>
	<div class='topBackground'>
		<div class="typed-speed80-delay800">here's some text hopefully it's in the right place</div>
	</div>
</div>

<div id="links" class='textBubble' style='display: none'>
[[it's a link that's really really really really long because i to test the css formatting]]
</div>

<</nobr>>

<<script>>
$(document).one(':typedcomplete', function () {
	$('#links').show();
});
<</script>>

note: I have added extra line-breaks into the above just to make it a little more easy to see the different sections, those line-breaks can safely be removed.

Comments

Thank you so much, this is my first time really using JavaScript and JQuery so I'm a bit useless at it. I really appreciate you taking the time to help.