Tutorial: Creating a custom stats numbers bar that uses html iFrame and starts on viewport.

Ask the community
,
1

Hello guys!
i hope you are doing well.

So, i spent a few hours figuring how to do this. there are very little information available, so i played around to get it working.

The Issues:

  1. Wix doesn’t have the stats number counter widget yet.

  2. Using a custom JS to count up the numbers is not efficient; numbers will be glitching while counting up.

  3. Using an HTML iFrame is good, but not good enough if you want to start the count up when the the numbers are in the view point.

  4. Wix doesn’t support “play once only per load” using WixCode. I have figured out how to go around it.

The Solution for each:

  1. Create your own using HTML iFrame.

  2. Use JQuery instead.

  3. send a message between the HTML iFrame and wix.

  4. adjust the function in JS to play only once.

Okey so here is the results
https://cacafofo54.wixsite.com/mysite-4

Maybe there is a simpler way to do that. but i am not an expert.

Here are a few notes:

  1. in the JS script:
    window.onmessage = (event) => {
    if ( event.data == true ) {
    myFunc() ;
    }
    };

function myFunc() {
myFunc = function(){}; // kill it as soon as it was called

      //the code

};

// windows.onmessage is used to receive a message from the Wix website.
// event.data is the data received. Here, i sent " true " from the Wix website. " true " gets sent when an anchor is on " ViewportEnter "
//the " myFunc() " function will make sure the code run only once; Doesn’t matter how many times “ViewportEnter” got activated.

  1. in the wix page code.

export function anchor4_viewportEnter(event) {
$w(“#StatsHTML”).postMessage( true );
}
//StatsHTML is the name of the HTML iFrame.
//send “true” to the HTML iFrame.

The rest of the code is just some CSS and HTML.

Feel free to ask any questions or please suggest a better way if you know any!

Here is the full code:

HTML iFrame:

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

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Stats</title> <meta name="viewport" content="width=device-width, initial-scale=0"> 

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp'> 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> 

</head>

<body>
    <div id="projectFacts" class="sectionClass">
        <div class="fullWidth eight columns">
            <div class="projectFactsWrap ">
                <div class="item wow fadeInUpBig animated animated" data-number="25" style="visibility: visible;">
                    <i class="fas fa-stethoscope">
</i>
                    <p id="number1" class="number">0</p>
                    <span></span>
                    <p>YEARS OF PRACTICE</p>
                </div>
                <div class="item wow fadeInUpBig animated animated" data-number="288751" style="visibility: visible;"> <i class="fas fa-user-md"></i>
                    <p id="number2" class="number">0</p>
                    <span></span>
                    <p>CONSULTATIONS</p>
                </div>
                <div class="item wow fadeInUpBig animated animated" data-number="20135" style="visibility: visible;">
                    <i class="fas fa-syringe"></i>
                    <p id="number3" class="number">0</p>
                    <span></span>
                    <p>OPERATIONS</p>
                </div>
                <div class="item wow fadeInUpBig animated animated" data-number="6245" style="visibility: visible;"> <i class="fas fa-clock"></i>
                    <p id="number4" class="number">0</p> <span></span>
                    <p>TEACHING OPHTHALMOLOGIST</p>
                </div>
            </div>
        </div>
    </div>
    <style>
        @import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);
body {
    font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: transparent;
    ;
    position: relative;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fullWidth {
    width: 100% !important;
    display: table;
    float: none;
    padding: 0;
    min-height: 1px;
    height: 100%;
    position: relative;
}

.projectFactsWrap {
    display: flex;
    margin-top: 0px;
    flex-direction: row;
    flex-wrap: wrap;
}

#projectFacts .fullWidth {
    padding: 0;
}

.projectFactsWrap .item {
    width: 25%;
    height: 100%;
    padding: 0px 0px;
    text-align: center;
}

.projectFactsWrap .item:nth-child(1) {
    background: transparent;
}

.projectFactsWrap .item:nth-child(2) {
    background: transparent;
}

.projectFactsWrap .item:nth-child(3) {
    background: transparent;
}

.projectFactsWrap .item:nth-child(4) {
    background: transparent;
}

.projectFactsWrap .item p.number {
    font-size: 40px;
    padding: 0;
    font-weight: bold;
}

.projectFactsWrap .item p {
    color: transperant;
    font-size: 18px;
    margin: 0;
    padding: 0px;
    font-family: 'Open Sans';
}

.projectFactsWrap .item span {
    width: 60px;
    background: rgba(255, 255, 255, 0.8);
    height: 2px;
    display: block;
    margin: 0 auto;
}

.projectFactsWrap .item i {
    vertical-align: middle;
    font-size: 50px;
    color: rgba(60, 60, 60, 1);
}

.projectFactsWrap .item:hover i,
.projectFactsWrap .item:hover p {
    color: black;
}

.projectFactsWrap .item:hover span {
    background: transparent;
}

@media (max-width: 786px) {
    .projectFactsWrap .item {
        flex: 0 0 0%;
    }
}

</style> <script> $.fn.jQuerySimpleCounter=function( options) {
    var settings=$.extend( {
        start: 0, end: 100, easing: 'swing', duration: 400, complete: ''
    }
    , options);
    var thisElement=$(this);
    $( {
        count: settings.start
    }
    ).animate( {
        count: settings.end
    }
    , {
        duration: settings.duration, easing: settings.easing, step: function() {
            var mathCount=Math.ceil(this.count);
            thisElement.text(mathCount);
        }
        , complete: settings.complete
    }
    );
}

;
window.onmessage=(event)=> {
    if (event.data==true) {
        myFunc();
    }
}

;
function myFunc() {
    myFunc=function() {}
    ; // kill it as soon as it was called
    $('#number1').jQuerySimpleCounter( {
        end: 25, duration: 3000
    }
    );
    $('#number2').jQuerySimpleCounter( {
        end: 288750, duration: 3000
    }
    );
    $('#number3').jQuerySimpleCounter( {
        end: 20135, duration: 2000
    }
    );
    $('#number4').jQuerySimpleCounter( {
        end: 6245, duration: 2500
    }
    );
}

;
</script> </body> </html>

Wix Page Code

export function anchor4_viewportEnter(event) {
    $w("#StatsHTML").postMessage(true);
}