Hey
Today I got a challenge, I had to create a agreement textbox which wouldn’t allow the user to check the “I agree” checkbox unless they have scrolled to the button on all text. So I thought for a while and then I thought, well why not add an HTML component which will hold the text and then make a script inside that HTML that measure when the user have scrolled to the buttom and when they done that, post a message back to Wix Code telling that.
It works like a charm so I thought I should share with you all.
Code for HTML Component:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
</html>
<body>
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height()-5) {
window.parent.postMessage("done", "*");
} else {
window.parent.postMessage("notdone", "*");
}
});
</script>
<style>
.agreement {
color: #000000;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 32px;
margin: 0 0 24px;
height: 100%;
width: 100%;
border: 0px solid #DDD;
padding: 15px;
}
</style>
<div id="agreement" class="agreement">
<h3>Release & Agreement</h3>
Agreement text here
</div>
</body>
Code in your Wix Code page
$w.onReady(function () {
$w("#agreementHtml").onMessage( (event) => {
let receivedData = event.data;
if (receivedData === "done") {
$w("#agreeGroup").show("FadeIn");
} else {
$w("#agreeGroup").hide("FadeOut");
}
});
});
So when user have scrolled through all text the agree box is shown, otherwise it is hidden.
Happy coding from wixshow.com author Andreas Kviby.