Hello, everyone.
I'm developing a page where there is a hidden button that appears after a certain time.
My code:
HTML:
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script><divclass="diminuir-video" style="padding:30.25% 0 0 0;position:relative;
max-width: 800px;">
<iframe src="LINK_DO_VIDEO"
style="position:absolute;top:0;left:0;width:100%;height:100%;" autoplay
width="840" height="550" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen id="video"></iframe>
</div>
<div class="show--div-20sec">
<p><a href="https://google.com.br" target="_blank"
class="btn-01">TESTE</a>
</p>
</div>
</div>
<script
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src="js/index.js"></script>
In JS I have the function for the div to be displayed after 18:40:
$(function() {
var iframe = $('#video')[0];
console.log()
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause() {
}
function onFinish() {
}
var time;
if (localStorage.getItem('cache') === 'true') {
time = 0;
} else {
time = 1120;
localStorage.setItem('cache', 'true');
}
function onPlayProgress(data) {
if (data.seconds >= time) {
$('.show--div-20sec').css('display', 'block')
}
}
});
What I would need now is that when the user reloads the page, instead of waiting at 6:40 p.m. to reappear the button, it appears immediately.
Thank you!