Jump to content

Added members area to website, now page header banners not full width

Recommended Posts

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!

Link to comment
  • Replies 3
  • Views 415
  • Created
  • Last Reply
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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.