Howdy, Stranger!

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

How to push text to the bottom of the page.

hello, i have a quick question for you guys... how would i get the bottom link ( <<endif>>~Go to the [[living room|Living room]].<<endif>> ) to sit at the bottom left of the page (still inside the game frame)? thanks for any help ya can give.
(i am using sugarcube)

--------------------------------------------------------------------------------------------------------------------------------------------------

<<set $location = "Kitchen">>Location: <<print $location>>
<<if $player eq "Penny">>

The kitchen's pretty standard: fridge, sink, pantry, et cetera. Some college mail for you sits on the table, but nothing urgent.
...more text here...
Penny's looking through the mail and papers on the kitchen counter. "Hey buddy. I don't suppose you've seen my phone?"

<<endif>>~Go to the [[living room|Living room]].<<endif>>

Comments

  • Do you mean at the bottom of the scrollable content (regardless of length) or fixed at the absolute bottom of the page?  The former is achievable with a little CSS.  The latter is considerably more difficult (to do correctly, anyway).

    I assume you want the latter, but figured that it was best to ask.
  • i would like it so that its at the bottom of the scroll-able content... but the goal was so that the bottom line of text (the links) would always stay in the same location regardless of how much text was above it. k
  • I believe this should do what you're looking for.  It will create a link bar, which is fixed at the bottom of page in the same area as the normal passage display.

    Put the following in your Story JavaScript:

    (function () {

    /* Remove very narrow viewport styles. */
    $("#style-media-queries-narrow", document.head).remove();

    /* Add the link bar element. */
    $("#passages").after('<div id="linkbar"></div>');

    /* Setup a predisplay task to clear the link bar when displaying a new passage. */
    predisplay["clear-linkbar"] = function () {
    $("#linkbar").empty();
    };

    }());
    Put the following in your Story Stylesheet:

    /* Resets and core styling. */
    body {
    /* override defaults */
    margin: 0;
    /* new styles */
    overflow: hidden;
    }
    #passages {
    /* override defaults */
    margin-right: 0;
    /* new styles */
    position: fixed;
    overflow: auto;
    left: 21em;
    top: 0;
    right: 0;
    bottom: 5em;
    }
    .passage {
    /* new styles */
    margin-top: 3.5em;
    margin-right: 16%;
    }
    #linkbar {
    position: fixed;
    overflow: hidden;
    z-index: 10;
    left: 21em;
    right: 0;
    bottom: 2.5em;
    margin-right: 16%;
    max-height: 1.5em;
    }

    /* Increase viewport utilization as its size decreases. */
    @media screen and (max-width: 1440px) {
    #passages {
    /* override defaults */
    margin-right: 0;
    }
    .passage, #linkbar {
    margin-right: 8%;
    }
    }
    @media screen and (max-width: 1136px) {
    body {
    /* override defaults */
    margin: 0;
    }
    #passages {
    left: 20em;
    bottom: 6.75%;
    }
    .passage, #linkbar {
    margin-right: 3.5%;
    }
    #linkbar {
    left: 20em;
    bottom: 2.5%;
    }
    }
    To use the link bar, you'd use one of the DOM (Content) Macros to add a passage's links to the bar (#linkbar).  For example:

    <<replace "#linkbar">>~Go to the [[living room|Living room]].<</replace>>
  • i understand how this is supposed to work now... and i can use the dom content macros, but whenever i try to build this, i get an error, and the bar doesnt work.
    "predisplay is not definied" (predisplay was in the javascript portion you gave me) did i need to add something else to define it?
  • The predisplay object has existed in SugarCube since before a Twine 2 version was published, it being undefined should be, literally, impossible.

    You are using Twine 2, correct?  Also, what version is SugarCube reporting (easiest place to check is the ui-bar)?
Sign In or Register to comment.