search

HubSpot / odometer

Smoothly transitions numbers with ease. #hubspot-open-source
http://github.hubspot.com/odometer/docs/welcome
MIT License
7.3k stars 713 forks source link

Doesn't work when loaded with jQuery.load #90

Closed steve-rhodes closed 9 years ago

steve-rhodes commented 9 years ago

here is a very simple example:

it includes the links for css and js

This one works.

<div class="odometer odometer-auto-theme">4137</div>

<link rel="stylesheet" href="/services/odometer-theme-car.css" type="text/css" />

<script type="text/javascript" src="/services/odometer.min.js"></script>

when I load it into another html with jQuery load, odometer doesn't run. I don't know why.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="Container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
    jQuery(function(){
        jQuery("#Container").load("/services/odotest.html");
    });
</script>

</body>
</html>
steve-rhodes commented 9 years ago

I solved the problem

The html load was not finished rendering when the odometer.js began. Therefore the odometer.js could not find any odometer class to target yet. I had to wait for a while and then initialise manually. First I thought that putting the initialisation in the second part of the .load (called after completion) as a function would solve my problem, but it didn't. In the end I had to make a compromise and wait for a while before initialising the meters to make sure they exist in the DOM.

 jQuery(function(){
        jQuery("#Container").load("/services/TZ.html");

        setTimeout(function() {
            // Insert code to be executed AFTER
            // the page renders the markup
            // added using html(...) here

            var el = document.querySelector('.btodometer');
            od = new Odometer({
                el: el,
                value: 0,
format: (,ddd),

            });

        }, 1000);

    });