typed.js execution when scrolled

Question

I'm a beginner - just saying.

I'm trying out different .js files available online and I found typed.js.

But what if I have my own website and want to execute typed code when I scroll to a certain element of the page?

I got this:

<script type="text/javascript" src="js/typed.js"></script>
<script>
    $(function(){
                    $("#typed").typed({
                        strings: ["Are you somehow interested?"],
                        typeSpeed: 30
                    });
                });
</script>

in the end of my HTML file.

How to run this code when I reach the specific div or h1 or whatever?

Is there any online source where I can learn how to do it?

Thanks!

you could use waypoints.js http://imakewebthings.com/waypoints/ it allows you to bind a function when a DOM element is reached upon scroll — GrafiCode, Oct 11 '15 at 12:45
Possible duplicate of [How to detect scroll position of page using jQuery](http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery) — try-catch-finally, Oct 11 '15 at 13:13

score 2 · Answer 1 · answered Oct 11 '15 at 13:16

First of all have a method which will check if the user is scrolled to a div as following:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Then add event listener to window scroll as following:

$(window).scroll(function() {    
    if(isScrolledIntoView($('#theTarget')))
    {
        //the div is now visible to user. here add your script
        $("#typed").typed({
                strings: ["Somehow interested?"],
                typeSpeed: 20
        });
    }    
});

score 0 · Answer 2 · answered Oct 11 '15 at 13:00

0

Try this:

var hasScrolledPast = false;
window.onscroll = function() {
    if (window.scrollTop > whereYouWantToScrollDownTo && !hasScrolledPast) {
        hasScrolledPast = true;
        // do your code here.
    }
};

answered Oct 11 '15 at 13:00

Robert Moore

2,207
4
22
41

score 0 · Answer 3 · edited Oct 20 '15 at 18:46

<script>

    $(window).on('scroll', function() {
        var y_scroll_pos = window.pageYOffset;
        var scroll_pos_test = 1800;             // set to whatever you want it to be

        if(y_scroll_pos > scroll_pos_test) {
    //do stuff
            $(function(){
                $("#typed").typed({
                    strings: ["Zainteresowany?"],
                    typeSpeed: 20
                });


            });
            setTimeout(function() {
                $(function(){
                    $("#typed2").typed({
                    strings: ["Skontaktuj się z nami!"],
                    typeSpeed: 20
                });})}, 4000);
        }
    });
</script>

This solved the problem of waiting for another function to execute, but now there is another problem.

typed.js execution when scrolled

3 Answers3