Jump to content

StampJonah

Member
  • Posts

    7
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

StampJonah's Achievements

  1. 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.
  2. 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>
  3. 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...!
  4. Hey guys, I'm having a similar issue with an embedded script that is an animated verticle carousel. It appears in the wrong place in my live site on desktop, and doesn't appear at all on mobile. :\
  5. Currently trying to figure out what css reference is for monospace. Heading 1 is h1, heading 2 is h2... monospace is... sqsrte-small... maybe? -___-
  6. So I went to custom css and imported open sans to use as a font. Turns out, I hated it. I think mostly because editing text in squarespace is an absolute nightmare. It should be as easy as it is in this text box. What font do I want for this text? What Size do I want for this text? Unfortunately, it's not that easy. So I tried to go into custom CSS fonts and upload a font, change it's pixel size, and work around it that way. But it just wasn't working, and being wonky. So I said screw it. Is there a way to get back the swear display font pack?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.