JS equivalent to the MORE command in Linux or Unix [SOLVED]

I'm wondering if anyone may know how to use JS to do that 'MORE' thing when the text fills more than the height of the divOutput element.


I tried to find the code in the Parchment source code (because this feature exists when using Parchment to play Inform or Infocom games in the Z-code format in-browser), but I'm just not good enough at JS to reverse engineer it (or to even find it).

Does anyone have any experience with this (or any insights)?


Interesting ^_^

It's not the height of the divOutput element, though, but the height of the window. Because divOutput grows to fill its content.
I think that shouldn't be too hard.

What you want is probably a fixed-height container div inserted around divOutput, whose height is recalculated at the end of addText, so that it grows to the size of divOutput if the change is less than the screen height, or gains a bottom-aligned "More" button.

I'll look at it when I'm not so rushed with actual work stuff.


I've been 'tinkering around'...

All I've done is 'disable' JS.scrollToEnd() by adding this to my JS:

var scrollToEndBak = scrollToEnd;

scrollToEnd = function(){
}

Now, when I print a lot of text to the screen, I can press SPACEBAR to go through it, one window-full of text at a time, until I hit the text input field.

So, it looks like it's already 90% set up. It just needs to act like I pressed SPACEBAR immediately after I entered my command, then display "PRESS SPACEBAR FOR MORE" when the text input field isn't visible. (Or something to that effect.)


Now my brain's in gear I'm looking at more elegant options. I'm thinking the jQuery inview plugin is probably a good way to trigger it.

I'm thinking I'd add a function scrollForward that implements most of the function of existing scrollToEnd; except that it scrolls at most 80% of the window height, and displays a floating div with a "More ... (press any key)" message if it didn't reach the bottom. The input box's onview event can then be used to hide the more banner. The banner would grab focus, and have keypress and onclick events that call scrollForward again.

Then override scrollToEnd so that it flashes the more banner if it's currently visible (so timer events get the player's attention but don't scroll to the bottom when you're looking back), and calls scrollForward otherwise.


Hmm... that's still wonky in some circumstances. Possibly keep a running total of how far scrollForward has scrolled the screen; and reset it to zero any time the player enters a command, and when the more banner is hidden (only when it goes from visible to hidden: so when the player clicked it, or pressed space, or scrolls down manually, but not when scrolled by a call to addTextAndScroll). So the 80% limit applies to the total height of messages while the player isn't paying attention, rather than the size of a single msg.


I keep coming back to this one, but it keeps kicking my butt.

Do you happen to have working code, mrangel?

(It just looks like you got at least a little something going on, and none of my attempts worked at all. (Either nothing scrolled, or it scrolled like it normally would.))


mrangel,

What is your favorite, out of your Kindle books?


I think my personal favourite is probably Sandpaper Kiss; the novel. I put so much effort into that one, and I still like it. (Though I can see how I would have done some bits differently in hindsight). It's a hard question... having to choose when I've spent so much time and effort polishing all of them. And got sick of the sight of many of the covers.

I've been focusing my promotional effort this month on the scifi collections. A Dozen Skies was free last week; A Dozen Tomorrows will be free Wed-Sun next week; and A Dozen Experiments later this month. Desperately trying to get people to read and review them, to push my author rank up in the scifi category. That way, when I release Pasts and Futures at the start of December (a larger collection, including those 3 dozens plus about a dozen new stories), it will start higher on the "new release" charts, and be more visible to people who might buy it.


I'll definitely read and review each dozen. The first dozen was (or would that be 'were'?) quite enjoyable.


I got sidetracked... (I'm a master of digression.)

I bet I can just use JS to set the vertical position of the current divOutputAlign to 0 when the new element contains too much text for the screen to hold. Then, show the More (press SPACEBAR) prompt, as mrangel suggested, and SPACEBAR will already take you down, page by page, from there.


Thanks :) All the dozen books should be available on Kindle Unlimited if you have a subscription (you pay a monthly fee, and I get ½¢ per page); except for Curiosities, Secrets, and Quests (which are now bundled in the larger collection Into Dreams so I could do a paperback release). Every review helps :p

I've been looking at combining better scrolling control with the text-delay JS I was posting in another thread. That would probably need the scrolling modified anyway, so I might as well focus on making the 'more' banner in a way that works with that. Maybe add the possibility of slideshow-type transitions using jQuery's toggle styles. Making a 'more' script that works with the other UI stuff I'm doing should be no harder than making a stand-alone one; but doing it like that (hopefully) will result in something that works neatly whether you use the delay thing or not.


Oh, I don't want to cause you extra work, mrangel. I just thought you might have something worked up already...


How does it work when someone without a subscription "buys" a free book? Is that just you giving the book away in hopes of getting reviews?


Also, I just realized it may seem like I was trying to trade one thing for the other. Nothing could be further from the truth.

Just for the record: if I read a story all the way through, it's because the story is good (or at least most of it is). Also, all of my reviews are honest. (Whatever I'm reviewing has to have blown me away to get 5 stars, by the way. I may have only ever given maybe 10 - 20 things 5-star reviews, now that I think about it... Is that wrong of me? Should I reassess my methods?)

I know you probably didn't take it that way, but I wanted to be sure you knew my feedback on Amazon was on the level instead of maybe thinking I was just pandering for code. ( I assume you probably desire brutally honest feedback. I know I do.)

Most of the things I'm trying to pull of right now (AGAIN [solved], the MORE prompt, TRANSCRIPT (thought it was solved, but it crashes Pertex's browser for some reason (I think it's the JS print() function doing it, but that's just a theory)), and RESTART [solved by you for online players] in particular) are just to provide everyone with a way to add the common commands (which have been pretty much standard to text adventures for nearly 40 years) to their games.


This is pretty much what I want it to do, but I haven't fooled around with the actual MORE prompt being displayed yet:


>CLICK HERE TO SEE OLD CODE
<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="moreprompt">
    <gameid>eb32db88-9eef-4ee5-9c2a-8be2560af571</gameid>
    <version>0.0.6</version>
    <firstpublished>2017</firstpublished>
    <subtitle>version{game.version}</subtitle>
    <start type="script">
      JS.eval ("var scrollToEndBak = scrollToEnd;function scrollToEnd(){};setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[Press SPACEBAR to navigate through the text.<br/><br/>Enter {command:TEST} to test it out!]]></description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command>
    <pattern>test</pattern>
    <script><![CDATA[
      msg ("A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>A lot of text!<br/><br/>")
    ]]></script>
  </command>
  <turnscript name="more">
    <enabled />
    <script>
      JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
      // JS.eval ("var a = $('#txtCommand');alert(a.offset().top);")
    </script>
  </turnscript>
</asl>

Enter TEST to print the long text.

Press SPACEBAR to progress through the text.


NOTE: This appears to work online and offline now.


TODO:

Find out how to check if $('#txtCommand') is actually on the screen. If not, display "Press SPACEBAR for More!".


How does it work when someone without a subscription "buys" a free book? Is that just you giving the book away in hopes of getting reviews?

Pretty much. I get 35% or 70% of actual sales (after a nominal fee for bandwidth), nothing on freebies, and some amount per page on subscription reads.

Find out how to check if $('#txtCommand') is actually on the screen. If not, display "Press SPACEBAR for More!".

There's a jQuery event that triggers when an element moves in or out of the viewable area; can't remember it off the top of my head, though. Having the scroll event not trigger until that happens would probably help fix the annoying issues on Chrome on Android, too.


Pretty much.

I shall avoid that, then. Lest I improve my review-writing skills.

I had a short run with Kindle publishing. I always went for 70% with no extra marketing, but my stuff was pretty much HVAC tips and information, so it didn't do very well.

I always wondered if the amount-per-page counted if someone re-read the same story over and over. I assume it does, and Amazon has a very detailed sales summary page, so I'm sure I could have figured that out, had I actually taken 1/10th of the time it just took me to type all of this out.

...but I digress.

Point is, I'll probably end up with Kindle Unlimited next month, and I'll be checking out more of your stuff.

I'm putting Sandpaper Kiss on my wish-list, so I don't go crazy trying to find the title in this post once I'm monetarily prepared.


There's a jQuery event that triggers when an element moves in or out of the viewable area;

I just read about that, but wasn't smart enough to think of your next statement:

Having the scroll event not trigger until that happens would probably help fix the annoying issues on Chrome on Android, too.

Argh! That's pretty smart!

I'm off to check my browser history!


Here's the example game:

https://textadventures.co.uk/games/view/5s7a_xwkdekpm1v2cpzqpw/moreprompt


I found two different methods that are supposed to trigger on a scroll event (neither work for me):

JS.eval("$('#txtCommand').appear(function() {$('#morePrompt').css('display', 'none');});")
JS.eval("$('#txtCommand').waypoint(function() {$('#morePrompt').css('display', 'none');});")

Maybe it's because #txtCommand is in the window, it's just not in view.


Looks like it might be a plugin function; I saw it in passing while looking for something else, so didn't check in too much detail.

https://github.com/morr/jquery.appear/blob/master/jquery.appear.js ← Here's the JS. Might be worth including that JS, or examining it to see how it does its job and including a minimalist version of the code.


Here's the bit of code that makes the spacebar scroll down (from playercore.js):

    $("#txtCommand").bind("inview", function (event, visible) {
        // allows spacebar to scroll browser when txtCommand is not visible
        if (visible == true) {
            $("#txtCommand").focus();
        } else {
            $("#txtCommand").blur();
        }
    });

Hrmm....

Seems like this would work (but it doesn't):

JS.eval ("$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) {  if (visible == true) {    $('#morePrompt').css('display', 'none');     $('#txtCommand').focus();  } else {    $('#morePrompt').css('display' 'block');    $('#txtCommand').blur();  }});")

EDIT:

That was missing a comma (as mrangel points out later).

Here it is corrected:

JS.eval ("$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) {  if (visible == true) {    $('#morePrompt').css('display', 'none');     $('#txtCommand').focus();  } else {    $('#morePrompt').css('display', 'block');    $('#txtCommand').blur();  }});")

It works once I put that darned comma in there!


That looks like it should work to me. Maybe there's an issue somewhere else in the game you're testing it on.

Also, it may be worth using $('#morePrompt').show() and $('#morePrompt').hide() rather than the css() equivalents, just to make it more readable (and shorter).


It appears to be the same issue as when I change the border color of the text input field:

It is reset every turn.

I have a JS.#text# command set up, which has the script JS.eval(text).

I can use JS.eval("$('#morePrompt').onfocus = function(){$('#morePrompt').hide()};$('#morePrompt').onblur = function(){$('#morePrompt').show()};"), and you can see it change for a split second in the developer window.

Now, I can do this every turn to keep the CSS how I want it:

JS.addText("<style>#txtCommand{border:1px solid green;}</style>")

...but I have no clue how to plug in an onfocus or onblur like that. Plus, I'm not 100% sure it would even work. Just theorizing.


Got it!

Start script

JS.addText ("<div id='morePrompt' style='display:none;position:absolute;right:0;'>Press SPACEBAR to scroll down</div>")
JS.eval ("$('#morePrompt').insertBefore($('#location'));hideMore = function(){  $('#morePrompt').hide();};showMore = function(){  $('#morePrompt').show();};setupTxt = function(){document.getElementById('txtCommand').addEventListener('blur', showMore);document.getElementById('txtCommand').addEventListener('focus', hideMore);};var scrollToEndBak = scrollToEnd;function scrollToEnd(){};setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")

Turn script

JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);setupTxt()")

...now where should I insertBefore or insertAfter?

I have it before the location element, but that's not always there.

I assume inserting something before something that doesn't exist might not work out well...

Going to test it.


Okay...

First off, thanks, mrangel!!!


This works in the desktop player.

I'll probably change the opacity, the background color, and the position, but it works well:

```

http://play2.textadventures.co.uk/Play.aspx?id=5s7a_xwkdekpm1v2cpzqpw

"More" doesn't show up at all in Firefox or Chrome.

Also, still need to find some element to insertBefore or insertAfter, in case the location isn't present.

I shall test, update, and return.


Rather that insertAfter('body'), you might want appendTo('body').

I can't see why binding the inview event normally doesn't work. Changing the style for $("#txtCommand") will revert every turn, but that shouldn't touch the events unless I'm really missing something. It bugs me when something's behaving in a way I can't understand.


OK ... looking through your code snippets so far:

Seems like this would work (but it doesn't):
JS.eval ("$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) { if (visible == true) { $('#morePrompt').css('display', 'none'); $('#txtCommand').focus(); } else { $('#morePrompt').css('display' 'block'); $('#txtCommand').blur(); }});")

The above code is missing a comma. Not sure if it would work otherwise; I can't test it from here.

It appears to be the same issue as when I change the border color of the text input field:

It is reset every turn.

setCommandBarStyle(style) seems to be called every turn (I have no idea why that would be desirable), and includes the line $("#txtCommand").attr("style", style);. That resets all CSS properties currently set on the object; but only CSS, and I can't find any trace of a similar reset for event handlers.

If you want to change the colour of the command bar, you probably need to override setCommandBarStyle() with a version that doesn't reset your changes.

I can use JS.eval("$('#morePrompt').onfocus = function(){$('#morePrompt').hide()};$('#morePrompt').onblur = function(){$('#morePrompt').show()};"), and you can see it change for a split second in the developer window.

Not sure why it changes for a split second; I wouldn't expect that to work at all. Remember, $("#morePrompt") is a jQuery collection with one member, not a DOM object. It doesn't have an onfocus attribute.
(playing around with a jsFiddle ... turns out that trying to set an onfocus property of a jQuery object will set the attribute on the underlying DOM elements, then immediately delete it again. I don't know why, but it appears to happen. Lesson here: don't use .onfocus on a jQuery object)

So ... you want to either use a DOM object with GetElementById() (which may work on some browsers but should not be relied on), or use the jQuery methods designed for the purpose: $('#morePrompt').focus(function() { ... function body here ... });.


JS.eval("$('#morePrompt').onfocus = function(){$('#morePrompt').hide()};$('#morePrompt').onblur = function(){$('#morePrompt').show()};")

Should have been:

JS.eval("$('#txtCommand').focus= function(){$('#morePrompt').hide()};$('#txtCommand').blur= function(){$('#morePrompt').show()};")

The second one works online!

Yippee!


jQuery works online, DOM works offline. No vice-versa.

Gotta run somewhere real quick, but I'll fix it with an online player check upon return.

Thanks again, mrangel! (I'm still looking into to your other suggestions, too.)


I wouldn't expect that to work either :p I assume that's a discrepancy between the code you're actually using and what you entered in the forum.


Yeah, I have no clue what I did before I left. I was trying things during play.

These all show or hide the morePrompt element when playing in Firefox (I think this is what I tried before I left...):


> JS.$('#morePrompt').show()

> JS.$('#morePrompt').hide()

> JS.document.getElementById('morePrompt').hide()

> JS.document.getElementById('morePrompt').show()

> JS.document.getElementById('morePrompt').style.display = "block";

> JS.document.getElementById('morePrompt').style.display = "none";

I always think people are changing the code before posting, too (because they usually are), but, if I ever have that going on, it's because I changed the code after posting it. (EDIT: So, you assumed correctly, mrangel. Hehehe. Sorry about that.)

Here's the game's code:

Click here for old code.
<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="moreprompt">
    <gameid>eb32db88-9eef-4ee5-9c2a-8be2560af571</gameid>
    <version>0.0.11</version>
    <firstpublished>2017</firstpublished>
    <subtitle>version{game.version}</subtitle>
    <feature_advancedscripts />
    <showlocation />
    <start type="script"><![CDATA[
      JS.addText ("<div id='morePrompt' style='display:none;position:absolute;bottom:10px;right:10px'>Press SPACEBAR</div>")
      JS.eval ("$('#morePrompt').insertBefore($('#location'));hideMore = function(){  $('#morePrompt').hide();};showMore = function(){  $('#morePrompt').show();};if (webPlayer){  setupTxt = function(){    $('#txtCommand').focus= function(){      $('#morePrompt').hide();    };    $('#txtCommand').blur= function(){      $('#morePrompt').show();    };  };}else{  setupTxt = function(){    document.getElementById('txtCommand').addEventListener('blur', showMore);    document.getElementById('txtCommand').addEventListener('focus', hideMore);  };};var scrollToEndBak = scrollToEnd;function scrollToEnd(){};setTimeout(function(){  $('html,body').animate({    scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12  }, 0);}, 100);")
    ]]></start>
    <inituserinterface type="script">
    </inituserinterface>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[Press SPACEBAR to navigate through the text.<br/><br/>Enter {command:TEST} to test it out!<br/><br/>]]></description>
    <beforeenter type="script">
    </beforeenter>
    <enter type="script">
    </enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command>
    <pattern>test</pattern>
    <script><![CDATA[
      i = 42
      while (i>0) {
        msg ("Line "+i)
        i = i - 1
      }
    ]]></script>
  </command>
  <turnscript name="more">
    <enabled />
    <script><![CDATA[
      JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
      JS.addText ("<style>#morePrompt { font-weight: bold; position: absolute; background: #603010;color: #FFFFCC;opacity: 0.5;padding: 2px 6px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}</style>")
      JS.setupTxt ()
    ]]></script>
  </turnscript>
  <command name="JScmd">
    <pattern>JS.#text#</pattern>
    <script>
      JS.eval (text)
    </script>
  </command>
</asl>

Play begins:

image


After entering TEST:

image


After pressing SPACEBAR:

image


I just realized I posted the wrong link earlier:

Game's page:
http://textadventures.co.uk/games/view/5s7a_xwkdekpm1v2cpzqpw/moreprompt

Directly to the game:
http://play2.textadventures.co.uk/Play.aspx?id=5s7a_xwkdekpm1v2cpzqpw


Hey...

I remember having to use a setTimeout to get addText to work from a JS function...

I wonder if this would work that way.


I removed the line $("#txtCommand").attr("style", style); from ```setCommandBarStyle(style), and that did make the color stick without having to use a turn script, but, as we knew, it didn't help this.

Just for sh-ts and giggles, I did this:

setCommandBarStyle = function(){
}

...but I didn't notice anything behave differently, besides the border color staying what I changed it to.

I wonder where it gets the style parameter from. ...or where that function is called.

I, like you, mrangel, wish to understand why Quest (or anything) is behaving the way it is.


...and I just saw where I was missing the comma from the 'inview' thing.

I'm going to try that out, with the comma this time.


Hey, mrangel!

That missing comma was the key, or the monkey wrench, I guess.

Here's code that works online and offline:

>Click here for old code.
<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="moreprompt">
    <gameid>eb32db88-9eef-4ee5-9c2a-8be2560af571</gameid>
    <version>0.0.13</version>
    <firstpublished>2017</firstpublished>
    <subtitle>version{game.version}</subtitle>
    <feature_advancedscripts />
    <showlocation />
    <start type="script"><![CDATA[
      JS.addText ("<div id='morePrompt' style='display:none;position:absolute;bottom:10px;right:0px;font-weight: bold; position: absolute; background: #603010;color: #FFFFCC;opacity: 0.5;padding: 2px 6px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'>Press SPACEBAR</div>")
      JS.eval ("$('#morePrompt').insertBefore($('#location'));$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) {  if (visible == true) {    $('#morePrompt').css('display', 'none');     $('#txtCommand').focus();  } else {    $('#morePrompt').css('display', 'block');    $('#txtCommand').blur();  }});")
    ]]></start>
    <inituserinterface type="script">
    </inituserinterface>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[Press SPACEBAR to navigate through the text.<br/><br/>Enter {command:TEST} to test it out!<br/><br/>]]></description>
    <beforeenter type="script">
    </beforeenter>
    <enter type="script">
    </enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command>
    <pattern>test</pattern>
    <script><![CDATA[
      i = 42
      while (i>0) {
        msg ("Line "+i)
        i = i - 1
      }
    ]]></script>
  </command>
  <turnscript name="more">
    <enabled />
    <script>
      JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
    </script>
  </turnscript>
  <command name="JScmd">
    <pattern>JS.#text#</pattern>
    <script>
      JS.eval (text)
    </script>
  </command>
</asl>

It's updated online now, too.

Game's page:
http://textadventures.co.uk/games/view/5s7a_xwkdekpm1v2cpzqpw/moreprompt

Directly to the game:
http://play2.textadventures.co.uk/Play.aspx?id=5s7a_xwkdekpm1v2cpzqpw


When I did $('#morePrompt').appendTo($('body'));, it only appeared once.

It stayed in place and scrolled up with the rest of the body after that.


When I did $('#morePrompt').appendTo($('body'));, it only appeared once.

It stayed in place and scrolled up with the rest of the body after that.

You have position: absolute in the CSS; which means the coordinates are relative to its closes absolutely positioned ancestor. I assumed you'd be using position: fixed, which makes coordinates relative to the browser window.


Duh!

I need someone to slap me every once in a while!


>VIEW THE OLD CODE
<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="moreprompt">
    <gameid>eb32db88-9eef-4ee5-9c2a-8be2560af571</gameid>
    <version>0.1.0</version>
    <firstpublished>2017</firstpublished>
    <subtitle>version{game.version}</subtitle>
    <feature_advancedscripts />
    <showlocation />
    <stuff><![CDATA[<div id='morePrompt' style='display:none;position:fixed;top:90%;right:20px;font-weight: bold; background: #603010;color: #FFFFCC;opacity: 0.5;padding: 2px 6px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'>Press SPACEBAR</div>]]></stuff>
    <start type="script">
      msg (game.stuff)
      JS.eval ("$('#morePrompt').appendTo($('body'));$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) {  if (visible == true) {    $('#morePrompt').css('display', 'none');     $('#txtCommand').focus();  } else {    $('#morePrompt').css('display', 'block');    $('#txtCommand').blur();  }});")
    </start>
    <inituserinterface type="script">
    </inituserinterface>
    <showpanes />
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[Press SPACEBAR to navigate through the text.<br/><br/>Enter {command:TEST} to test it out!<br/><br/>]]></description>
    <beforeenter type="script">
    </beforeenter>
    <enter type="script">
    </enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command>
    <pattern>test</pattern>
    <script><![CDATA[
      i = 42
      while (i>0) {
        msg ("Line "+i)
        i = i - 1
      }
    ]]></script>
  </command>
  <turnscript name="more">
    <enabled />
    <script>
      JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
    </script>
  </turnscript>
  <command name="JScmd">
    <pattern>JS.#text#</pattern>
    <script>
      JS.eval (text)
    </script>
  </command>
</asl>

Game's page:
http://textadventures.co.uk/games/view/5s7a_xwkdekpm1v2cpzqpw/moreprompt

Directly to the game:
http://play2.textadventures.co.uk/Play.aspx?id=5s7a_xwkdekpm1v2cpzqpw


I think I'll put a setTimeout on the "inview" function. (The more prompt appears for a second every time the text input field pops out of view now. I think I'll give it 1 second before it runs the function. (This may not work. I think I really need to set a delay before it checks whether the element is in view.)))


I set _animateScroll to false instead of using the setTimeout.

Revised code:

<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="moreprompt">
    <gameid>eb32db88-9eef-4ee5-9c2a-8be2560af571</gameid>
    <version>0.1.4</version>
    <firstpublished>2017</firstpublished>
    <subtitle>version{game.version}</subtitle>
    <start type="script"><![CDATA[
      msg ("<div id='morePrompt' style='display:none;position:fixed;bottom:10%;right:20px;font-weight: bold; background: #5c9ccc;color: #FFFFCC;opacity: 0.7;padding: 2px 6px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'>SPACEBAR to scroll down</div>")
      JS.eval ("_animateScroll = false;$('#morePrompt').appendTo($('body'));$('#txtCommand').unbind('inview');$('#txtCommand').bind('inview', function (event, visible) {  if (visible == true) {    $('#morePrompt').css('display', 'none');     $('#txtCommand').focus();  } else {    $('#morePrompt').css('display', 'block');    $('#txtCommand').blur();  }});")
    ]]></start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[Press SPACEBAR to navigate through the text.<br/><br/>Enter {command:TEST} to test it out!<br/><br/>]]></description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command>
    <pattern>test</pattern>
    <script><![CDATA[
      i = 84
      while (i>0) {
        msg ("Line "+i)
        i = i - 1
      }
    ]]></script>
  </command>
  <turnscript name="moreTurnscript">
    <enabled />
    <script>
      JS.eval ("setTimeout(function(){$('html,body').animate({scrollTop: $('.section"+(game.lastoutputsection)+"').offset().top - 12}, 0);}, 100);")
    </script>
  </turnscript>
  <command name="JScmd">
    <pattern>JS.#text#</pattern>
    <script>
      JS.eval (text)
    </script>
  </command>
</asl>

Log in to post a reply.

Support

Forums