Hi Guys,
I have finally managed to get a good html animation fro my progress bar. However, the animation starts the moment the page is load, but not when I scroll to it. I’ve tried using the on viewport code but still couldn’t get around it. Any idea how I can resolve this?
Here is the link:
https://jermaiinelim.wixsite.com/mysite-2
You are sending a message to the HtmlComponent when the html5_viewportEnter() function is triggered, but your embedded code (in the HtmlComponent ) does not handle the message.
See the article Corvid: Working with the HTML Element for information on working with the HtmlComponent . Refer to the article section Receiving a Message from Page Code in an HTML Element to see how to handle a message that’s sent to the embedded code.
Hi Yisrael, Thank you for the tip. Do I just copy and past that into my HTML like this?
<script type="text/javascript">
//when a mesage is received from page code
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
</script>
<script type="text/babel">
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
@jermainelim Yes, you need to add the message handler to your HtmlComponent code. When the message handler receives the appropriate message, you can then start the code running.
@yisrael-wix its still not working. I don’t think I did it right.
HTML:
<!DOCTYPE html>
<html>
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
</script>
<script src="https://unpkg.com/scrollreveal"></script>
<body>
<div id="container"></div>
<script type="text/javascript" src="/js/babel/babel.js"></script>
<script
type="text/javascript"
src="/js/lib/dummy.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<style id="compiled-css" type="text/css">
#container {
margin: 20px;
width: 200px;
height: 200px;
position: relative;
}
</style>
<script type="text/javascript">
//when a mesage is received from page code
window.onmessage = (event) => {
if (event.data) { document.getElementById("container").innerHTML = event.data;
let receivedData = event.data;
}
};
</script>
<script type="text/babel">
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
</script>
</body>
</html>
Wix code:
export function html5_viewportEnter(event) {
let targetId = event.target.id;
}
Your page code is not sending a message to the HtmlComponent. See the section Sending a Message from Page Code to an HTML Element to learn how to send a message to the embedded code in the HtmlComponent. See the section Receiving a Message from Page Code in an HTML Element to see how to handle a message that’s sent to the embedded code. Once you receive the message, you can then run the animation of your script.
See the section Example - Messaging Demonstration for a full explanation of how to perform the messaging between the page code and HtmlComponent code.
And then, take a look at a couple of full examples of HtmlComponents:
Embed Google Map on your site with multiple location markers , marker clustering, and custom controls using the HTML component.
This example demonstrates the requestFullscreen method of the HTML fullscreen API as used to change a specified element to full screen.
My animation is already running. But it ran before I scroll down to the html.
@jermainelim And that’s the point - it shouldn’t be “already running”. Your code in the HtmlComponent shouldn’t run the animation until it gets the message from the page.
@yisrael-wix I got the html from a website. So I’m confuse as to how to edit it. So sorry about it.
@yisrael-wix Am I right by adding this to my HTML code?
@jermainelim No, the code that you added doesn’t do what you want. Please realize that you can’t just “copy and paste” code from random sources and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.
You will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Corvid Resources page provides tutorials, examples, and articles on getting the most out of Corvid. We are happy to get you pointed in the right direction, but you’ll need to take it from there. As questions or difficulties arise, we are here to help.
You may want to check out the WixArena - it’s a hub where you can look for Corvid experts for hire.
@yisrael-wix I’ve managed to get the animation running on Safari on viewport but not on other web browser. Does that mean the code is still not working?
@jermainelim That code you added is JQuery, which is a modified version of Javascript, and it will not be supported by default on most devices.
Try importing it into your iframe:
https://code.jquery.com
Also, as much as I like the name of your function loadDaBars() , it’s not defined.
@skmedia I’ve tried a new code for my iFrame. Not sure if I did to right.
<script src=“https://code.jquery.com/jquery-3.4.1.min.js”
** integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=”**
** crossorigin=“anonymous”>**
Wix code:
export function html6_viewportEnter(event) {
// send message to the HTML element
let targetId = event.target.counter; //“counter”
$w(“#html6”).postMessage(“Message for HTML Comp”);
}
$w.onReady( function () {
// when a message is received from the HTML element
$w(“#html6”).onMessage( (event) => {
let receiveData = event.data;
} );
} );
@jermainelim You don’t have to receive any message from the iframe in your page, so creating the respond function is unnecessary. You also dont need to define targetId, as you’re not doing anything with it. And you’re also not using JQuery anymore so you can delete the head section as well.
@skmedia Would this be right? It is still not running on viewportEnter on Chrome.
export function html6_viewportEnter(event) {
// send message to the HTML element
$w(“#html6”).postMessage(“Message for HTML Comp”);
}
@jermainelim As of right now, it doesn’t matter what message you send to the iframe, any will work. But I agree with @yisrael-wix , there’s no way around it. You should either spend some time learning JS or spend a little bit of money on a dev (hi!).
You’re kind of trying to perform surgery with a chainsaw right now.
I’m just doing it for a charity website as a volunteer. No coding needed, but just curious on how it would work. Thanks for your help anyway. 
Sure thing. In either case, you got a taste of the hell that is cross-browser compatibility.