Howdy, Stranger!

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

Typed.js Inline typewriter effect

After finding this thread: https://twinery.org/forum/discussion/3033/is-there-a-way-to-make-text-appear-as-rpg-games

I managed to get typed.js into my Harlowe twine using /u/TheMadExile 's example.

I have been trying to display typed out text after static text on the same line. The way to do this I think is through the css in the script:
/*! typed.js integration module for Harlowe */
!function(){"use strict";var getInlineOptions=function(name){var match,options={},typedRe=/^typed(?:-(\w+))+\b$/,parseRe=/-(speed|delay)(\d+)\b/g;if("typed"!==name&&typedRe.test(name))for(;null!==(match=parseRe.exec(name));)switch(match[1]){case"speed":options.typeSpeed=+match[2];break;case"delay":options.startDelay=+match[2]}return options},typedCallbackFactory=function(el,callback){return function(){var $outer=jQuery(el),$inner=jQuery('<div class="typedjs-text-wrapper" style="display:block;position:absolute;left:0;top:0;"><span class="typed"></span></div>'),$source=$outer.children('tw-hook[name|="typed"]'),options=jQuery.extend({typeSpeed:40,startDelay:400},getInlineOptions($source.attr("name")),{strings:[$source.html()]});"function"==typeof callback&&(options.callback=callback),$outer.append($inner),$inner.children().typed(options)}};window.startTypedModule=function(){jQuery('tw-hook[name|="typed"]').addClass("typed").css("visibility","hidden").wrap('<div class="typedjs-outer-wrapper" style="display:block;position:relative;"></div>');for(var $elements=jQuery("tw-passage .typedjs-outer-wrapper"),callback=null,i=$elements.length-1;i>=0;--i)callback=typedCallbackFactory($elements[i],callback);"function"==typeof callback&&callback()}}();

I have changed the sections of style to this
style="display:inline-block;position:absolute;left:0;"
and this
style="display:inline"
respectively, and while the typing text now displays inline, it wraps to the next line way too early and moves half the line to the one below mid way through.

I hope this has made a bit of sense, I'm struggling a little after plugging in different ideas. If there was a way to simply disable the wrapping function that would help but I can't seem to find it.
Thanks in advance :)

Comments

  • edited December 2016
    warning: the follow changes will result in your instance of Typed.js only supporting inline output.

    Do the following changes to the typed.js integration module for Harlowe code.

    1. The styling of typedjs-outer-wrapper classed element:
    Change it's display property from block to inline.

    2. The styling of typedjs-text-wrapper classed element:
    Replace all of it's existing styling with only display:inline;

    3. The CSS added to the tw-hook[name|="typed"] jQuery element:
    Replace the css("visibility","hidden") with css("display","none"), the reason for doing this is that an invisible element still takes up layout space and this results in the typed text appearing below that black space.
  • greyelf wrote: »
    warning: the follow changes will result in your instance of Typed.js only supporting inline output.

    Do the following changes to the typed.js integration module for Harlowe code.

    1. The styling of typedjs-outer-wrapper classed element:
    Change it's display property from block to inline.

    2. The styling of typedjs-text-wrapper classed element:
    Replace all of it's existing styling with only display:inline;

    3. The CSS added to the tw-hook[name|="typed"] jQuery element:
    Replace the css("visibility","hidden") with css("display","none"), the reason for doing this is that an invisible element still takes up layout space and this results in the typed text appearing below that black space.



    Thanks for helping with this, but I've still got the same issue. Inline text wraps much too early and only displays in a small column. I have attached an example twine to show what I mean
  • but I've still got the same issue
    That's because you did not follow step 2 correctly, it asked you to replace ALL the existing styling (eg. display:block;position:absolute;left:0;top:0;) on the typedjs-text-wrapper classed element with only display:inline;.

    (You also removed the position:relative; property from the styling of typedjs-outer-wrapper classed element, which step 1 did not ask you to do but that is not that important.)
  • Thanks so much that fixed it! I accidentally mixed up outer-wrapper ad text-wrapper, hence the confusion. :smile:
  • edited December 2016
    This issue is resolved now, how do I mark it as such
  • If this topic is a Question there should be a button on the page you can use to mark it as Answered, I don't know exactly where that button appears or what it's exact wording is though. (I have never asked a question so I have never needed to click on the button. lol)

    If this topic is a Discussion then you can't.
Sign In or Register to comment.