›

Howdy, Stranger!

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

Sign In Register

Categories

Twine output file automatically scrolls to bottom or middle

platypustwineplatypustwine
in Help! with 2.0
So I'm currently testing out my semi-finished product, and most if not all pages longer than a single screen length are loading in the middle of or at the bottom of each page. Did I do something wrong, or is it a bug? And if I have to do some kind of workaround, is there anything I can do? It would be nice if readers began at the top of the page.

Comments

  • greyelfgreyelf
    Which story format did you use when creating your story HTML file?

    Which browser (brand/version) and OS (brand/version) are you testing the story on?
  • platypustwineplatypustwine
    Apologies. Format is Harlowe 1.0.1. Using Firefox 35.0 on Windows 8 (not 8.1). A friend has reported the same issue with my file, which I sent to him.
  • greyelfgreyelf
    The Harlowe story format contains code that should scroll the user to the top of the page when showing a new passage.

    $('html').scrollTop(stretch ? newPassage.offset().top - $(window).height() * 0.05 : parent.offset().top );
    I created a new story HTML containing a couple of passages with multiple pages worth of text in each and it preformed correctly using Firefox 35, but I am using Windows 7 so it may be a version 8 only issue.

    Does your story have custom CSS in it?
    Would you be willing to make a copy of your story HTML file available for debugging purposes?
  • platypustwineplatypustwine
    No CSS yet. I can't attach the file (too big) so I'll just post the link to a copy of the file in my OneDrive. If it doesn't work let me know.

    https://onedrive.live.com/redir?resid=C33077BF9C9F3FF5!1461&authkey=!AI9WtWBLFYZe1D4&ithint=file,html
  • cassiealexandercassiealexander
    I had that problem, I switched from Harlowe to Sugarcube and it went away.
  • greyelfgreyelf
    platypustwine wrote:

    No CSS yet. I can't attach the file (too big) so I'll just post the link to a copy of the file in my OneDrive. If it doesn't work let me know.

    https://onedrive.live.com/redir?resid=C33077BF9C9F3FF5!1461&authkey=!AI9WtWBLFYZe1D4&ithint=file,html

    Sorry for the delay.

    I viewed your file on my Windows 7 in a number of different browsers, viewing both the Epilog and the page displayed before it, both of which have text longer that my screen and there were no issues with scroll to top.

    You can either wait for someone with Windows 8+ to look at your issue or take cassiealexander suggestion on trying SugarCube.
  • st33dst33d
    I just tested this on Windows 7 on Chrome and the bug is still there and still in effect.

    Just dump a load of Lorem Ipsum in one passage, scroll to bottom, link to next page of LI, and there you go - it doesn't scroll to the top.  (And no - this problem doesn't occur in Firefox or Internet Explorer 11.)

    This is a serious problem for my project as it's very confusing for the player - they won't think to scroll up.

    I cannot switch to SugarCube or whatever without spending months rewriting my project. For now I'm going to have to dump img-hack javascript after every long passage.

    If I sound a bit pissed, it's because Twine 2 deleted a load of my work yesterday, fucked with the layout this morning and then deleted more work I did ages ago. It's testing my patience.

    Attached is a demo of the bug. Test it in Chrome.
  • greyelfgreyelf
    After further testing st33d example on Windows 7 using both the link and the console I had the following results:

    1. Firefox 35 and IE 11: The page scrolls to the top automatically when using the link to display passage 2, it also scrolls to the top if I issue "$('html').scrollTop(0);" in the console, but not when I issue the same against the "body" tag.

    2. Chrome 40: The page does not scroll automatically when using the link to display passage 2, but it does scroll to top if I issue "$('body').scrollTop(0);" in console but not when I issue the same call against the "html" tag.

    So Chrome may need to use the "body" tag and the other two the "html" tag.
  • TheMadExileTheMadExile
    One of the issues is that it should probably be targeting either window or document.  For example:

    // scroll Y axis only
    $(window).scrollTop(0); // targeting document should also work
    Why it's targeting the <html> element instead (equivalent to document.documentElement), I don't know.


    Secondly, I can't think of a normal situation where the default should be to reset the vertical scroll only, so it should probably be calling scrollLeft() as well.  For example:

    // scroll X & Y axes
    $(window).scrollLeft(0).scrollTop(0);

    Thirdly, unless something special is going on, using jQuery for this seems a tad silly as window.scroll() is as old as dirt.  For example:

    // scroll X & Y axes
    window.scroll(0, 0);
  • st33dst33d
    Is there a way I can fix this Harlowe bug without adding scripts to every single passage in my entire story because it may be read on a small device?

    I'm actually at that stage. I can't move forward without a fix for this bug.

    My 1st draft is finished but I can't show it to anyone with this bug still in effect.
  • LL
    First, let me say that I'm very sorry this has happened. This is my fault and I regret that I've ruined your development process like this.

    That being said: I can't actually reproduce this scrolling bug at the moment, using either Chrome 40 Mac or Firefox 35 Mac, running both my own tests (with links at the bottom of multiple screens of text) and those of the attached file earlier in this thread.

    But, based on the description of the problem, I think it might be hacked out by adding this to Story Javascript:

    $.fn.scrollTop = function(){return this};
    $('html').on('click', 'tw-link[passage-id]', function(){ window.scroll(0,0); });
    If this doesn't work, do reply here with haste.
  • st33dst33d

    liuet wrote:

    I was dealing with this bug a while ago, and there was another thread similar to this one that had a solution that was to add this to the Story JS:document.onclick = function() {
    window.scrollTo(0, 0);
    }
    It seems to have solved the issue for me?


    I don't recommend doing this - it means that every click will scroll to the top. Any hooks or fancy stuff you do will be for naught because the page will jump to the top with every click.

    L wrote:

    $.fn.scrollTop = function(){return this};
    $('html').on('click', 'tw-link[passage-id]', function(){ window.scroll(0,0); });


    Yes, this works. I think I'm on Chrome 39 here - so it may be that the Chrome team fucked this up.

    Thankyouthankyouthankyouthankyouthankyouthankyouthankyouthankyouthankyouthankyou.
Sign In or Register to comment.