Why does passage content reset upon changing the style of a <div> on the page?

Authoring Twine
,
1

Doing some modifications of Paloma, and one of the elements I’ve added to the page is a JS function that toggles the visibility of a menu when a button is clicked by modifying that specific menu’s <style>. Problem being, every time this button is clicked, the entire Twine passage history is cleared and the document is reset to the beginning passage.

I’ve tried this with display:none, visibility:hidden, and width:0. Every modification to the style, regardless of if it preserves content within the DOM, resets the Twine hierarchy. Neither the button nor the menu are parents of the actual Twine content, but siblings of the greater hierarchy, so I don’t know why it would even affect it.

Does anyone know what this is, or how I could disable it? I want to always preserve the chat history and never clear anything, so this is a little counterproductive.

2

Modifying styles should not cause the DOM to refresh, so your issue is likely to do with how exactly you’re attempting to change the styles in question.

You need to show both your function and how you’re using it.

3

The function is:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
      e.setAttribute ('style', 'display:none !important');
  else
      e.setAttribute ('style', 'display:block');
}

My document layout is (roughly):

<parent div>
     <menu (style=display:none)>
          *content (onclick=toggle menu;toggle button)*
     </menu>
     <button (style=display:block)>
          *content (onclick=toggle menu;toggle button)*
     </button>
     <Twine>
          *Twine content*
     </Twine>
</parent div>

When I click the button or the menu, it toggles properly but clears the Twine content back as if the page refreshed. The Twine content doesn’t have any IDs or classes which are affected by the function, it just decides to do a refresh whenever either of the other elements is clicked.

4

We can’t test or debug pseudo code.

As defined, the toggle_visibility() function would not be in-scope for any onclick event handle attribute that was assigned to a HTML element (like <button>). So either:

  • the JavaScript code example you supplied isn’t an actual representation of that function’s definition.
  • you’re creating the <button> elements in a way that has the same execution scope as that function.

Either way, we can’t test or debug that code!

Neither Paloma or Snowman understands about interactive elements like <button> or <menu>, so it is unlikely the story format itself is doing anything special when such elements are selected.

It is more likely that you’re own code is causing something like a page refresh, which would definitely result in the page only displaying the first Passage shown, which is a common downside to any of the “endless page” / “stretch text” techniques.

5

Yep, it had nothing to do with this - turns out I had href="#" on all the clickable elements out of force-of-habit, and that’s considered a new page being loaded by Twine’s standards. href="javascript:void(0)" works perfectly fine in its place.

Now I have an entirely separate issue as to how I can use anchor tags for navigation without it resetting the whole story, but that’s for another thread.