How to run jQuery code in the right way in snowman?

Question

Hello,

I would like to run jQuey code in various snowman passages.  I'm doing sth. basically wrong, because code works when starting the story in that passage. But it does not, if it's not in the start passage. And does not, when I return to start passage after reading another passage.

I don't know if the  $(document).ready(.....) wrapper is useable here,  but without it, the code did not run at all - and I thought of a 'the dom elements are not ready to be referenced'-issue.

Start passage:

Text
[
This is a named div.
]{#hum}
Span follows to act as a button <span id="s1" class="buttoni">*`toggle the div visibility`*</span> fullstop.

[[Empty]] 
<%
$( document ).ready( function() {
     $("#s1").on("click", function() {
		$("#hum").toggle();
	  });
});
%>

 

Passage Empty:

Empty passage.

[[Start]]

I saw the post concerning jQuery Accordian widget, but was unable to transfer for snowman.

Could you please give an advice or a link how to run jQuery code in the correct manner with snowman story format.

Thank you in advance.

Answer 1

The ready event occurs when the page's Document Object Model is first created, and is used by the story format to start its' Javaacript engine so you cant use it within your code.

How you call jQuery in your project depends on exactly what you are trying to do, in your use-case you want to execute a callback function at the end of the process that converts the contents of the current Passage into HTML. Snowman has extended the standard jQuery $() function so that any callback function that is passed to it will be executed during that part of the processing process.

Text
[
This is a named div.
]{#hum}
Span follows to act as a button <span id="s1" class="buttoni">*`toggle the div visibility`*</span> fullstop.

[[Empty]] 
<%
$(function () {
     $("#s1").on("click", function() {
		$("#hum").toggle();
	  });
});
%>

 

Comments

Thank you very much for the detailed explanation! Of course your snippet works as expected. Without examples I always get lost.  Thanks