Pause code until it's in the browser window

Question

I am using a jquery plugin called 'typed' that types out sentences, one after the other. this is great but I was wondering if it would be possible to pause the code until the text area was visible in the browser window?

As I want people to be able to see the first sentence that is typed, but currently you would miss the first sentence as it's not visible from the top of the page.

This is the page I'm working on: http://jakdesign.webflow.com/

This is the code in the head of the html:

$(document).ready(function( $ ) {
    $("#hero-text").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    });
});

This is the plugin: https://rawgithub.com/morr/jquery.appear/master/jquery.appear.js

whats the correlation between typed and appear plugin. – bhb Oct 03 '13 at 08:55 — bhb, Oct 03 '13 at 08:55

nrodic · Answer 1 · 2013-10-03T09:16:01.157

1

You want to initialize typed when element becomes visible, don't you? Then try something like this:

$(document).ready(function( $ ) {
    $("#hero-text").one("appear", function() {
        $(this).typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });
});

Of course, this requires jQuery.appear plugin.

edited Oct 03 '13 at 09:16

answered Oct 03 '13 at 09:10

nrodic

3,026
3
33
38

+1 for this actually solves the problem right away. I didn't notice earlier the Op was already using the appear plugin. – Abhitalks Oct 03 '13 at 09:22
`.one(`? Shouldn't that be `.on`? – Aaron Digulla Oct 03 '13 at 09:29
1

@AaronDigulla No, `one()` executes handler at most once: [documentation](http://api.jquery.com/one/) – nrodic Oct 03 '13 at 09:34
But using window.onload will completely avoid.. jQuery.appear plugin. Why use wrappers where we can simply avoid them (as per convenience)... I think that way – DarkHorse Oct 03 '13 at 09:40
@DarkHorse But it wouldn't start typed plugin only when element becomes visible, as OP requests. – nrodic Oct 03 '13 at 09:41

DarkHorse · Answer 2 · 2013-10-03T09:03:40.420

0

document ready is fired when the DOM has loaded, so all widget attributes are not retrieved completely.

window onload waits for the assets in the page to be completely loaded - so information and attributes of tag are available completely.

So this will work for you:

function typed() {
    $("#hero-text").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    });
}

    <body onload="typed()">

OR In script do this

window.onload = function(){
    $("#hero-text").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
}

edited Oct 03 '13 at 09:03

answered Oct 03 '13 at 08:58

DarkHorse

2,740
19
28

Better jQuery syntax: `$(window).on("load", function(){...});`. See also http://api.jquery.com/load-event/ – Aaron Digulla Oct 03 '13 at 09:08
I sometimes avoid using jQuery wherever I can.. for simple function like window.onload. Its just wrapper over window.onload.. :) – DarkHorse Oct 03 '13 at 09:12

Pause code until it's in the browser window

2 Answers2