Howdy, Stranger!

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

Overflow: Scroll, and Twine conditionals inside HTML statements

I've pretty exhaustively searched for answers but couldn't find anything on these topics.

When using the overflow: scroll property in the stylesheet, it works well enough. However, the scrollbar doesn't reset to the top when moving to new passages. This is disorienting for the user, as they may pop into a wall of text in the middle or near the end of it. What's the code to make sure the scroll resets on passage refresh?

Secondly: Is there a way to have working Twine conditionals inside HTML?

Specifically, putting <<if>> statements and such within <abbr> so that the block of text that shows on mouse hover changes dynamically.

I just know this is simple as hell, but I'm still pretty new at this.

Comments

  • The answer to your second question to use a <<print>> macro to dynamically create your <abbr> tag.

    To this you first use a variable to store your dynamic determined/created title and then use that variable to build your tag.

    <<if $condition is true>>\
    <<set $title to "Some value to be used as a title">>\
    <<else>>\
    <<set $title to "The value can " + "be dynamic generated " + "as well">>\
    <<endif>>\

    <<print '<abbr title="' + $title + '">This text could also be the contents of another variable</abbr>'>>
  • Thanks, greyelf, it worked great. Any ideas for the first question? Maybe there's a different way to put a scrollbar in a passage, or something else.
  • Because the contents of the page are dynamically generated/changed the browsers scrolling subsystem does not know your showing a new "passage", so your going to have to use the java-script scrollTo() method to force the scroll to top.

    Now comes the tricky part, How and When to call the method:

    1. The When - Logically this would be after rendering the changes required to show the new passage but some browsers misbehave so it is better to do it before changing the contents of the page.

    2. The How - Normally if I was writing a web-app I would add the call to the method within the code used to creating the new "page" so it "just happens" but I don't know how to do that to a twine header, and the best way to do this may be different for the different story formats.

    The code required to do what you want would be something like the following, obviously it would need to be modified to work with the structure and existing javascript of the Twine Story Format you are using:

    $(window).unload(function() {
    $('body').scrollTop(0);
    });
Sign In or Register to comment.