Test
Loading...
// Set an interval to check for the existence of the element const interval = setInterval(function() {
// Find the target element you want to style const iframe = document.querySelector("#fc_widget");
// If the element exists if (iframe) {
// Clear the interval to stop checking clearInterval(interval);
//Below block pulled from: https://javascript.plainenglish.io/how-to-detect-clicks-into-an-iframe-using-javascript-e70685bbe5ea //Use blur listener to listen for a click on the iframe focus(); const listener = window.addEventListener('blur', () => { if (document.activeElement === document.querySelector('#fc_widget')) {
//Show the reset button now that the iframe has been interacted with document.querySelector('#reloadButton').style.display = "block";
}; window.removeEventListener('blur', listener); //Remove blur after 1 click });
// Add the margin-left style to the element iframe.style.marginLeft = "10px";
//once we load the widget. Hide the loading element after 10 seconds setTimeout(function() { const preloaderSection = document.querySelector("#preloaderSection"); preloaderSection.style.display = "block"; }, 5000);
} }, 100); // Check every 100 milliseconds
//Add event listener to the reload button to reset the page document.querySelector('#reloadButton').addEventListener('click', () => {
location.reload();
});
//Disable the button (because we hide it. It is necessary to keep as it seems to push down the header when in an iframe) document.querySelector('#reloadButton').disabled = true
//Function to be run on window resize and page load. This function checks for a window size of 370px or less. If it is less, we hide the image and resize the coverupexit div. This is necessary as things get too crowded if the user is on mobile (Initially tested with iPhone 14 Pro) const toggleExitCoverUp = () => {
//Init the elements const div = document.getElementById('coverUpExit'); const img = document.querySelector('#coverUpExit img');
//Check if the window is 370 px or less if (window.innerWidth <= 370) { //if it is, update the image to be reduced //Assign updated stylings div.style.right = "10px"; //Hide image // img.style.display = 'none'; img.style.height = '-5px'; } else { //if it isn't 370px or less, reset styling to normal //Re-assign original styling of the elements div.style.right = "10px"; //Show image img.style.height = '20px'; }; }; // Listen for window resizing window.addEventListener('resize', function() { //Toggle on window resize toggleExitCoverUp() }); //Toggle on load toggleExitCoverUp()
let element = document.createElement('style'); element.setAttribute('type', 'text/css');
let css = `
iframe {
margin-left: 0px !important;
}
.preloaderText { position: relative; font-weight: bold; font-size: 2.6em; color: #000; display: inline-block; }
.preloaderText .preloaderElipses { display: block; position: absolute; bottom: 0; animation-name: preloaderElipses; -webkit-animation-name: preloaderElipses; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.preloaderText .preloaderElipses:nth-child(1) { left: 100%; } .preloaderText .preloaderElipses:nth-child(2) { left: calc(100% + 10px); animation-delay: 200ms; } .preloaderText .preloaderElipses:nth-child(3) { left: calc(100% + 20px); animation-delay: 400ms; }
@keyframes preloaderElipses { 0% {bottom: 0;} 25% {bottom: 3px;} 27% {bottom: 0;} 100% {bottom: 0;} }
`
if ('textContent' in element) { element.textContent = css;
} else {
element.styleSheet.cssText = css; }
document.getElementsByTagName('head')[0].appendChild(element);