I've got a bunch of JS code printing images and text, but my page automatically scrolls down and doesn't give me time to read anything.

[[JScode]]:
    // prints a bunch text
    squiffy.story.go("continue");

[[continue]]:
[[Proceed]](nextsection)

Is there any way I can prevent this, or force it to scroll back to the top?

Hello.

I don't know how or why, but Squiffy only scrolls down like that when you run the game in the editor. If you build the game and try it from the browser, it shouldn't scroll down past the beginning of the new text.

If this is not the case, let us know. I just tested it on Windows 10 with the desktop version of Squiffy and with both the Firefox and Chrome browsers, but that doesn't mean it works the same way cross-platform and/or cross-browser.

Hey, sorry for the late reply...

I'm on Linux Mint and tested four different browsers (Firefox, Chrome, Opera, Brave) and they all scroll down when I preview and when I publish the game as well.

I thought maybe this was happening because I'm forcing the game to go to a new section at the end of my JS code, and that section prints something on the screen. I have a section that puts a lot of stuff on the screen but that's it, it doesn't go to another section, and it doesn't scroll down.

I missed that detail. It probably is because you are forcing the new section. I think we can still make it behave like you want it to behave.

First, though: How are you using Squiffy? Online? The GUI editor? Or squiffy-cli? You said "preview", so I'm going to assume you're not using squiffy-cli.

NOTE

When I try to run Squiffy 5.1.3 for Linux on Linux Mint 20.1, it won't open. I get this error:

So, I had to download the Squiffy editor's source code from GitHub and change the version of Electron to 4.2.12 to get the editor to run. That's all I did, though. So, it shouldn't effect the way Squiffy itself behaves.

Anyway, I just partially recreated what I think is this part of your game, but I omitted the squiffy.story.go part.

I used squiffy.ui.write to print more than a screen-full of text, and it scrolled down (just as you describe) -- without using squiffy.story.go.

Hrmm...

Still looking into this.

Here are the two functions involved:

   squiffy.ui.write = function(text) {
        screenIsClear = false;
        scrollPosition = squiffy.ui.output.height();
        currentSection.append(jQuery('<div/>').html(squiffy.ui.processText(text)));
        squiffy.ui.scrollToEnd();
    };

    squiffy.ui.scrollToEnd = function() {
        var scrollTo, currentScrollTop, distance, duration;
        if (squiffy.ui.settings.scroll === 'element') {
            scrollTo = squiffy.ui.output[0].scrollHeight - squiffy.ui.output.height();
            currentScrollTop = squiffy.ui.output.scrollTop();
            if (scrollTo > currentScrollTop) {
                distance = scrollTo - currentScrollTop;
                duration = distance / 0.4;
                squiffy.ui.output.stop().animate({ scrollTop: scrollTo }, duration);
            }
        }
        else {
            scrollTo = scrollPosition;
            currentScrollTop = Math.max(jQuery('body').scrollTop(), jQuery('html').scrollTop());
            if (scrollTo > currentScrollTop) {
                var maxScrollTop = jQuery(document).height() - jQuery(window).height();
                if (scrollTo > maxScrollTop) scrollTo = maxScrollTop;
                distance = scrollTo - currentScrollTop;
                duration = distance / 0.5;
                jQuery('body,html').stop().animate({ scrollTop: scrollTo }, duration);
            }
        }
    };

I don't know. This is beyond me.

When I put the extra-long text in a section so it prints normally, it doesn't scroll down after building the game.

That part is the second section that prints in the game, because the first action I take is clicking to print that part. So, that part, in my test build, has the element id "squiffy-section-2". (This will undoubtedly be different in the actual game.)

Anyway, when I just add my text to Squiffy normally and it doesn't scroll to the end, by "squiffy-section-2" element is like this:

<div id="squiffy-section-2>
  <div>
    <p>...</p> [overflow]
  </div>
</div>

When using squiffy.ui.write to print the long text:

<div id="squiffy-section-2>
  <div>...</div> [overflow]
  <div></div> [overflow]
</div>

Seeing that, I thought maybe wrapping the long text with <p> before saving it as a JS string might solve the scrolling-to-end issue. Nope. Same behavior. It just has the extra paragraph element nested in there, too:

<div id="squiffy-section-2>
  <div>
    <p>...</p> [overflow]
  </div>
  <div></div> [overflow]
</div>

When using squiffy.ui.write(), it calls squiffy.ui.scrollToEnd(), and that seems to add an empty <div> element after the text?

We need someone else to help. Fooling around with the way the scrolling behaves is beyond me.

Here's my test code:

    var s = "
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula molestie urna, eu ullamcorper dolor mollis ac. Mauris fringilla a sem vitae viverra. Nulla sed ipsum ut ante varius pharetra. Integer at nunc nisl. Nulla non luctus neque. Ut vel sapien in dolor convallis semper. Aenean efficitur tellus eu luctus blandit. Donec vulputate porta nibh, ut placerat metus eleifend vel. Vestibulum congue ultrices eros quis tincidunt.

Phasellus at justo sagittis, laoreet nisl ut, sagittis metus. Praesent ut vehicula neque, a aliquet neque. Fusce non mauris nunc. Mauris porttitor ligula cursus, faucibus odio vitae, egestas lacus. Sed et fringilla ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod odio in odio ultrices accumsan. Mauris eget commodo metus. Phasellus nisl libero, vehicula nec sem ac, facilisis convallis neque. Nam accumsan in ipsum quis blandit. Phasellus tellus mi, hendrerit quis dui vel, auctor varius tellus. Vivamus gravida ac arcu sed feugiat. Vivamus a porta risus. Nulla maximus arcu eget orci rhoncus, eu tristique lectus ultricies. Vivamus in pulvinar nisi. Sed eu imperdiet nulla.

Fusce sagittis lacinia sapien in placerat. Etiam quis lacinia nisl, a mollis mi. Curabitur nisi justo, euismod vel placerat et, ornare eu nisl. Ut faucibus urna leo, a maximus ante elementum vitae. Aenean eget pharetra tellus. Integer quis elit aliquet, lacinia nisl ut, commodo purus. In consectetur ex sit amet hendrerit tempor. Quisque id sollicitudin massa, vehicula sagittis ex.

Vivamus ut lobortis arcu. Cras sollicitudin elit erat, nec molestie erat finibus id. Donec viverra ante eu quam tincidunt vestibulum. Nunc efficitur mattis nisl ac tristique. Nullam viverra convallis augue suscipit elementum. Proin auctor eleifend libero in sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dui nulla, consequat at nisl quis, blandit aliquam massa. Vivamus congue fringilla nisl, sodales euismod leo malesuada eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec arcu varius, iaculis lorem a, ornare mauris. In lacinia, nibh finibus auctor ullamcorper, neque lacus imperdiet nisi, eget hendrerit massa nulla ac mauris. Sed cursus blandit mi convallis viverra. In placerat arcu sem. Nunc porttitor, quam hendrerit varius sollicitudin, metus elit cursus elit, eget consequat est felis id eros
";
    squiffy.set("loremIpsum", s)
    
Hello, world.

[[test]]

[[test]]:
    squiffy.ui.write(squiffy.get("loremIpsum"));
    


[[continue]]:
Proceed to next section . . .

It doesn't seem to be the fault of squiffy.ui.scrollToEnd(). I disabled that, and it still scrolls to the end when printing a long bit of text via squiffy.ui.write().

One "fix" is give the first element you're printing with JS an id and use scrollIntoView().

    var s = "<p id='scroll-to-me1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula molestie urna, eu ullamcorper dolor mollis ac. Mauris fringilla a sem vitae viverra. Nulla sed ipsum ut ante varius pharetra. Integer at nunc nisl. Nulla non luctus neque. Ut vel sapien in dolor convallis semper. Aenean efficitur tellus eu luctus blandit. Donec vulputate porta nibh, ut placerat metus eleifend vel. Vestibulum congue ultrices eros quis tincidunt.<br/><br/>Phasellus at justo sagittis, laoreet nisl ut, sagittis metus. Praesent ut vehicula neque, a aliquet neque. Fusce non mauris nunc. Mauris porttitor ligula cursus, faucibus odio vitae, egestas lacus. Sed et fringilla ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod odio in odio ultrices accumsan. Mauris eget commodo metus. Phasellus nisl libero, vehicula nec sem ac, facilisis convallis neque. Nam accumsan in ipsum quis blandit. Phasellus tellus mi, hendrerit quis dui vel, auctor varius tellus. Vivamus gravida ac arcu sed feugiat. Vivamus a porta risus. Nulla maximus arcu eget orci rhoncus, eu tristique lectus ultricies. Vivamus in pulvinar nisi. Sed eu imperdiet nulla.<br/><br/>Fusce sagittis lacinia sapien in placerat. Etiam quis lacinia nisl, a mollis mi. Curabitur nisi justo, euismod vel placerat et, ornare eu nisl. Ut faucibus urna leo, a maximus ante elementum vitae. Aenean eget pharetra tellus. Integer quis elit aliquet, lacinia nisl ut, commodo purus. In consectetur ex sit amet hendrerit tempor. Quisque id sollicitudin massa, vehicula sagittis ex.<br/><br/>Vivamus ut lobortis arcu. Cras sollicitudin elit erat, nec molestie erat finibus id. Donec viverra ante eu quam tincidunt vestibulum. Nunc efficitur mattis nisl ac tristique. Nullam viverra convallis augue suscipit elementum. Proin auctor eleifend libero in sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dui nulla, consequat at nisl quis, blandit aliquam massa. Vivamus congue fringilla nisl, sodales euismod leo malesuada eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec arcu varius, iaculis lorem a, ornare mauris. In lacinia, nibh finibus auctor ullamcorper, neque lacus imperdiet nisi, eget hendrerit massa nulla ac mauris. Sed cursus blandit mi convallis viverra. In placerat arcu sem. Nunc porttitor, quam hendrerit varius sollicitudin, metus elit cursus elit, eget consequat est felis id eros</p>";
    squiffy.set("loremIpsum", s)
    
Hello, world.

[[test]]

[[test]]:
    squiffy.ui.write(squiffy.get("loremIpsum"));
    setTimeout(function(){
        document.getElementById("scroll-to-me1").scrollIntoView();
    },1000);


[[continue]]:
Proceed to next section . . .

If I make the time out less than 1 second, it doesn't have enough time to work. It might need 2 or 3 seconds when playing online.

Even with the 1 second delay, it is off-putting -- even when I know it's going to do it.

squiffy.ui.write is used to add any text to the output. It records the current height of the text, adds the new text to the end, and then calls squiffy.ui.scrollToEnd to scroll to the position it noted; or to the end.

This means that whenever you add text (usually once per section/passage) it will attempt to either scroll the start of that text to the top of the screen, or scroll to the end (depending on the value of squiffy.ui.settings.scroll - which I assume you can set somewhere in the editor.

If you want to disable scrolling completely, you could replace that function:

    squiffy.ui.write = function(text) {
        $('#'+squiffy.get('_output-section')).append($('<div>').html(text));
    }

That should disable automatic scrolling; but that's probably not such a good solution in general. Both because the player would need to scroll manually, and because it would only work from the section where you put the code, until the window is closed (resuming a saved game would restore the default behaviour).

ah, I guess you're ahead of me on this one

Hey, thanks for the replies.

@K.V., that works, but the only problem is that the amount of text printed varies a lot, because I'm also showing a lot of images with all the players still alive and what happened to them every round. It can take anywhere from 1 to 6 seconds to get to the bottom with the auto scrolling. So at the beginning of the game it takes a long time to scroll down, and this time gets lower after each round and at the end that isn't a problem at all. Is there a way to change/get the scrolling speed, and something like how many lines were printed/current line so my code can estimate how long to wait before scrolling back up?

I could also make a "Scroll to Top" section and let the player choose if they want to do so, but the problem is that the "Proceed" button then becomes unclickable and I can't seem to make a Scroll to Top passage work, only section.

For some context, I'm trying to make something similar to this: https://brantsteele.net/hungergames/reaping.php
but without some of its limitations and a lot more options .

@mrangel, I don't think disabling the auto scrolling completely would be a problem for me. But I can't figure out how tocentralize my text, I was using this before:

    squiffy.set("text", sometext);
    squiffy.ui.write("<div style='text-align: center'> <span>{text}</span><br></div>");

But replacing the function as in your post this doesn't work anymore, it just writes "{text}" instead. And for some reason my images aren't being printed anymore. I was calling a new section to do so, but after replacing the function it just prints empty images, even though it doesn't even use the squiffy.ui.write command.

[[pics]]:
<p style=" text-align: center; margin-bottom: 0.5em;">
<img src="{img}" width="100" height="100"> </p>

Also, what does squiffy.ui.settings.scroll do? Couldn't find anything on it.

P.S.: I'm using the online editor btw.

Sorry, that was me being careless. I missed out the call to squiffy.ui.processText.
So it should be:

    squiffy.ui.write = function(text) {
        $('#'+squiffy.get('_output-section')).append($('<div>').html(squiffy.ui.processText(text)));
    }

You could also make a copy of the original function, if you want to have some form of auto-scrolling. For example:

    if (!squiffy.ui.writeAndScroll) {
        squiffy.ui.writeAndScroll = squiffy.ui.write;
        squiffy.ui.write = function(text) {
            $('#'+squiffy.get('_output-section')).append($('<div>').html(text));
        }
    }

In this case, you could then use squiffy.ui.writeAndScroll instead of just write at the start of each turn. Then you could have it scroll down to the start of each turn, but not scroll for the remainder of the output.

As far as making it work in a saved game goes, you could put the function in the master section. Checking for the existence of writeAndScroll in this modified version means that it will only run once, and I think that would be sufficient to make it work.

Hope there's not anything else I've missed there.

Oh it works now, thanks a lot!