(Solved) Adding images starts Passages at the bottom, how do I get it to start at the top?

Authoring Twine
1

Hello! Sorry if I’ve posted this in the wrong place, I’m new here (and new to Twine and coding in general).

I have an issue where whenever I try to implement an image into a passage, if I ever navigate to that passage via a link, it starts me at the bottom (or near bottom) of the page. I want my readers to always start at the top of the passage when navigating the story.

This does not seem to happen when I don’t have an image on a passage.

Here’s an example of what I have on a problem passage. I currently have nothing in my Stylesheet except a change of font for hyperlinks, and my Story Javascript only has Chapel’s Dialog API Macro.

<center><span style="color: #17ff7f; font-size:200%; font-family: Charlemagne Std, serif;"><b><u>THE GRAND FOYER</u></b></span></center>
<img src="https://i.imgur.com/GFwlnS3.png" width="840" height="500">
 
Here you are, in the wide mouth of this grand and dilapidated estate. The air is still and cold, the furniture is rotting, and every surface blah blah blah a few paragraphs of narrative text goes here.
 
Where will you go now?
[[Go to room: Dining Hall|Dining Hall]]
[[Go upstairs: 2nd Level Hall|Second Level Hall]]
[[Go outside: Courtyard|Courtyard]]

Navigating back to this passage from any other starts me at the bottom of the page, and navigating to any other passage with an image implemented the same way also starts me at the bottom of the page.

How would I go about fixing this, or forcing the program to start every page at the top when navigated into by a link?
Any help would be deeply appreciated. Thank you!

Twine Version: 2.7.1.0
Sugarcube 2.36.1
Browser: Firefox

(Also yes the image is a silly placeholder, don’t mind it.)

2

Did you change the interface of your game in the passage StoryInterface ?
Because if you still have the base UI, this shouldn’t be happening (the scroll back to top should be automatic.

If you did change the interface, you’ll need this code:

$(document).on(":passagedisplay", function() {
	$("#passages").scrollTop(0);
});

in your javaScript.

Note: depending on how your interface is coded, #passages should be replaced with a different element.

3

Thanks so much for your reply Manon! I have not touched any passage called StoryInterface – I have fiddled with StoryMenu, though. Does that make a difference?

I did try your tip anyway–but dropping that in as is didn’t make any changes. And I’m not sure what I could change “#passages” into.

4

:thinking:
It shouldn’t… If you didn’t change the interface, the page should automatically scrollback… I’ve even tried testing your code above in a new project, adding the same macro as you have and I can’t recreate the issue…
Is there any other JavaScript code you have in your project?

Current quick-fix (that is not a long-term solution, probably not a good idea since you didn’t change the interface, but it should work for now):

$(document).on(":passagedisplay", function() {
	$(window).scrollTop(0);
});

Might be better to start a fresh project and add things one by one to find what’s messing about…

5

Huh! That’s strange. What’s stranger yet is that it’s still doing that thing for some reason.

Here’s a ctrl+A copy-paste of the entire Story Javascript I have at the moment (including what you just sent me, pasted up top):

$(document).on(":passagedisplay", function() {
	$(window).scrollTop(0);
});

// dialog-api-macro-set.min.js, for SugarCube 2, by Chapel
// v1.3.0, 2022-07-21, 3bdbdfbe5ae47a46e4f4e52766d78701939ae9a6
;Macro.add("dialog",{tags:["onopen","onclose"],handler:function(){var t="",s=null,n=null,o=this.args.length>0?this.args[0]:"",e=this.args.length>1?this.args.slice(1).flatten():[];this.payload.forEach((function(o,e){0===e?t=o.contents:"onopen"===o.name?s=s?s+o.contents:o.contents:n=n?n+o.contents:o.contents})),e.push("macro-"+this.name),Dialog.setup(o,e.join(" ")),Dialog.wiki(t),s&&"string"==typeof s&&s.trim()&&$(document).one(":dialogopened",(function(){$.wiki(s)})),n&&"string"==typeof n&&n.trim()&&$(document).one(":dialogclosed",(function(){$.wiki(n)})),Dialog.open()}}),Macro.add("popup",{handler:function(){if(this.args.length<1)return this.error("need at least one argument; the passage to display");if(!Story.has(this.args[0]))return this.error("the passage "+this.args[0]+"does not exist");var t=this.args[0],s=this.args.length>1?this.args[1]:"",n=this.args.length>2?this.args.slice(2).flatten():[];n.push("macro-"+this.name),Dialog.setup(s,n.join(" ")),Dialog.wiki(Story.get(t).processText()),Dialog.open()}}),Macro.add("dialogclose",{skipArgs:!0,handler:function(){Dialog.close()}});
// end dialog-api-macro-set.min.js

AND…I even tested it on a fresh file just now with the same result–with nothing in the Stylesheet, Story Javascript, and Storymenu. Is it possible that it’s my browser or something exterior?

I have to go to bed and won’t be able to fiddle with this until I’m next free, but I’ll definitely check in when I can. Thanks @ anyone who stops by!

6

I figured it out–I’m a doofus and thought it was caused by the images, but the images were NOT the cause. I don’t know why Manon’s tips didn’t work, but I know how to kiiinda fix my problem now.

So the full texts I had following the image on the passages had input boxes in them, I omitted that along with the long paragraphs of text in my original question because I didn’t think they were the cause.

Well, they were-- because wherever I put the text input boxes, the passage would start where it’s visible (they were on the lower half of the page, so it’d send me to the bottom).

The reason why I thought it was the images causing this is because the images were large enough to push everything down far enough for this happening to be noticable.

By putting the input boxes in pop-up dialog links, it no longer does this.

Thank you for helping me figure this out, Manon!

7

It sounds like you are, or were, using the autofocus option. If so, that explains both why your passage was not starting at the top and why Manon’s code did not work as expected. The autofocus option causes its input element to automatically be brought into focus—i.e., automatically scrolled into view and made active.

 

And that is why you should provide as many details as possible, including showing all of the code in question, when you have a problem. If you don’t know what’s wrong, then you shouldn’t assume you know what’s not wrong.

8

Thanks for the tip about that, TheMadExile–I wasn’t aware that autofocus was a thing, or even an option. Could you please point out where to turn it off?

And yes, very true! That’s a lesson learnt for me. Again, I do realise the doofus was me.

9

Well, you don’t actually specify what you’re using other than calling them “input boxes”, which leaves a bit of ground to cover. I’m going to assume that you either meant one of SugarCube’s data entry macros or the HTML <input> element itself.

In both cases, it’s the autofocus option or attribute. The solution in both cases is simply to not specify it.

Note: In the following examples, a horizontal ellipsis is used as a placeholder for other parts of the code.

 
If you’re using one of SugarCube’s data entry macros—e.g., <<textbox>> macro—then it’s the autofocus option. For example, instead of:

<<textbox … autofocus>>

Just do:

<<textbox …>>

 
If you’re using an <input> element, then it’s the autofocus content attribute. For example, instead of:

<input … autofocus>

Just do:

<input …>
10

Oh I see it now yes, thank you so much!