Jump to content

Help with CodePen in squarespace

By carlylecapital, in Customize with code

Recommended Posts

carlylecapital Level 4

carlylecapital

Posted
Posted

Site URL: https://www.carlylecapitalinc.com/

Hi there, I'm not able to add my codepen HTML, CSS and JS successfully to my site. Can someone tell me what I'm doing wrong? 

 

HTML: (added code in </> code block)

<section>
  <div class="container">
    <h1 class="text-center">OUR PROCESS</h1>
    <div class="timeline flex-container">

      <div class="timeline-item flex-items-default selected">
        <div class="timeline-content text-left animated bounceIn">
          <h2>1. Let's Talk</h2>
          <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
          <div class="hexagon"></div>
          <i class="material-icons">phone</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>2. Letter of Intent</h2>
          <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
          <div class="hexagon"></div>
          <i class="material-icons">article</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>3. Processing</h2>
          <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
          <div class="hexagon"></div>
          <i class="material-icons">note_add</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>4. Underwriting</h2>
          <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
          <div class="hexagon"></div>
          <i class="material-icons">find_in_page</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>5. Closing & Funding</h2>
          <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
          <div class="hexagon"></div>
          <i class="material-icons">house</i>
        </div>
      </div>

      <div class="dropdown animated bounceIn" style="left: -88px;">
        <div class="inner">
          <div class="arrow-down"></div>
        </div>
      </div>

    </div>
  </div>
</section>
 

CSS: (added in custom css)

body {
  background-color: #f5efed;
}

section {
  height: 600px;
  background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}
section h1 {
  margin-top: 50px;
  margin-bottom: 350px;
  color: white;
}

p {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
}

h2 {
  font-family: "Roboto", sans-serif;
}

.timeline {
  width: 100%;
  position: relative;
  perspective: 5000px;
}
.timeline:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 15px;
  background-color: #d5dfe5;
  border-radius: 15px;
  top: 76px;
}
.timeline .timeline-item {
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.timeline .timeline-item:hover:after {
  transform: scale(1.5, 1.5);
}
.timeline .timeline-item.selected:after {
  background-color: #1c77c3;
  border: 5px solid #56cbf9;
  transform: scale(1.5, 1.5);
}
.timeline .timeline-item:after {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 69px;
  left: 50%;
  margin-left: -15px;
  background-color: #f5efed;
  border: 5px solid #d5dfe5;
  content: "";
  border-radius: 50%;
  transition: transform 0.5s ease;
}
.timeline .timeline-item .timeline-content {
  position: absolute;
  top: -300px;
  display: none;
  width: 350px;
  left: -60px;
  cursor: auto;
}
.timeline .timeline-item .timeline-content.fadeIn {
  animation-delay: 0.2s;
}
.timeline .timeline-item .timeline-content.animated {
  display: block;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.flex-items-default {
  width: 224px;
  height: 150px;
}

.dropdown {
  width: 400px;
  height: 326px;
  background: white;
  box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: absolute;
  top: -310px;
  animation-duration: 0.2s;
  transition: left 0.3s ease;
}
.dropdown .inner {
  position: relative;
  width: 100%;
  height: 326px;
}
.dropdown .inner .arrow-down {
  position: absolute;
  bottom: -19px;
  left: 50%;
  margin-left: -20px;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
}

.animated {
  display: block;
}

.material-icons {
  position: absolute;
  top: 189px;
  left: 160px;
  width: 100%;
  color: white;
  font-size: 33px;
}

.hexagon {
  position: relative;
  width: 75px;
  height: 43.3px;
  background-color: #1c77c3;
  margin: 21.65px 0;
  left: 50%;
  margin-left: -37px;
  top: 25px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 37.5px solid transparent;
  border-right: 37.5px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 21.65px solid #1c77c3;
}
 

JS: (Code Injection, header)

// Globals
var prefixes =
  "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function (e) {
  var isSelected = $(this).hasClass("selected");

  if (isSelected === false) {
    var leftPos = $(this).position().left,
      left = leftPos - 88,
      $that = $(this);

    $timelineItem.removeClass("selected");
    $(this).addClass("selected");

    if ($hasHovered === false) {
      // Show Bounce

      // Set Flag
      $hasHovered = true;

      // Show DD Bounce
      showBounce(left);

      // Show DD content Bounce
      showContentBounce($that);
    } else {
      // Follow

      // Change pos of DD to follow
      dropDownFollow(left);

      // Hide previous dd content
      $timelineContent.removeClass("animated fadeIn bounceIn");

      // Show hovered dd content
      $that.find($timelineContent).addClass("animated fadeIn");
    }
  }
});

// mouseleave event handler
$timeline.on("mouseleave", function (e) {
  if (hideOnExit) {
    //   Set Flag
    $hasHovered = false;

    // Hide DD
    hideDropDown();

    // Hide DD content
    $timelineContent.removeClass("animated fadeIn");
  }
});

// Animation end event listener
$dropDown.on(prefixes, function (e) {
  if (e.originalEvent.animationName === "fadeOut") {
    $dropDown.removeAttr("style");
  }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
  $hasBounced = true;
  that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
  $dropDown
    .css("left", pos + "px")
    .removeClass("fadeOut")
    .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
  $dropDown.css("left", pos + "px");
}

function hideDropDown() {
  $timelineItem.removeClass("selected");
  $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
 

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

carlylecapital
carlylecapital

Site URL: https://www.carlylecapitalinc.com/ Hi there, I'm not able to add my codepen HTML, CSS and JS successfully to my site. Can someone tell me what I'm doing wrong?    HTML: (added co

inunzi Level 5

inunzi

Posted
Posted
8 hours ago, carlylecapital said:

Site URL: https://www.carlylecapitalinc.com/

Hi there, I'm not able to add my codepen HTML, CSS and JS successfully to my site. Can someone tell me what I'm doing wrong? 

 

HTML: (added code in </> code block)

<section>
  <div class="container">
    <h1 class="text-center">OUR PROCESS</h1>
    <div class="timeline flex-container">

      <div class="timeline-item flex-items-default selected">
        <div class="timeline-content text-left animated bounceIn">
          <h2>1. Let's Talk</h2>
          <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
          <div class="hexagon"></div>
          <i class="material-icons">phone</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>2. Letter of Intent</h2>
          <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
          <div class="hexagon"></div>
          <i class="material-icons">article</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>3. Processing</h2>
          <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
          <div class="hexagon"></div>
          <i class="material-icons">note_add</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>4. Underwriting</h2>
          <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
          <div class="hexagon"></div>
          <i class="material-icons">find_in_page</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>5. Closing & Funding</h2>
          <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
          <div class="hexagon"></div>
          <i class="material-icons">house</i>
        </div>
      </div>

      <div class="dropdown animated bounceIn" style="left: -88px;">
        <div class="inner">
          <div class="arrow-down"></div>
        </div>
      </div>

    </div>
  </div>
</section>
 

CSS: (added in custom css)

body {
  background-color: #f5efed;
}

section {
  height: 600px;
  background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}
section h1 {
  margin-top: 50px;
  margin-bottom: 350px;
  color: white;
}

p {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
}

h2 {
  font-family: "Roboto", sans-serif;
}

.timeline {
  width: 100%;
  position: relative;
  perspective: 5000px;
}
.timeline:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 15px;
  background-color: #d5dfe5;
  border-radius: 15px;
  top: 76px;
}
.timeline .timeline-item {
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.timeline .timeline-item:hover:after {
  transform: scale(1.5, 1.5);
}
.timeline .timeline-item.selected:after {
  background-color: #1c77c3;
  border: 5px solid #56cbf9;
  transform: scale(1.5, 1.5);
}
.timeline .timeline-item:after {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 69px;
  left: 50%;
  margin-left: -15px;
  background-color: #f5efed;
  border: 5px solid #d5dfe5;
  content: "";
  border-radius: 50%;
  transition: transform 0.5s ease;
}
.timeline .timeline-item .timeline-content {
  position: absolute;
  top: -300px;
  display: none;
  width: 350px;
  left: -60px;
  cursor: auto;
}
.timeline .timeline-item .timeline-content.fadeIn {
  animation-delay: 0.2s;
}
.timeline .timeline-item .timeline-content.animated {
  display: block;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.flex-items-default {
  width: 224px;
  height: 150px;
}

.dropdown {
  width: 400px;
  height: 326px;
  background: white;
  box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: absolute;
  top: -310px;
  animation-duration: 0.2s;
  transition: left 0.3s ease;
}
.dropdown .inner {
  position: relative;
  width: 100%;
  height: 326px;
}
.dropdown .inner .arrow-down {
  position: absolute;
  bottom: -19px;
  left: 50%;
  margin-left: -20px;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
}

.animated {
  display: block;
}

.material-icons {
  position: absolute;
  top: 189px;
  left: 160px;
  width: 100%;
  color: white;
  font-size: 33px;
}

.hexagon {
  position: relative;
  width: 75px;
  height: 43.3px;
  background-color: #1c77c3;
  margin: 21.65px 0;
  left: 50%;
  margin-left: -37px;
  top: 25px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 37.5px solid transparent;
  border-right: 37.5px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 21.65px solid #1c77c3;
}
 

JS: (Code Injection, header)

// Globals
var prefixes =
  "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function (e) {
  var isSelected = $(this).hasClass("selected");

  if (isSelected === false) {
    var leftPos = $(this).position().left,
      left = leftPos - 88,
      $that = $(this);

    $timelineItem.removeClass("selected");
    $(this).addClass("selected");

    if ($hasHovered === false) {
      // Show Bounce

      // Set Flag
      $hasHovered = true;

      // Show DD Bounce
      showBounce(left);

      // Show DD content Bounce
      showContentBounce($that);
    } else {
      // Follow

      // Change pos of DD to follow
      dropDownFollow(left);

      // Hide previous dd content
      $timelineContent.removeClass("animated fadeIn bounceIn");

      // Show hovered dd content
      $that.find($timelineContent).addClass("animated fadeIn");
    }
  }
});

// mouseleave event handler
$timeline.on("mouseleave", function (e) {
  if (hideOnExit) {
    //   Set Flag
    $hasHovered = false;

    // Hide DD
    hideDropDown();

    // Hide DD content
    $timelineContent.removeClass("animated fadeIn");
  }
});

// Animation end event listener
$dropDown.on(prefixes, function (e) {
  if (e.originalEvent.animationName === "fadeOut") {
    $dropDown.removeAttr("style");
  }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
  $hasBounced = true;
  that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
  $dropDown
    .css("left", pos + "px")
    .removeClass("fadeOut")
    .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
  $dropDown.css("left", pos + "px");
}

function hideDropDown() {
  $timelineItem.removeClass("selected");
  $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
 

Where are you putting these codes? Do you think you might be putting them in the wrong place?

Link to comment
Beyondspace Level 14

Beyondspace

Posted
Posted

Please make sure in code injection, you wrap the script snippet inside <script> and </script>

JS: (Code Injection, header)

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
carlylecapital Level 4

carlylecapital

Posted
  • Author
Posted
1 hour ago, IXStudio said:

Hi,
Please let me know the codepen (Base) code you used and which section you used in your website?

Please use the like button if it helps you!

Best,
Leopold

I have all the code in my question and am not sure what the base code is, the only code i didnt use was this: <p class="codepen" data-height="237" data-theme-id="light" data-default-tab="html,result" data-user="vram1980" data-slug-hash="jrzgXk" style="height: 237px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Horizontal Timeline">
  <span>See the Pen <a href="https://codepen.io/vram1980/pen/jrzgXk">
  Horizontal Timeline</a> by Vincent Ramos (<a href="https://codepen.io/vram1980">@vram1980</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

I used it in a code block

Link to comment
IXStudio Level 8

IXStudio

Posted
Posted

Insert this code in your code block and let me know if it not works! 

<section>
    <div class="container">
        <h1 class="text-center">OUR PROCESS</h1>
        <div class="timeline flex-container">
            <div class="timeline-item flex-items-default selected">
                <div class="timeline-content text-left animated bounceIn">
                    <h2>1. Let's Talk</h2>
                    <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">phone</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>2. Letter of Intent</h2>
                    <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">article</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>3. Processing</h2>
                    <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">note_add</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>4. Underwriting</h2>
                    <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">find_in_page</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>5. Closing & Funding</h2>
                    <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">house</i>
                </div>
            </div>
            <div class="dropdown animated bounceIn" style="left: -88px;">
                <div class="inner">
                    <div class="arrow-down"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
body {
    background-color: #f5efed;
}

section {
    height: 600px;
    background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}

section h1 {
    margin-top: 50px;
    margin-bottom: 350px;
    color: white;
}

p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
}

h2 {
    font-family: "Roboto", sans-serif;
}

.timeline {
    width: 100%;
    position: relative;
    perspective: 5000px;
}

.timeline:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    background-color: #d5dfe5;
    border-radius: 15px;
    top: 76px;
}

.timeline .timeline-item {
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.timeline .timeline-item:hover:after {
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item.selected:after {
    background-color: #1c77c3;
    border: 5px solid #56cbf9;
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item:after {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 69px;
    left: 50%;
    margin-left: -15px;
    background-color: #f5efed;
    border: 5px solid #d5dfe5;
    content: "";
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.timeline .timeline-item .timeline-content {
    position: absolute;
    top: -300px;
    display: none;
    width: 350px;
    left: -60px;
    cursor: auto;
}

.timeline .timeline-item .timeline-content.fadeIn {
    animation-delay: 0.2s;
}

.timeline .timeline-item .timeline-content.animated {
    display: block;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.flex-items-default {
    width: 224px;
    height: 150px;
}

.dropdown {
    width: 400px;
    height: 326px;
    background: white;
    box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: absolute;
    top: -310px;
    animation-duration: 0.2s;
    transition: left 0.3s ease;
}

.dropdown .inner {
    position: relative;
    width: 100%;
    height: 326px;
}

.dropdown .inner .arrow-down {
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -20px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
}

.animated {
    display: block;
}

.material-icons {
    position: absolute;
    top: 189px;
    left: 160px;
    width: 100%;
    color: white;
    font-size: 33px;
}

.hexagon {
    position: relative;
    width: 75px;
    height: 43.3px;
    background-color: #1c77c3;
    margin: 21.65px 0;
    left: 50%;
    margin-left: -37px;
    top: 25px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 37.5px solid transparent;
    border-right: 37.5px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 21.65px solid #1c77c3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
// Globals
var prefixes =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function(e) {
    var isSelected = $(this).hasClass("selected");

    if (isSelected === false) {
        var leftPos = $(this).position().left,
            left = leftPos - 88,
            $that = $(this);

        $timelineItem.removeClass("selected");
        $(this).addClass("selected");

        if ($hasHovered === false) {
            // Show Bounce

            // Set Flag
            $hasHovered = true;

            // Show DD Bounce
            showBounce(left);

            // Show DD content Bounce
            showContentBounce($that);
        } else {
            // Follow

            // Change pos of DD to follow
            dropDownFollow(left);

            // Hide previous dd content
            $timelineContent.removeClass("animated fadeIn bounceIn");

            // Show hovered dd content
            $that.find($timelineContent).addClass("animated fadeIn");
        }
    }
});

// mouseleave event handler
$timeline.on("mouseleave", function(e) {
    if (hideOnExit) {
        //   Set Flag
        $hasHovered = false;

        // Hide DD
        hideDropDown();

        // Hide DD content
        $timelineContent.removeClass("animated fadeIn");
    }
});

// Animation end event listener
$dropDown.on(prefixes, function(e) {
    if (e.originalEvent.animationName === "fadeOut") {
        $dropDown.removeAttr("style");
    }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
    $hasBounced = true;
    that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
    $dropDown
        .css("left", pos + "px")
        .removeClass("fadeOut")
        .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
    $dropDown.css("left", pos + "px");
}

function hideDropDown() {
    $timelineItem.removeClass("selected");
    $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
</script>

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
carlylecapital Level 4

carlylecapital

Posted
  • Author
Posted
3 hours ago, IXStudio said:

Insert this code in your code block and let me know if it not works! 


<section>
    <div class="container">
        <h1 class="text-center">OUR PROCESS</h1>
        <div class="timeline flex-container">
            <div class="timeline-item flex-items-default selected">
                <div class="timeline-content text-left animated bounceIn">
                    <h2>1. Let's Talk</h2>
                    <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">phone</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>2. Letter of Intent</h2>
                    <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">article</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>3. Processing</h2>
                    <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">note_add</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>4. Underwriting</h2>
                    <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">find_in_page</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>5. Closing & Funding</h2>
                    <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">house</i>
                </div>
            </div>
            <div class="dropdown animated bounceIn" style="left: -88px;">
                <div class="inner">
                    <div class="arrow-down"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
body {
    background-color: #f5efed;
}

section {
    height: 600px;
    background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}

section h1 {
    margin-top: 50px;
    margin-bottom: 350px;
    color: white;
}

p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
}

h2 {
    font-family: "Roboto", sans-serif;
}

.timeline {
    width: 100%;
    position: relative;
    perspective: 5000px;
}

.timeline:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    background-color: #d5dfe5;
    border-radius: 15px;
    top: 76px;
}

.timeline .timeline-item {
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.timeline .timeline-item:hover:after {
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item.selected:after {
    background-color: #1c77c3;
    border: 5px solid #56cbf9;
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item:after {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 69px;
    left: 50%;
    margin-left: -15px;
    background-color: #f5efed;
    border: 5px solid #d5dfe5;
    content: "";
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.timeline .timeline-item .timeline-content {
    position: absolute;
    top: -300px;
    display: none;
    width: 350px;
    left: -60px;
    cursor: auto;
}

.timeline .timeline-item .timeline-content.fadeIn {
    animation-delay: 0.2s;
}

.timeline .timeline-item .timeline-content.animated {
    display: block;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.flex-items-default {
    width: 224px;
    height: 150px;
}

.dropdown {
    width: 400px;
    height: 326px;
    background: white;
    box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: absolute;
    top: -310px;
    animation-duration: 0.2s;
    transition: left 0.3s ease;
}

.dropdown .inner {
    position: relative;
    width: 100%;
    height: 326px;
}

.dropdown .inner .arrow-down {
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -20px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
}

.animated {
    display: block;
}

.material-icons {
    position: absolute;
    top: 189px;
    left: 160px;
    width: 100%;
    color: white;
    font-size: 33px;
}

.hexagon {
    position: relative;
    width: 75px;
    height: 43.3px;
    background-color: #1c77c3;
    margin: 21.65px 0;
    left: 50%;
    margin-left: -37px;
    top: 25px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 37.5px solid transparent;
    border-right: 37.5px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 21.65px solid #1c77c3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
// Globals
var prefixes =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function(e) {
    var isSelected = $(this).hasClass("selected");

    if (isSelected === false) {
        var leftPos = $(this).position().left,
            left = leftPos - 88,
            $that = $(this);

        $timelineItem.removeClass("selected");
        $(this).addClass("selected");

        if ($hasHovered === false) {
            // Show Bounce

            // Set Flag
            $hasHovered = true;

            // Show DD Bounce
            showBounce(left);

            // Show DD content Bounce
            showContentBounce($that);
        } else {
            // Follow

            // Change pos of DD to follow
            dropDownFollow(left);

            // Hide previous dd content
            $timelineContent.removeClass("animated fadeIn bounceIn");

            // Show hovered dd content
            $that.find($timelineContent).addClass("animated fadeIn");
        }
    }
});

// mouseleave event handler
$timeline.on("mouseleave", function(e) {
    if (hideOnExit) {
        //   Set Flag
        $hasHovered = false;

        // Hide DD
        hideDropDown();

        // Hide DD content
        $timelineContent.removeClass("animated fadeIn");
    }
});

// Animation end event listener
$dropDown.on(prefixes, function(e) {
    if (e.originalEvent.animationName === "fadeOut") {
        $dropDown.removeAttr("style");
    }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
    $hasBounced = true;
    that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
    $dropDown
        .css("left", pos + "px")
        .removeClass("fadeOut")
        .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
    $dropDown.css("left", pos + "px");
}

function hideDropDown() {
    $timelineItem.removeClass("selected");
    $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
</script>

Please use the like button if it helps you!

Best,
Leopold

Thank you so much that did help! However, there are a few things that still don't work such as:  

<div class="hexagon"></div>
          <i class="material-icons">phone</i>

All hexagon symbols are showing up looking like a wrench rather than a hexagon and the material icons only show up as words rather that as icons (ex: phone is spelled out rather than showing an icon of a phone)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources