Sebbo
-
Posts
34 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Sebbo
-
Also, how do I remove this Script Disabled text?
-
You're a genius! However now I want to add 6 of these on one page. What needs to change in the code?
-
I tried various ways to add this code, but it's just not working. I tried adding it with the code block so far. Technique I used: Put the HTML section from the code pen directly in the block. After the html code add the css part inside <style> </style> blocks add the JS bit after that inside <script> </script> tags No worky. Here's the Codepen: https://codepen.io/josephwong2004/pen/NWRGxdR Any solutions? THANK YOU! HTML <body> <div class='container'> <div class='img background-img'></div> <div class='img foreground-img'></div> <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider"> <div class='slider-button'></div> </div> </body> CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @mixin center() { display: flex; justify-content: center; align-items: center; } body { margin: 0; height: 100vh; @include center; } .container { position: relative; width: 900px; height: 600px; border: 2px solid white; .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 900px 100%; } .background-img { background-image: url("https://images.squarespace-cdn.com/content/63d28d579b0def72a1e49b8a/aaf2d1c4-a529-4d38-a4dd-7350c727b24c/Virtual+Staging+-+Before+and+After+26.jpg?content-type=image%2Fjpeg"); } .foreground-img { background-image: url("https://images.squarespace-cdn.com/content/63d28d579b0def72a1e49b8a/b81bccc5-7d9a-4fe5-bc45-bd5cebd7de4a/Virtual+Staging+-+Before+and+After+25.jpg?content-type=image%2Fjpeg"); width: 50%; } .slider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: rgba(#f2f2f2, 0.3); outline: none; margin: 0; transition: all 0.2s; @include center; &:hover { background: rgba(#f2f2f2, 0.1); } &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 600px; background: white; cursor: pointer; } &::-moz-range-thumb { width: 6px; height: 600px; background: white; cursor: pointer; } } .slider-button { $size: 30px; pointer-events: none; position: absolute; width: $size; height: $size; border-radius: 50%; background-color: white; left: calc(50% - 18px); top: calc(50% - 18px); @include center; @mixin arrow-helper() { content: ""; padding: 3px; display: inline-block; border: solid #5d5d5d; border-width: 0 2px 2px 0; } &:after { @include arrow-helper(); transform: rotate(-45deg); } &:before { @include arrow-helper(); transform: rotate(135deg); } } } JAVA SCRIPT jQuery("#slider").on("input change", (e)=>{ const sliderPos = e.target.value; // Update the width of the foreground image $('.foreground-img').css('width', `${sliderPos}%`) // Update the position of the slider button $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`) });
-
I tried various ways to add this code, but it's just not working. I tried adding it with the code block so far. Technique I used: Put the HTML section from the code pen directly in the block. After the html code add the css part inside <style> </style> blocks add the JS bit after that inside <script> </script> tags No worky. Here's the Codepen: https://codepen.io/josephwong2004/pen/NWRGxdR Any solutions? THANK YOU!
-
Here is a rough sample of what we are requesting. Possible?
-
We need a proper organization structure for our add-ons. Could you please make this a priority? We also need the add-ons to be dragon drop instead of adding empty spaces.
-
Add-ons look way too busy if it's just one long list. It needs to be structured. Every month, someone complains that our add-on section is too busy. We tried arranging them by grouping them, but even that looks too busy. What we need are clear sections that help visually break them up. Can you please allow this? Please think about user experience. Our customers are certainly complaining about this and nothing has yet been done by Acuity Scheduling.
-
This 90's-era solution for ordering/arranging add-ons is causing display issues in Google Calendar, Outlook and iCal. It looks quite imperfect to our customers and is a long running issue now with Acuity Scheduling. When will you fix this? Screenshot attached from Google Calendar.
-
Auto-scroll Gallery (Type - Slideshow:Reel)
Sebbo replied to gamercj's topic in Fonts, colors and images
Works but globally across ALL slideshows on the website. What is the code to only apply it to a particular one? Thanks in advance. -
This worked thanks to Chat GPT! section[data-section-id="63f0c7e6e113f56b3b37256e"] a { text-decoration: none; }
-
I tried this for a block ID but still not working... #block-yui_3_17_2_1_1676721093940_660029 .text-link { text-decoration: none; }
-
Yes! Thoughts?
-
Does anyone happen to know why this is not working? I only need the underline links removed in certain areas, not the entire site. /*REMOVE UNDERLINE FROM LINKS 7.1*/ section[data-section-id="63f0c7e6e113f56b3b37256e"]{background-size: 0px !important; text-decoration: none!important;}
-
Automatically add travel time to acuity scheduling
Sebbo replied to Sebbo's topic in Acuity Scheduling
Thanks but this does not solve the problem since travel times vary. Some are 2 min away, some are 2 hours away. Adding a buffer does not account for the differences which is why a map feature is needed. -
We travel to our clients for each appointment. However clients are booking an hour away and that leaves us no travel time to drive there. How can we automatically account for the travel distances between appointments at the time they book? Thanks!
-
@tuanphanWould you know where exactly to copy/paste these blocks of code into SquareSpace to get this particular before/after slider to work? Seems like the code is here, I just don't know how to add it to my site. https://codepen.io/josephwong2004/pen/NWRGxdR
-
Clients are constantly complaining that I have too many services in my add-ons section. How could we better organize this? Is there a way we could create sections for each type of add-on? That would be helpful. Curious why such a simple thing does not yet exist. There's too much mental friction going on at the moment in this area for users.
-
How do we add a vibrating effect to a button that vibrates every three seconds or so? This is used to draw attention to that particular button. Thank you so much!
-
Color background behind text across page width in Hayden 7.0
Sebbo replied to Sebbo's topic in Customize with code
@tuanphan Your code is seen on this page - https://www.elevatedphotos.ca/ Here is a page without the code - https://www.elevatedphotos.ca/real-estate-photo-gallery-interiors Do you know how to add back the padding after your code on the first page? -
Color background behind text across page width in Hayden 7.0
Sebbo replied to Sebbo's topic in Customize with code
Thanks, but this also cleared the padding on the rest of the site. Is there a way to apply to just the text box? -
Color background behind text across page width in Hayden 7.0
Sebbo replied to Sebbo's topic in Customize with code
Yes, I'm working on www.elevatedphotos.ca. You can see there is a black text box but I need that to span the entire width of the page. Thanks for your help! I know you can do this with 7.1 but I just don't have the time to manually transfer the entire site and its settings, SEO, etc. Isn't there a faster way? Can we pay someone to do this? -
Does anyone know the code to place a coloured background behind a block of text that spans the entire page width without padding on the sides? This is for the Hayden template, 7.0. Thanks!
-
Would you consider raising views to at least 1,000 per month?
-
Elfsight only allows 200 page views per month . Tagembed offers 1,000 views per month. 🙂
-
Without paying for a service that does this, how can we add our Google reviews API to our Squarespace website? Without adding a screenshot of the reviews or using the Squarespace quotes. Does anybody know the code for this or how we can generate it? Thank you!
