taylorroy

On 9/4/2022 at 1:39 AM, tuanphan said:

A lot of code in this topic. Which code did you add?

@tuanphan Oh right, sorry. It was the below, added to a Code Block in my first section. So now the first section of my home page does not display, either in Editor or signed out. So I can't access the design or delete the code block. 

I tried deleting all Custom CSS to see if something was conflicting, but it did not help.

Thx for ideas to regain that first section! 

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section? Like add something to my CSS to cancel out that code...to bring back the section and delete this?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section? Like add something to my CSS to cancel out that code...to bring back the section and delete this?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

On 3/5/2022 at 2:46 AM, paul2009 said:

the only two workarounds

Thank you for lending your expertise! Glad to know I wasn't missing an obvious trick, and happy to receive the Orders API suggestion.

Hi @paul2009, in my case, we would like to be able to sort or easily view which customer bought what (without having to download a CSV).

• using Commerce
• 3 "service" products for sale (they are camps)
• How can we view who signed up for which camp, without clicking in to every customer profile to check?
• Isn't there a way to auto-tag or filter by purchase? 

thanks.

19 hours ago, bangank36 said:

kindly update accordingly

Updated, works great now. Thanks so much for your help.

@bangank36 Actually, sorry, the page links in the menu are no longer clickable. Is it possible that this script is causing that error, overriding the menu function?

Potentially could be a conflict with other code on my site, but thought you might have insight.

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

@bangank36 yep!

On 11/3/2020 at 12:28 AM, bangank36 said:

<script>
	document.addEventListener('DOMContentLoaded', function() {
    	document.addEventListener("click", function(e) {
            var element = e.target;
            if (element.classList.contains('lightbox-inner')) {
                element.querySelector(".lightbox-close").click();
            }   
        });
    });

</script>

Place this snippet in custom code injection, detail here

I would like to apply this sort of feature to my Mobile Menu forced on desktop. As in, this menu opens on the right side and I'd like to be able to exit by clicking outside. What code could I use to close the menu when user clicks outside of the menu / over the main body, without using the 'x'?

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

Thx!

Still looking for insight on this, if anyone can help.

5 hours ago, iamdavehart said:

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. 

this effect is actually what's causing the odd behaviour in your "non-working" example:

• jquery contains the draggable div to the "#about" section
• buy you have moved the image say 300px to the right of the draggable div
• so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css

If you reposition the draggable div using css, rather than the image, you'd get more consistent result.

ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

Dave—Thanks for your generosity of time + knowledge to help me make sense of this.

It was all a bit of a reach for my coding knowledge, but I learned quite a bit from your explanation! Thanks so much. I'll take a pass later, removing the containment and change how I'm targeting each image.

Site URL: https://tjr-new-site.squarespace.com/

hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0)

These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis.

• Works (able to slide img around): https://tjr-new-site.squarespace.com/about
• Does not work (img can't move to the left past its starting place): https://tjr-new-site.squarespace.com scroll down to About

pw: troysitehelp

Any ideas on why it works in one place and not the other, and how to address? Thx.

20 hours ago, tuanphan said:

Hi,

Sorry for the delay. Overloaded.

You want it to appear always on the right, not slide from left to right

No prob! Yes, I want to avoid sliding in from the left to attach to the right. Should appear from the right, or just, appear.

@tuanphan lmk if you have tips. please and thanks!

8 minutes ago, tuanphan said:

Hi,

Can you share link to your site? We can check easier

link: https://tjr-new-site.squarespace.com/sandbox
pw: troysitehelp

Does anyone have code for changing the direction that the Mobile Menu (.Mobile-overlay) slides in from? 

On Brine / Rally, 7.0.

I'm using the below code to anchor the menu fly-out to the right, but when it opens/appears it has a really awkward transition sliding in from the left.

.is-mobile-overlay-active .Mobile-overlay {left:auto; right:0;}

10 minutes ago, tuanphan said:

Move code to HomePage Header

wow, of course haha. sometimes you're in too deep and need to be reminded of the simple things! Thank you!!

On 7/4/2020 at 5:42 AM, lu.diehl said:

Hi @Adam9 - if that is one of your website colors, you can go to your first section and change the background color of that section. The navigation inherit the color of the first section in the Squarespace 7.1 version.

Let me know if this worked!

On 11/19/2019 at 4:14 PM, tuanphan said:

You need to use JavaScript to create sticky nav & change color

Reference: https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

Is there a way to apply this JS to only the home page? And it remains as normal on all other pages?  Thanks.

Site URL: https://tjr-new-site.squarespace.com/slider

I’m looking to create an accordion / slider where each section expands on hover, as demonstrated in the gif mockup. I'm having trouble adapting the code snippets I'm finding to have the right animation, and formatting the content within each section (most I've seen use full background images with caption). 

The code I started with: https://www.cssscript.com/pure-css-horizontal-responsive-image-accordion-slider/
pw for my scary first attempt: troysitehelp

I'd love anyone's input on how to "hack" this for squarespace—i.e. laying out content in SS editor, and adjusting the code to reference this, or if anyone would like to quote an estimate to build this.

8 hours ago, tuanphan said:

Try Design > Site Styles > Disable Ajax Loading & check again.

Hm, Ajax loading was already disabled. I turned it on + off again, but it still displays on page load (then when you scroll, it fades out for a moment before reappearing).

hey @tuanphan, I see your back to top button referenced all over. 

I added it to my site, including the extra JS. Mostly works, but upon page load, the ^top button appears on the hero. It briefly fades out when you scroll before reappearing. I would like it to be hidden until you get towards the bottom of the page. Any tips on where to fix this? Thanks.

site: https://clairepattee-wip.squarespace.com/

pw: cpc2021