Clicking a div to make it hidden

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:

$('<div id="dialogue-bar"></div>').appendTo(document.body);

I hide it using this in the first passage :

<<set document.getElementById("dialogue-bar").style.visibility = "hidden">>

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.

1 Like

You can use the onclick event to trigger some JavaScript like this:

$("body").append('<div id="dialogue-bar" onclick="$(this).css(\'visibility\', \'hidden\')"></div>')

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:

<<run $('#dialogue-bar').css('visibility', 'hidden')>>

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.

Enjoy! :slight_smile:

1 Like

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.

Right now the buttons like this:

<<button "Name">><<replace "#dialogue-bar">>Blah Blah Blah<</replace>><</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:

<<button "Name">>
	<<replace "#dialogue-bar">>Blah Blah Blah<</replace>>
	<<run $("#dialogue-bar").css("visibility", "visible")>>

That will let you update the contents of that <div> and then makes it visible.

Enjoy! :slight_smile:

1 Like

So the bar shows up when the game begins, I can click on it and it disappear. The next time I make it visible using this:

<<button "Name">> <<replace "#dialogue-bar">>Blah Blah Blah<</replace>> <<run $("#dialogue-bar").css("visibility", "visible")>> <</button>>

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.

1 Like

Now that I had some time to sleep I figured out what was the problem. I had this line in javascript from an older version:

$('<div id="dialogue-bar"></div>').appendTo(document.body);

Once I took that out everything worked just as you said. Thank you for the help!