Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Auto-collapse SugarCube UI bar after link is pressed

Im using SugarCube 2.11.0 on Twine 2.0.11. I have added some links with the StoryMenu passage on the left sidebar (UI bar). With the button on the top you can expand and collapse the sidebar. Now I would like the sidbar will be collapsed after a link is clicked on the StoryMenu - but only if "@media (max-width: 800px)" rule matches. How can I implement this?

This is because on mobile devices the sidebar overlaps the story passage. So the sidebar is collapsed by default. The player has to expand the sidebar to press the link. The passage is loaded "under" the sidebar. Now the player has to collapse the sidebar manually.

Comments

  • You cannot use CSS to do this.

    Add the following to your script section: (Twine 2: goes in Story JavaScript; Twine 1: goes in script-tagged passage)
    setup.stowUiBar = function () {
    	if (typeof Config.ui.stowBarInitially === 'number' && $(window).width() <= Config.ui.stowBarInitially) {
    		$('#ui-bar').addClass('stowed');
    	}
    };
    


    Assuming that you're using normal link markup—e.g. Some Link—then wrap your story menu links in something like the following:
    <<link [[Some Link]]>>
    <<script>>setup.stowUiBar()<</script>>
    <</link>>
    
    Alternatively, if you're already using <<link>>, then simply add the <<script>> macro to them as shown above.
  • Wow, this is great! Thank you, TheMadExile. Works like a charm.
Sign In or Register to comment.