StampJonah Posted May 24, 2023 Share Posted May 24, 2023 (edited) Hi all, As the title says, when editing my page I can see my embedded script in the right location, pictured below: It's also important to note that it is aligned left perfectly on the edited site. Here is a picture of it on the live site, not aligned left (A longer word will make it appear far more to the left) Maybe pointless to include a screenshot of the mobile considering it is not even showing up. Any clue why this could be happening? Please help, this is the last step I have until It's finally done...! Edited May 24, 2023 by StampJonah typo Link to comment
Ziggy Posted May 24, 2023 Share Posted May 24, 2023 (edited) I've found that adding this Custom CSS really helps with the warning message on code blocks: https://squarefortytwo.com/squarespace-guides/spacing-issue-on-code-block-warning-message html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script { display: none !important; } Edited May 24, 2023 by Ziggy Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
StampJonah Posted May 24, 2023 Author Share Posted May 24, 2023 Oh ok I throw this into design -> custom css? Link to comment
StampJonah Posted May 24, 2023 Author Share Posted May 24, 2023 13 minutes ago, Ziggy said: I've found that adding this Custom CSS really helps with the warning message on code blocks: https://squarefortytwo.com/squarespace-guides/spacing-issue-on-code-block-warning-message html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script { display: none !important; } So, it got rid of the warning message which is nice, maybe it helped a little bit. But, the finished product still is off of the same space. I can move it on the edited site to be off space and it can get CLOSE, but I may have to edit the code to adjust the pixels to get the right positioning. Now the other issue is that it's not aligned left on the live site, but it IS on the edited site.. WTF! :( Here's my code.. <!DOCTYPE html> <html> <head> <title>Vertical Carousel</title> <style> .carousel-text { position: absolute; top: 50%; top: calc(50% + 15px); left: 50%; transform: translate(-50%, -50%); font-size: 5em; font-weight: 800; color: white; opacity: 0; transition: opacity 1s, color 1s; font-family: 'Kanit', sans-serif; text-align: left; padding: 0 5px; box-sizing: border-box; width: calc(100% - 10px); } .carousel-text.active { opacity: 1; top: calc(50% + 20px); /* Adjusted top value to move down by 10 pixels */ } </style> <link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet"> </head> <body> <div id="carousel-container"> <div class="carousel-text" style="color: #ff6b6b;">Song.</div> <div class="carousel-text" style="color: #ffb347;">Book.</div> <div class="carousel-text" style="color: #ffd1dc;">Article.</div> <div class="carousel-text" style="color: #a0c4ff;">Video.</div> <div class="carousel-text" style="color: #9fdf9f;">Album.</div> <div class="carousel-text" style="color: #f0e68c;">Thesis.</div> <div class="carousel-text" style="color: #f4a460;">Podcast.</div> <div class="carousel-text" style="color: #b39ddb;">Novel.</div> <div class="carousel-text" style="color: #ffcc80;">Website.</div> <div class="carousel-text" style="color: #90caf9;">Organization.</div> <div class="carousel-text" style="color: #80cbc4;">Magazine.</div> <div class="carousel-text" style="color: #ffab91;">Speech.</div> <div class="carousel-text" style="color: #81d4fa;">Dissertation.</div> </div> <script> window.onload = function() { const texts = document.querySelectorAll('.carousel-text'); let index = 0; let colorIndex = 0; const colors = ['#ff6b6b', '#ffb347', '#ffd1dc', '#a0c4ff', '#9fdf9f', '#f0e68c', '#f4a460', '#b39ddb', '#ffcc80', '#90caf9', '#80cbc4', '#ffab91', '#81d4fa']; texts[index].style.opacity = '1'; texts[index].style.color = colors[colorIndex]; setInterval(() => { texts[index].style.opacity = '0'; index++; colorIndex++; if (index === texts.length) { index = 0; } if (colorIndex === colors.length) { colorIndex = 0; } setTimeout(() => { texts[index].style.color = colors[colorIndex]; texts[index].style.opacity = '1'; }, 1000); }, 3000); } </script> </body> </html> Link to comment
StampJonah Posted May 24, 2023 Author Share Posted May 24, 2023 I have a carousel coded that provides examples of media and shows up in different colors to introduce the viewer to our mission. Here is my code: <!DOCTYPE html> <html> <head> <title>Vertical Carousel</title> <style> .carousel-text { position: absolute; top: 50%; top: calc(50% + 40px); /* Adjusted top value to move down by 10 pixels */ left: 50%; transform: translate(-50%, -50%); font-size: 3.5em; /* Adjusted font size to be 50% smaller */ font-weight: 800; color: white; opacity: 0; transition: opacity 1s, color 1s; font-family: 'Kanit', sans-serif; text-align: center; /* Aligned text to center */ padding: 0 5px; box-sizing: border-box; width: calc(100% - 10px); } .carousel-text.active { opacity: 1; } </style> <link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet"> </head> <body> <div id="carousel-container"> <div class="carousel-text" style="color: #ff6b6b;">Song.</div> <div class="carousel-text" style="color: #ffb347;">Book.</div> <div class="carousel-text" style="color: #ffd1dc;">Article.</div> <div class="carousel-text" style="color: #a0c4ff;">Video.</div> <div class="carousel-text" style="color: #9fdf9f;">Album.</div> <div class="carousel-text" style="color: #f0e68c;">Thesis.</div> <div class="carousel-text" style="color: #b39ddb;">Novel.</div> <div class="carousel-text" style="color: #ffab91;">Speech.</div> </div> <script> window.onload = function() { const texts = document.querySelectorAll('.carousel-text'); let index = 0; let colorIndex = 0; const colors = ['#ff6b6b', '#ffb347', '#ffd1dc', '#a0c4ff', '#9fdf9f', '#f0e68c', '#f4a460', '#b39ddb', '#ffcc80', '#90caf9', '#80cbc4', '#ffab91', '#81d4fa']; texts[index].style.opacity = '1'; texts[index].style.color = colors[colorIndex]; setInterval(() => { texts[index].style.opacity = '0'; index++; colorIndex++; if (index === texts.length) { index = 0; colorIndex = 0; // Reset colorIndex to start from the first color again } setTimeout(() => { texts[index].style.color = colors[colorIndex]; texts[index].style.opacity = '1'; }, 1000); }, 3000); } </script> </body> </html> It shows up in a different spot on editor: Then on live: Mobile is perfect on editor: But doesn't appear on mobile at all until about 1 minute after loading the page. Absolutely bonkers. Is there a clear fix? HAS NOBODY EVER USED JAVASCRIPT CAROUSELS IN SQUARESPACE? Literally at my wits end. Squarespace, put out a working product. Need help with this sorely. 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