I'm trying to get the JQuery Ripple effect to work on a container within my page (#middle-container) but for some reason its not working and I've looked at resources and I'm pretty sure I'm using the right code, but I'm making it in Squarespace so I'm not sure if that makes a notable difference.
Here is a link to the website: Solace
The password is: solace (private until I've finished with it)
Below is a direct snippet of my code:
script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<script>
$('.ripple').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
</script>//hide footer
.tweak-footer-show .Footer {
display: none;
}
//background image switch
#home > div.Index-page-content {
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603da22dbe32591be4940c61/1614651949875/Green_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
//hide arrow at bottom of page
#home > div.Index-page-scroll-indicator > svg {
display: none;
}
//hide page header
#collection-603eb975151ed6131f59a6be > div.Site.loaded > div.Site-inner.Site-inner--index > header > div {
display: none;
}
//index content, padding 0
.Index-page-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
align-items: center;
}
//main-container sp div
#block-yui_3_17_2_1_1614724121099_4494 {
padding: 0px;
margin: 0px;
}
#main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#top-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#top-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#top-nav-link-container:hover {
transform: skewX(-20deg);
}
#top-nav-link {
color: black;
}
#middle-container {
border: 2px solid black;
height: 80%;
width: 90%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603da22dbe32591be4940c61/1614651949875/Green_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#logo-img-container {
height: 100%;
width: 100%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
margin-left: 20px;
margin-right: 20px;
}
#bottom-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#bottom-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#bottom-nav-link-container:hover {
transform: skewX(-20deg);
}
#bottom-nav-link {
color: black;
}<div id="main-container">
<div id="top-nav-container">
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> therapy </a>
</div>
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> meditation </a>
</div>
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> covid-19 support </a>
</div>
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> spiritual practitioners </a>
</div>
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> food </a>
</div>
<div id="top-nav-link-container">
<a href="url" id="top-nav-link"> collectives & community spaces </a>
</div>
</div>
<div id="middle-container" class="ripple">
<div id="logo-img-container"></div>
</div>
<div id="bottom-nav-container">
<div id="bottom-nav-link-container">
<a href="url" id="bottom-nav-link"> skin/body/haircare - bipoc independent businesses </a>
</div>
<div id="bottom-nav-link-container">
<a href="url" id="bottom-nav-link"> safety </a>
</div>
<div id="bottom-nav-link-container">
<a href="url" id="bottom-nav-link"> yoga </a>
</div>
<div id="bottom-nav-link-container">
<a href="url" id="bottom-nav-link"> advice </a>
</div>
<div id="bottom-nav-link-container">
<a href="url" id="bottom-nav-link"> herbalism & decolonized medicine </a>
</div>
</div>
</div>
</div>Any help would be much appreciated!
It looks like the two scripts (the one for JQuery and the one for Ripples) are not present on the home page of the site in question.
It looks like you added them to your /home page here, but that page is not set as your actual home page. You may be aware of that, but thought it was worth mentioning. Because I work with Squarespace a lot, I knew to look for that, but others here on StackOverflow would not know to go to /home to see what you're referring to. Keep that in mind.
In any case, to fix the issue, move your JavaScript code (from the first snippet in your question above) to Footer code injection instead of Header code injection. It must be in Footer code injection because, otherwise, it executes before your .ripples element is present, and so therefore the code does nothing.
So, move it to Footer code injection so that, when it runs, the element with class="ripples" is present.