samsam Posted January 8, 2021 Share Posted January 8, 2021 (edited) Site URL: https://www.oceanoculus.com/ I added Squarespace's members area to my website and now the banner images in each of my index pages have been shrunk 😢. It seems to be a problem with a 'typing effect' code block I have inserted in the first index page. If I remove this, then the banner images revert to their correct size. Note that the banner images were functioning correctly with the code block in place until I added the members area... This is the code block that produces the typing effect <div class="container"> <h1 style="color: #4794d8"> Changing Our World, <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["One Story at a Time", "One Action at a Time", "One Study at a Time", "One Step at a Time"]' style="color: #F36639"></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #F36639; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 6); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> <div style="text-align:center"><span style="font-weight: bold">Ocean Oculus brings you some of the best science and stories from the sea <div style="text-align:center"><span style="font-weight: bold">(and occasionally from the other 30% of our World)</span></div  Any thought would be very much appreciated 🙂 Thanks very much! Edited January 8, 2021 by samsam more information Link to comment
tuanphan Posted January 9, 2021 Share Posted January 9, 2021 Can you enable members area? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
samsam Posted January 9, 2021 Author Share Posted January 9, 2021 5 hours ago, tuanphan said: Can you enable members area? We can check easier It is already enabled (just went back and looked at the settings). At the moment, the only indication of a members area is the "sign in" link in the main navigation bar. Thanks in advance for your help Link to comment
samsam Posted January 11, 2021 Author Share Posted January 11, 2021 I've found a workaround... remove the text after the typewriting effect script and insert it in it's own text box. It's added more white space than I wanted, but the functionality is back so I can live with that. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment