3

I've looked at a lot of posts, but unfortunately my knowledge of JS is fairly low. Ok, extremely low. I am pretty decent with CSS and HTML, though. So my issue is this:

I'm using the awesome typed.js element (https://github.com/mattboldt/typed.js/)

HTML I'm using for it is here:

    <h1 style="color:#000;" class="nk-title">The perfect
                            <span class="db hidden-sm-up"></span>
                            <span style="color:#000;" class="nk-typed">

                                <span> ^1000 birthday gift.</span>
                                <span> ^1000 business jingle.</span>
                                <span> ^1000 marketing idea.</span>
                                <span> ^1000 love dedication.</span>
                                <span> ^1000 event promo.</span>


                            </span>

This creates a cool typing feature (check it out at druvocals.com/1 to see)

The ^1000 delays the text from typing and puts an animated blinking cursor. So the ^1000 doesn't actually show up on the page. It gives it a realistic typing pause.

But what's happening on slower connections, is that the first line (^1000 birthday gifts) seems to be showing as is, with the ^1000 displayed on the page, before the JS fully loads. So on slower connections, the page will first show as "The perfect ^1000 birthday gift" before kicking back and displaying it correctly.

From my searching here on Stackoverflow, I believe I need to be heading toward the direction of a .load function, correct? I don't want to hide the entire body until JS is fully loaded; just this one area.

Or could I possibly wrap that entire HTML in a separate div, and somehow hide the div until the typed.js file is completely loaded/rendered?

Smith
  • 31
  • 2
  • yup. It generally takes some time for the javascript to kick in. To prevent the flash, your best option is to hide the whole body, or some div wrapper of the content by css and then display it by javascript. – Martin Gottweis Nov 22 '16 at 18:25
  • 2
    Possible duplicate of [Hiding everything until the page has finished loading](http://stackoverflow.com/questions/22095529/hiding-everything-until-the-page-has-finished-loading) – Martin Gottweis Nov 22 '16 at 18:26
  • So you're saying, put that HTML in a div, and hide the div fully until the JS is loaded? Am I right? – Smith Nov 22 '16 at 18:26
  • Correct. I would add `loaded` class to `body` by javascript. This way you can do the whole thing in css. You can even add a nice transition so it's extra nice. – Martin Gottweis Nov 22 '16 at 18:28
  • 1
    using a library for something like this is overkill imo. this is like [6 lines of code](https://jsfiddle.net/wtc1q7b4/) – I wrestled a bear once. Nov 22 '16 at 18:28
  • Is there a way to backspace on that example you just showed? – Smith Nov 22 '16 at 18:32
  • @MartinGottweis is there a link you can give me to explain in detail how to do this? – Smith Nov 22 '16 at 18:33
  • [here's one with the cursor](https://jsfiddle.net/b5rr29so/).. – I wrestled a bear once. Nov 22 '16 at 18:35
  • @Iwrestledabearonce. that looks simple enough. is there an example of one with it backspacing also, so I can do it like i have in my page? – Smith Nov 22 '16 at 18:38
  • @Smith - Put it in an answer. If that resolved your problem please remember to hit the checkmark by the answer. Good luck. – I wrestled a bear once. Nov 22 '16 at 19:33

0 Answers0