Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Trying to toggle a minimap display in Sugarcube.
So I referred to this old thread to create a minimap in my twine game: https://twinery.org/forum/discussion/1630/macro-mini-map-to-go
I modified the minimap a little and put it on the right hand side of the page, so that it wouldn't take up space on my StoryMenu UI bar.
Now on the StoryMenu UI bar, I added a click macro: <<click "Toggle Minimap">><<toggleclass "#minimap" "display">><</click>>
Here are my stylesheets for the minimap with "display: none" as default for the #minimap:
#minimap
{
display: none;
position: fixed;
right: 20px;
top: 20px;
width: 280px;
height: 280px;
overflow: hidden;
}
#minimap img
{
position: absolute;
right: 0px;
top: 0px;
transition: all 2s;
-webkit-transition: all 2s;
}
#minimap-overlay
{
position: absolute;
right: 0px;
top: 0px;
width: 280px;
height: 280px;
background-image: url(Images/Map-Overlay.png);
}
My problem is that it is not working, and the minimap remains hidden (due to the default display:none). Did I do anything wrong? Should I use visibility: hidden instead?
As an extra question, due to me putting the minimap at the right-hand side of the passage, the minimap tends to obscure text / images within the passage due to its size, so I would also like to add a toggleable "margin-right: 285px" or something like that into the body element, using the same click macro, but I have no idea how to do that.
Sorry if this question is rather simple, but I'm still new and terrible at twine and css in general >_<
I modified the minimap a little and put it on the right hand side of the page, so that it wouldn't take up space on my StoryMenu UI bar.
Now on the StoryMenu UI bar, I added a click macro: <<click "Toggle Minimap">><<toggleclass "#minimap" "display">><</click>>
Here are my stylesheets for the minimap with "display: none" as default for the #minimap:
#minimap
{
display: none;
position: fixed;
right: 20px;
top: 20px;
width: 280px;
height: 280px;
overflow: hidden;
}
#minimap img
{
position: absolute;
right: 0px;
top: 0px;
transition: all 2s;
-webkit-transition: all 2s;
}
#minimap-overlay
{
position: absolute;
right: 0px;
top: 0px;
width: 280px;
height: 280px;
background-image: url(Images/Map-Overlay.png);
}
My problem is that it is not working, and the minimap remains hidden (due to the default display:none). Did I do anything wrong? Should I use visibility: hidden instead?
As an extra question, due to me putting the minimap at the right-hand side of the passage, the minimap tends to obscure text / images within the passage due to its size, so I would also like to add a toggleable "margin-right: 285px" or something like that into the body element, using the same click macro, but I have no idea how to do that.
Sorry if this question is rather simple, but I'm still new and terrible at twine and css in general >_<
Comments
Add the following style rule to your current rules: (somewhere after #minimap) That rule changes the CSS property display when the class display exists on the #minimap element.
I still have another question that I asked in my original post though: I'm trying to add another <<toggleclass>> macro within the same <<click>> macro I mentioned above which modifies the "body" property to increase the right margin whenever the minimap is toggled back on. Any idea how I would do that? How do I modify the CSS for "body"?