Twine Version: 2.3.9
Story Format: Sugarcube 2.31.1
Hello Helpful People,
Sorry for any irrelevant details but I want to include everything just in case. I have a dialogue box at the bottom of my game screen which I attach using this in javascript:
I have various buttons which bring the bar back as needed and then fill it with text. I use the same code as above but replace “hidden” with “visible”.
Now unto the problem.
I want to set it so I can just click anywhere on the dialogue box and make it hidden again. I’m at a bit of a loss since I never actually call the dialogue-bar outside of the java script. The buttons just make it visible and then replace the text.
basically I just want to change the visibility to Hidden when the box is clicked.
That way, when that <div> is clicked on, it will trigger the $(this).css('visibility', 'hidden') code, and in the onclick event, the this object will refer to that <div> element. That’s uses the jQuery .css() method, which is a bit simpler than the method you’re currently using to hide it. So you could do this instead to hide that element:
Anyways, back to hiding the <div>. Technically using “inline event handlers” like the onclick event aren’t a great way to trigger events (see here). So, as more proper way of doing it, you should use the jQuery .on() method to add an event handler to hide it instead, like this:
<<run $('<div id="dialogue-bar"></div>').appendTo("body").on("click", function (event) {
$(this).css('visibility', 'hidden');
})>>
That should give you a couple of ways to hide that <div> element.
Thanks for this. I’m not super great with the coding side of things. How would I use the .on() version? Would it go into the javascript or would I put it in the button.
You could either put the code I gave you in the game’s StoryInit passage or you could use that same code, strip off the <<run>> part, add a semicolon at the end, and put it in your game’s JavaScript section. Either way works almost the same, though it happens just a tiny bit later in the StoryInit passage than it would in the JavaScript section.
If you want to make that <div> visible later on, then you could do this:
The bar reappears with the text but does not disappear once I click on it. Not sure what I’m doing wrong but I will mess around with it tomorrow. Thanks for the help!
How are you creating the “dialog-bar” <div>? If you use the .on() method code I gave you earlier in your StoryInit passage, then it should work fine.