Sebbo
-
Posts
34 -
Joined
-
Last visited
Sebbo's Achievements
-
LITTLEBEAST reacted to a post in a topic:
Please allow us to create Sections to simplify our Add-ons for our clients
-
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.
-
mitomo reacted to a post in a topic:
Please allow us to create Sections to simplify our Add-ons for our clients
-
mitomo reacted to a post in a topic:
Allow drag-and-drop ordering instead of empty spaces for Acuity add-ons... it's almost 2024 guys!
-
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. -
Sebbo reacted to a post in a topic:
Auto-scroll Gallery (Type - Slideshow:Reel)
-
Sebbo reacted to a post in a topic:
Auto-scroll Gallery (Type - Slideshow:Reel)
-
Sebbo reacted to a post in a topic:
Make Gallery - Slideshow: Reel Autoplay?
-
tuanphan reacted to a post in a topic:
Remove text underline links in 7.1
-
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;}
-
rajeshabnani29 reacted to a post in a topic:
Adding Google Reviews to SquareSpace Website
-
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!
