Pop-up windows (sugarcube)
So the player enters a new room. There are a couple of routes out, but he might like to examine some things in the room first. How about having a pop-up window appear with the description in it, instead of going to a new page, and the player then clicking back?
This can be done with the <<click>> macro and some CSS in Sugarcube. Here is an example passage:
The second and third paragraphs contain the text that will be displayed in the player clicks on a red link (blue links take her to another page).
Here is the required CSS, to be pasted into a stylesheet passage (this can handle up to 5 objects in a passage):
This can be done with the <<click>> macro and some CSS in Sugarcube. Here is an example passage:
You are in a large gloomy hallway. To the left, stand a <<click "suit of armour">><<set document.getElementById("hidden1").style.display="block">><</click>>, and beside it hangs a <<click "portrait of a lady">><<set document.getElementById("hidden1").style.display="block">><</click>>. There is a [[door to the right]], and at the far end [[stairs lead upwards]].<br /><br /><<id "hidden1">><<click "The armour has seen better days, and has a few dented, suggesting it has been used in anger on more than one occasion.">><<set document.getElementById("hidden1").style.display="none">><</click>><</id>><br /><br /><<id "hidden2">><<click "The eyes of the rather severe-looking woman seem to follow you round the room.">><<set document.getElementById("hidden1").style.display="none">><</click>><</id>>The second and third paragraphs contain the text that will be displayed in the player clicks on a red link (blue links take her to another page).
Here is the required CSS, to be pasted into a stylesheet passage (this can handle up to 5 objects in a passage):
/* This is the panel that will appear */<br />#hidden1, #hidden2, #hidden3, #hidden4, #hidden5 {<br /> display:none;<br /> position:fixed;<br /> top:300px;<br /> left:200px;<br /> background-color:#eef;<br /> padding:20px;<br /> border-radius: 15px;<br /> border-color: #004;<br />} <br />/* This is the text in the panel */<br />#hidden1 a, #hidden2 a, #hidden3 a, #hidden4 a, #hidden5 a {<br /> font-style:italic;<br /> color:#004;<br />}<br /><br />/* links in the main passage */<br />.link-click {<br /> color:red;<br />}
Comments
Also, I advise against using the deprecated <<id>> macro, it will be removed at some point. You can accomplish the same thing using the <div> element. For example: