Howdy, Stranger!

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

(Sugarcube) Apply html code on every passage.

So, the title is self explenatory. I made a sidebar in html and would like that this sidebar appears in every passage.
My question. Is there something like a general html page like there is one for js and css? Or is there an other way?
I just really dont want to paste that code into every passage I created. :p
Thanks.

Comments

  • In Sugarcane, StoryMenu does this. But not in Sugarcube, I'm afraid.
    You can do smth like this in prerender function:
    prerender['runBeforeTheNextPassage'] = function () {
    new Wikifier(document.createElement('div'), 'your html code here');
    };
    
  • RhoRho
    edited March 2016
    yun wrote: »
    In Sugarcane, StoryMenu does this. But not in Sugarcube, I'm afraid.
    You can do smth like this in prerender function:
    prerender['runBeforeTheNextPassage'] = function () {
    new Wikifier(document.createElement('div'), 'your html code here');
    };
    

    My Twine lets me choose between harlowe, snowman and sugarcube. Didn't know that there was something called sugarcane so thanks for telling; I will look up on that. :) And thanks for the code. Altough I didn't work at first I found, I googled sometime, and found an other piece of code that worked. It's is shorter and seems kinda less trustworthy because of that than your code. :p But I'm not an experienced programmer so I don't know if it'll give problems later on the line, but it works for now.
    $('body').prepend('htmlcode');
    

    Edit: Alright the code I found does not really work. The variables don't apply so maybe I should do some more googling. :p
  • Anyone know why I can't put a simple var x in the htmlcode of the $('body').prepend('htmlcode') ? I tried document.write and I tried <script>.
  • Did you try putting that code in your StoryInit passage?

    I have the following in my StoryInit and it works just fine:
    $('body').prepend('<div id="mydiv"></div>');
    


  • edited March 2016
    note: Sugarcane is a Twine 1 story format, it does not exist in Twine 2

    SugarCube 1 supports a Special Passage named StoryCaption which can be used to display content within SugarCube's own side-bar. To use it simple name one of your story's passages StoryCaption and place your code inside it, that code will now appear on every page.
  • greyelf wrote: »
    note: Sugarcane is a Twine 1 story format, it does not exist in Twine 2

    SugarCube 1 supports a Special Passage named StoryCaption which can be used to display content within SugarCube's own side-bar. To use it simple name one of your story's passages StoryCaption and place your code inside it, that code will now appear on every page.

    Getting stuff into the pre programmed sidebar to the left wasn't a problem. (Altough I called it StoryMenu. ) Creating a new sidebar on the right however... :p
  • By default SugarCube only automatically updates visible areas it controls (like .passage, #ui-bar, etc...) so if you add your own new visible area (side-bar) outside one of the controlled ones then you will need to manually keep it up to date yourself, how much effect that takes depends on how you implement that new area and what that new area does.

    The following is one method of adding a very simple visible area to a story, it will appear at the bottom of the screen but you could use CSS to reposition it to the right side of the screen instead.

    1. Add the new visible area to the story:
    Place the following within your Story Javascript area, it will create a new visible area with an ID of right-side-bar.
    $('<div id="right-side-bar"></div>').appendTo(document.body);
    
    2. [optional] Variable used to test the new visible area:
    Place the following within your story's StoryInit passage, it will initializes two variables which used to demonstrate that values shown in the new area can be changed.
    <<set $name to "ABCD">>
    <<set $health to 100>>
    
    3. Create a passage who's content will be displayed in the new area, I am naming it Right Sidebar and it will display the current values of the two variables defined in StoryInit
    <hr>
    The players name is $name
    Their health is $health
    
    4. Use a PassageDone special passage to display the above contents in the new visible area:
    <<replace "#right-side-bar">><<display "Right Sidebar">><</replace>>
    

    If you change the value of one of the variables within a passage then you should see the contents of the new area also change.
    <<set $health to 50>>
    
  • greyelf wrote: »
    By default SugarCube only automatically updates visible areas it controls (like .passage, #ui-bar, etc...) so if you add your own new visible area (side-bar) outside one of the controlled ones then you will need to manually keep it up to date yourself, how much effect that takes depends on how you implement that new area and what that new area does.

    The following is one method of adding a very simple visible area to a story, it will appear at the bottom of the screen but you could use CSS to reposition it to the right side of the screen instead.

    Greyelf, you are bloody awesome. :D Much thanks!
Sign In or Register to comment.