My original issue was to stop the text from scrolling to the bottom of the page whenever more text appeared, and I found this JavaScript from a topic last year that resolved the issue: eval ("scrollToEnd = function () {}"). Now the game no longer scrolls to the bottom of new text everywhere except the starting text, where it automatically starts at the bottom. Is there some edit to this line of code that will allow it to cover the starting text as well? Thank you in advance.
Hello.
It sounds like you need to add that code before any text prints.
Is that bit of code in the game object's inituserinterface script?
https://docs.textadventures.co.uk/quest/advanced_game_scripts.html#the-inituserinterface-script
Okay...
Hrmmm...
Which text is printing at the beginning?
I mean: you said it is only scrolling to the bottom when the starting text prints.
What is that starting text? (Is it something you wrote, or is it the room description?)
Is it printing from the inituserinterface script as well? (If yes, is the line of code that prints the starting text before the line of code that modifies scrollToEnd()?)
I've mostly been using the GUI to make my game, so the text I'm referring to is under Start Script in the Scripts tab in the "Game" section. Therefore it's not in the room description.
It turns out upon looking at it in code view, the Start Script is above the inituserinterface script, so I'm guessing that means it's not applying to the text there.
How would I go about moving the start script under the inituserinterface script?
Well, the inituserinterface script runs every time the game loads, even when loading a saved game.
So, assuming you only want that text to print when the game actually begins, I would advise against moving the bit of code that prints the text.
It sounds like the easiest thing to do would be adding the code to modify scrollToEnd() in the start script, too. Put it at the beginning of the start script, before you tell it to print any text. (Leave it in inituserinterface, too. It won't hurt anything being in both scripts. You need it in the inituserinterface script for when people load a saved game.)
So, I added the code to modify scrollToEnd() in the start script above the text and it still starts at the bottom of the text. Since it's not scrolling at the beginning and rather just starting at the bottom, maybe the scrollToEnd() script isn't the problem after all?
Oh! It's starting at the bottom! Not scrolling to the bottom.
I see . . .
Part of that makes sense, as I was thinking the inituserinterface script ran before the start script. (I just tested it to make sure, and it does. The inituserinterface runs before the game's title even prints.)
Anyway, why is your game doing that?
Let me go drop some LOREM IPSUM into a msg in the start script after disabling scrollToEnd() and see if I can figure it out.
If not, we'll need mrangel (or someone on his level).
I'll be right back!
I think maybe it's running scrollToEnd during InitInterface (before calling the user UI Initialisation script), to ensure that when the player loads a saved game they aren't scrolled all the way to the top of the output.
To ensure that it scrolls to the top before starting a new game, put this in your UI Initialisation script:
firsttime {
JS.eval ("$('html,body').css({scrollTop: 0});")
}
JS.eval ("scrollToEnd = function () {};")
@mrangel
That didn't fix it in my test game.
I even tried disabling scrollToEnd at the beginning of both the start and the inituserinterface script.
I can get it to scroll back up using a setTimeout with a 3 second delay in the start script, but that's not really a fix. (It's off-putting, if nothing else).
Doesn't it set the element's min-height when it prints text or something? Am I remembering correctly?
EDIT
I'm just gonna let you two figure this one out, instead of polluting the thread (so to speak). :)
Sorry, but after putting it in it didn't work, the game still starts at the bottom of the text.
That's confusing. I tried putting that in UI Initialisation on one of my test games, and several pages of Lorem Ipsum in the start script, and it seems to start from the top.
Need to work out what the difference is.
There is an alternate solution, if I may; does the Start text need to be so long? Can it be broken up with some 'press a key to continue' breaks? Alternately, you could start with a quick greeting and disclaimer - if needed - with one such break, then print your planned opening scrawl.
Can you show an example game, so I can see the difference between my situation and yours?
@Pykrete
That sounds like it will work for the time being, thanks for the solutions
@mrangel
So, I made a new game and put a few paragraphs of lorem ipsum in and it still jumps to the bottom. How would I go about showing you that game? I'm pretty new here so do you want me to comment with the code?
Here's a test game:
<!--Saved by Quest 5.8.7753.35184-->
<asl version="580">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="tester2">
<gameid>e6fda623-57fc-4ea5-97f5-8c4400030423</gameid>
<version>1.0</version>
<firstpublished>2021</firstpublished>
<multiplecommands />
<feature_advancedscripts />
<start type="script"><![CDATA[
JS.eval ("$('html,body').css({scrollTop: 0});")
msg ("All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. <br/><br/>All work and no play makes Jack a dull boy. <br/>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. <br/><br/>All work and no play makes Jack a dull boy. <br/>All work and no play makes Jack a dull boy. <br/>All work and no play makes Jack a dull boy. <br/><br/><br/>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.<br/>")
// JS.eval ("setTimeout(function(){document.getElementById('divOutput').scrollIntoView(true);},500)")
JS.eval ("$('html,body').css({scrollTop: 0});")
]]></start>
<inituserinterface type="script">
firsttime {
JS.eval ("$('html,body').css({scrollTop: 0});")
}
JS.eval ("scrollToEnd = function(){};")
</inituserinterface>
</game>
<object name="room">
<inherit name="editor_room" />
<isroom />
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
<object name="lamp">
<inherit name="editor_object" />
<take />
</object>
</object>
<function name="InitInterface"><![CDATA[
firsttime {
JS.eval ("$('html,body').css({scrollTop: 0});")
}
JS.eval ("scrollToEnd = function () {};")
// Added by KV for transcript
// Use JSSafe to remove any offensive characters! - KV May 27, 2018
jsgamename = JSSafe(game.gamename)
JS.eval ("var gameName = '"+jsgamename+"';var transcriptName = gameName;")
if (GetBoolean(game,"savetranscript")) {
JS.eval ("var savingTranscript = true;")
JS.replaceTranscriptString (game.transcriptstring)
}
// End of addition by KV for transcript
if (game.setcustomwidth) {
JS.setGameWidth (game.customwidth)
}
if (game.setcustompadding) {
JS.setGamePadding (game.custompaddingtop, game.custompaddingbottom, game.custompaddingleft, game.custompaddingright)
}
if (game.externalstylesheets <> null) {
foreach (stylesheet, game.externalstylesheets) {
JS.addExternalStylesheet (stylesheet)
}
}
if (game.setbackgroundopacity) {
SetBackgroundOpacity (game.backgroundopacity)
}
SetBackgroundColour (game.defaultbackground)
SetForegroundColour (game.defaultforeground)
SetLinkForegroundColour (game.defaultlinkforeground)
if (LengthOf(game.backgroundimage) > 0) {
SetBackgroundImage (game.backgroundimage)
}
JS.setCompassDirections (Join(game.compassdirections, ";"))
JS.setInterfaceString ("InventoryLabel", "Inventory")
JS.setInterfaceString ("StatusLabel", "Status")
JS.setInterfaceString ("PlacesObjectsLabel", "Places and Objects")
JS.setInterfaceString ("CompassLabel", "Compass")
JS.setInterfaceString ("InButtonLabel", "in")
JS.setInterfaceString ("OutButtonLabel", "out")
JS.setInterfaceString ("EmptyListLabel", "(empty)")
JS.setInterfaceString ("NothingSelectedLabel", "(nothing selected)")
JS.setInterfaceString ("TypeHereLabel", "Type here...")
JS.setInterfaceString ("ContinueLabel", "Continue...")
JS.SetMenuBackground (game.menubackground)
JS.SetMenuForeground (game.menuforeground)
JS.SetMenuHoverBackground (game.menuhoverbackground)
JS.SetMenuHoverForeground (game.menuhoverforeground)
JS.SetMenuFontName (game.menufont)
JS.SetMenuFontSize (game.menufontsize + "pt")
if (not game.underlinehyperlinks) {
JS.TurnOffHyperlinksUnderline ()
}
ResetCommandBarFormat
if (game.showcommandbar) {
JS.uiShow ("#txtCommandDiv")
}
else {
JS.uiHide ("#txtCommandDiv")
}
if (HasString(game, "panelcontents")) {
SetFramePicture (game.panelcontents)
}
if (game.gridmap) {
JS.ShowGrid (game.mapsize)
Grid_SetScale (game.mapscale)
if (game.pov <> null) {
if (game.pov.parent <> null) {
Grid_Redraw
Grid_DrawPlayerInRoom (game.pov.parent)
}
}
}
// Added by the Pixie
// Note that panesVisible in playercore.js must be updated too
// This line will get the save confirmation to appear in the right font and colour
JS.setCss ("body", "color:" + game.defaultforeground + ";font-family:" + game.defaultfont + ";font-size:" + game.defaultfontsize + "pt;")
// various new options
if (HasString(game, "bordercolour")) {
JS.setCss ("#gameBorder", "border-left:1px solid " + game.bordercolour + ";border-right:1px solid " + game.bordercolour)
}
if (not game.classiclocation) {
JS.setCss ("#status", "background-image:none")
if (HasString(game, "customlocationcolour")) {
JS.setCss ("#status", "background-color:" + game.customlocationcolour)
}
else {
JS.setCss ("#status", "background:transparent")
}
if (HasString(game, "customlocationtextcolour")) {
JS.setCss ("#status", "color:" + game.customlocationtextcolour)
}
if (HasString(game, "customlocationbordercolour")) {
JS.setCss ("#status", "border:1px solid " + game.customlocationbordercolour)
}
else {
JS.setCss ("#status", "border:none")
}
}
// request (Show, "Location")
if (game.showlocation) {
JS.uiShow ("#location")
JS.setCss ("#status", "display:block")
}
else {
JS.setCss ("#status", "display:none")
}
if (HasString(game, "marginscolour")) {
JS.setCss ("body", "background-color:" + game.marginscolour)
}
if (game.turnoffsavebutton) {
JS.setCss ("#controlButtons", "display:none")
}
if (game.turnoffcompass) {
JS.setCss ("#compassLabel", "display:none;")
JS.setCss ("#compassAccordion", "display:none;")
}
if (game.turnoffinventory) {
JS.setCss ("#inventoryLabel", "display:none")
JS.setCss ("#inventoryAccordion", "display:none")
}
if (game.turnoffplacesandobjects) {
JS.setCss ("#placesObjectsLabel", "display:none")
JS.setCss ("#placesObjectsAccordion", "display:none")
}
if (game.statusandcompassattop) {
JS.eval ("$('#commandPane').insertBefore('#inventoryLabel')")
JS.eval ("$('#customStatusPane').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
}
if (game.showpanes and game.commandpane) {
JS.setCss ("#commandPane", "display:block")
}
if (game.showpanes and game.customstatuspane) {
JS.setCss ("#customStatusPane", "display:block")
}
if (game.colourblend) {
JS.colourBlend (game.colourblendtop, game.colourblendbottom)
}
if (game.borderlesscursor) {
JS.addScript ("<style>#txtCommand { outline:none; border:none; margin:0; padding:0; width:100px; background-color:transparent;}</style>")
JS.setCss ("#txtCommandDiv", "color:" + game.defaultforeground)
JS.eval ("$('#txtCommandPrompt').html('" + game.commandcursor + "')")
}
else if (game.shadowbox) {
JS.addScript ("<style>#txtCommand { outline:none; border:none; margin:2px; padding:7px; width:100 px;box-shadow: 0px 0px 15px 5px #888;}</style>")
}
if (game.panestheme = "Midnight") {
JS.setPanes ("white", "midnightblue", "midnightblue", "skyblue")
}
if (game.panestheme = "Nature") {
JS.setPanes ("#A1C935", "#254117", "#306754", "#A1C935", "green")
}
if (game.panestheme = "Parchment") {
JS.setPanes ("#493D26", "#FAEBD7", "#FAEBD7", "#493D26", "#C88141")
}
if (game.panestheme = "Vanilla") {
JS.setPanes ("black", "white")
}
if (game.panestheme = "Black") {
JS.setPanes ("orange", "black", "black", "orange")
}
if (game.panestheme = "Blood") {
JS.setPanes ("orange", "#800000", "#800000", "orange", "yellow")
}
if (game.panestheme = "Tranquil") {
JS.setPanes ("midnightblue", "skyblue", "white", "midnightblue", "blue")
}
if (game.respondtogridclicks) {
JS.respondToGridClicks (true)
}
//
// -----------------------------------------------------------------------
// This is in the original, but must come last
if (not game.showborder) {
JS.hideBorder ()
}
if (game.showpanes) {
JS.panesVisible (true)
}
else {
JS.panesVisible (false)
}
JS.getDivCount ()
if (not game.pov = null) {
JS.updateLocation (CapFirst(GetDisplayName(game.pov.parent)))
}
if (game.feature_devmode) {
setDevMode
}
InitUserInterface
if (HasScript(game, "inituserinterface")) {
do (game, "inituserinterface")
}
]]></function>
</asl>
Does that work, KV? I can't test it due to lack of desktop editor. However, my attempt looks like this:
<!--Saved by Quest 5.8.6794.35054-->
<asl version="580">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="scrolling test">
<gameid>3299d493-5c3d-4cee-a09f-4c1120f6eae7</gameid>
<version>1.0</version>
<firstpublished>2021</firstpublished>
<feature_advancedscripts />
<menufont>Georgia, serif</menufont>
<start type="script"><![CDATA[
msg ("---- insert a metric buttload of lorem ipsum here ----")
]]></start>
<inituserinterface type="script">
firsttime {
JS.eval ("$('html,body').css({scrollTop: 0});")
}
JS.eval ("scrollToEnd = function(){};")
</inituserinterface>
</game>
<object name="room">
<inherit name="editor_room" />
<isroom />
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
</asl>
It seems to work.
I wonder if I'm misunderstanding the request. Or if the behaviour is browser-dependant… does my test game work for you?
Does that work, KV?
Negative.
Neither my test game nor your test game behave as expected. (They both scroll to the end after the initial text prints.)
It must be a browser thing, like you say. I'm only testing these in the desktop version of Quest.
SIDENOTE
The other day, I kept sending my mom texts saying "All work and no play makes Jack a dull boy." over and over again.
She called after the third text, saying, "stop that! You're freaking me out!!!"
Bwahahahaha!
@mrangel
I went ahead and tried the scrolling test on browser and then tried downloading it on desktop, the text started at the top on the online version, but not the desktop version. Combined with what K.V. said, it seems like it's an issue with the desktop version. I'm going to go ahead and say case closed since I doubt there's any way to fix it from here.
SUCCESS! The issue resolved itself somehow. I don't know why or how, but the text no longer starts at the bottom of the Start Script paragraphs.
Here we go… scrollTop has bugs in Chrome version 60 and earlier.
jQuery has workarounds for inconsistent behaviour, so changing .css({scrollTop: 0}) to .scrollTop(0) should make it work on desktop. (I can't test this, as I don't have a Windows machine to test it on, but it seems likely)
This is also the reason the built-in scrollToEnd method is so complex – so that it animates scrolling on browsers that support scroll-top as a CSS property, and uses Element.scrollTop as a backup for older browsers.
Ha. Without looking it up, I'm gonna say Quest has Chromium 39 in it.
I will test this and be right back.
Nope.
Still didn't fix it in either test game on my machine.
EDIT
Could it have something to do with the min-height of the initial element rather than the scrollToEnd() function?
It seems like I remember something like this involving the min-height. . .
Follow us on Facebook
Follow @TextAdv on Twitter