KevinWalton

Hi,

I was wondering if someone could help me with this Javascript I was creating with ChatGPT. 

Basically I am trying to make an easier solution to eliminate the lock screen on a Sqs site for many projects I am planning, in this Js, when you click anywhere on the page, it will automatically fill in the answer in the form. What is happening is it's working, but it doesn't seem to be sending the confirmation to the console. I need to directly click the actual form, or press the arrow twice. 

I know I am so close. Let me know if anyone can help.

Password is 1

<script>
document.addEventListener('DOMContentLoaded', function() {
    var slideLayer = document.querySelector('.sqs-slide-layer.layer-front.full-width-height');
    if (slideLayer) {
        slideLayer.addEventListener('click', function() {
            var formBlock = document.querySelector('.password-form .password-input'); // Assuming the form block has a textarea
            if (formBlock) {
                formBlock.value = '1';
                
                // Simulate pressing Enter key
                var enterKeyEvent = new KeyboardEvent('keydown', {
                    key: 'Enter',
                    bubbles: true,
                    cancelable: true,
                });
                formBlock.dispatchEvent(enterKeyEvent);
            }
            window.location.href = '/';
        });
    }
});
</script>

These are awesome, is there a way to add a Javascript that automatically filled in the password above with a press of the button? This way people don't have to enter in a text-based password, when they can just click a button

I figured it out. By adding the styles <footer></footer> inside the Page Injection, I can install Footer JS to that specific page.

Problem has been solved, thank you so much again.

Not yet but I can, I was wondering if I could use a JS that eliminates the link of blastoff.js. 

Hi, I am trying to remove this specific javascript only on the about page to add in a plugin. It's the wavy smoke background effect that is on the site. The javascript is called blast off:

https://www.squarerefresh.xyz/assets/plugins/blast-off/js/blast-off.min.js

What I need is a new javascript that to completely eliminates the blast off from the site only on About. I have tried ChatGPT, looked up many forums to eliminate JS from a site, but Squarespace handles JS differently, and I have no idea what I am doing when it comes to JS.

Let me know if you have any questions.

Website: https://kevinwalton2024.squarespace.com

Password: 1

This worked! Thank you SO MUCH. Seriously I cannot do this without you.

I'm sorry I should of clarified, I was wondering if I could disable LUXY.JS on mobile, basically the smooth scroll only works on desktop, but on mobile it is completely turned off so that it's the normal scrolling. I have played with some code snippets but I cannot figure it out

That worked perfectly. Thank you.

Do you think you can help disable it on mobile? So far this JS is not working

<!-- Disable mobile: WORKING ON -->
<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: 'article',

       
    });
 }
 </script>

Website: https://kevinwalton-portfolio-2023.squarespace.com/about

Password: 1

Hi guys, 

Can anyone help out with my problem I am solving? On my About Page, I have added a script called Luxy JS. This makes the web page scroll slower. The only problem, is that it doesn't show the footer. The reason for that is because the Footer HTML block is not located in the one I have Luxy JS synced to, which is called Article. 

What I need to do is move the HTML Footer into Article using some kind of JS. Can someone help? Below is a screenshot of what I am looking for

Here is the Luxy JS Code below, and is only located in the About page of the site above:

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script>
$(document).ready(function() {
     luxy.init({
        wrapper: 'article',
        wrapperSpeed: 0.045,
       
    });
});
</script>

THANK YOU. This works!

Seriously I can't thank you guys enough. I have been trying to figure this out for over 2 years.

Thank you so much jaeveedee and tuanphan

Sorry my bad, I was doing some editing. The code originally posted is now back on the site 

Website is https://kevinwalton-portfolio-2023.squarespace.com

Password is: 1

Doesn't seem to work, can you help me understand what to do with this code you have shared? Thank you for responding 

Hello, I am trying to code the header to be mix blend mode. I have found a way to do so, but it effects the hamburger menu as well. I want to remove the mix blend mode on the hamburger menu when it is opened. And when it is closed, mix blend mode will enable again.
I am also interested in any other ways to customize specific target elements like the header-title-text to be mix blend mode, but I cannot figure it out.

I have been trying to accomplish this for 2 years and I am starting to get tired of trying. Can anyone help me?

Code below of what I have so far

<script>
function toggleheaderburger() {
  const header = document.getElementById('header');
  const headerburger = document.getElementById('header-burger');
  const headerburgerbtn = document.getElementById('header-burger-btn');

  if (headerburgerbtn.classList.contains('burger--active')) {
    // Hamburger menu is opened, set blend mode to "normal"
    header.style.mixBlendMode = 'normal';
    headerburgerbtn.classList.remove('burger--active');
    headerburger.classList.remove('header-burger');
  } else {
    // Hamburger menu is closed, set blend mode to "difference"
    header.style.mixBlendMode = 'difference';
    headerburgerbtn.classList.add('burger--active');
    headerburger.classList.add('header-burger');
  }
}

</script>

Website is https://kw-aurora.squarespace.com/about-copy

Password is "1"

I am looking to get the effect on all image blocks, when scrolling, the images follow you as you scroll up and down in a 3D effect. There is a way to do it in CSS but my way doesn't work on Chrome. Let me know if you have any questions

Hi,

Can anyone help me add this CSS to my images in Squarespace? I've been doing this for 4 hours straight with no luck. i am looking to do this:

https://codepen.io/alvarotrigo/pen/OJxOrOg

Thanks again.

On 11/19/2021 at 10:19 AM, SquareRefresh said:

Hey @KevinWalton what's problem do You had? I see Your site doesn't use this js plugin.

No sure what you mean, the question is up top. I do not know how to install Butter Js, I am looking to get a really nice smooth scroll 

Site URL: https://www.kevinwalton.ca

Hi, 

I was wondering if someone can help me work Butter.js on my site. I have tried everything I can but I can't do it. 

Here is the link to the Js: 

https://www.cssscript.com/smooth-momentum-scrolling-butter/

Thanks, 

Kevin W

Blank template. Researched a lot on Design and found my style

Site URL: https://www.kevinwalton.ca

Need help coding this to my website. 

I have been trying for 6 hours but I cannot figure this out. Trying to add this to photos with the class:

 .sqs-block-image

https://codepen.io/fusco/pen/IfsAa

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{
  text-align:center;
  padding:0;
  margin:0;
  font-family: 'Montserrat', sans-serif;
  background-color:#111;
}
.parallax {
  padding:0px;
  perspective: 1px;
  height: 100vh;
  font-size:40px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 1px;
  perspective: 1px;
}

.content{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity:.7;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 100vh 0;
}

.base {
  transform: translateZ(-2px) scale(3);
  color:#FFF;
}

.closer {
  transform: translateZ(-1px) scale(2);
  font-size:300%;
  color:#BF55EC;
}

.closest {
  transform: translateZ(0);
  color:#19B5FE;
  font-size:700%;
}

Site URL: https://www.kevinwalton.ca

Hi There! 

Finally got the chance to publish my redesigned website! See what you think, I am always looking to improve my skills! 

- Kevin W

Yes @Winther I got the chance to figure it out but unfortunately it messed up with another piece of Javascript that I already had on my site so I had to remove it. 

Thanks for the update! 

Site URL: https://lily-oboe-g479.squarespace.com

Password is "1"

Hi, 

I have been working on this for over 6 hours and I cannot figure out how to add Parralaxing to my site. 

I want to mainly add it to parallax images when you scroll, I just want to figure out how to add it to image blocks but I don't know where to put the ID and the Class. 

Here is the code from this site: 

https://codepen.io/smlparry/pen/JzGELL

HTML

<div class="wrapper">
  <div class="parallax-container">
    <div class="background">
      <img class="background__image" src="https://s3-ap-southeast-2.amazonaws.com/daily-fire-assets/codepen-assets/building.jpg" />
    </div>
    <div class="foreground">
      <div class="foreground__content">
        <h1>Oooo, parallax</h1>
      </div>
    </div>
  </div>
</div>

CSS

/* layout */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 420px;
}

/* Parallax Styles */
.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  display: flex;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0px);
}

.foreground {
  margin-top: auto;
  margin-bottom: 50px;
  
  transform-origin: 0;
  transform: translateZ(3px) scale(0.625);
  
  /* Uncomment the code below to see the difference the scale property makes! */
  /* transform: translateZ(3px); */
  /* transform: translateZ(0) scale(1); */
}

.foreground h1 {
  font-size: 36px;
}

Site URL: https://lily-oboe-g479.squarespace.com/

Password is "1"

Hi,

I have no idea how to install Rolly.js to my site. I want to have smooth scrolling but I know nothing of javascript. 

Here is the website where you install it: 

https://rolly.maj.digital/

Here is where you install it: 

https://mickaelchanrion.github.io/rolly/guide/

Someone please help me

Thanks, 

- Kevin

Site URL: https://sponge-lychee-awaf.squarespace.com

password is "1"

I was wondering if someone can help me install Page transitions to my site? I don't know how to do it with Javascript. 

Here is a link of the code that I want to install. 

https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

I am mainly looking at the "DIFFERENT EASING" page transitions. 

Thanks again! 

- Kevin W