cat_not_kitty

After two days of troubleshooting (and, of course, right after I post to the forum), I think I've found an at least interim fix (stubborn tenacity for the win!): adding 'zero width spaces' after any hyphens I want to prompt line breaks. I don't know whether this will cause other, unforeseen issues – so will wait to count my proverbial chickens 🐔 – but this has addressed the problem for now. On a Mac: 1. Press 'Control–Command–Space Bar' to launch the 'Character Viewer'. 2. Enter 'zero' in the 'Search' field. 3. Select the blank 'ZERO WIDTH SPACE' character area (for me, it was column 2, row 3 in the 'Unicode Name' area), and click the 'Add to Favourites' button (you don't have to do this second part, but I wanted to have this character, along with 'SOFT HYPHEN' and 'NON-BREAKING HYPHEN', available to me for easy use in the future). 4. Navigate to your SS site editor and double click the zero width space wherever you'd like to insert a line break after a hyphen – this forces the browser to see the words as separate although they're connected by a hyphen. 5. You can use 'CTRL–CMD–SB' to launch the 'Character Viewer' from within the editor in the future and find your selected characters in the 'Favourites' area, keeping in mind that you won't see anything where the zero width space is, unless you click the blank area ☺️. I'm going to hold off on marking this as solved as I want to see if any developers weigh in on what might actually be happening here (perhaps there's a less cumbersome, more stable, solution as I'm just hacking my way through). I'll update if I see any side effects!

Hi all, I've encountered a brand new issue with hyphens and line breaks: as of two days ago, lines are no longer breaking at manually inserted hyphens within words on mobile (Safari & Chrome, latest and older iOSes), despite my wanting them to. Mobile preview still shows lines breaking at hyphens (see first screenshot below). I've tried adding code, as below, to re-encourage manual hyphen breaks and no effect. I've made some interim changes on my live site (e.g., adjusting font sizes, removing necessary hyphens to allow breaks between what should be linked words) to address the worst formatting impacts while I try to figure out a proper fix, but really hoping someone can help with a solution! (For anyone inspecting my CSS, my doubled and cross-hidden sections are just a side effect of me trying to work out a solution on mobile without affecting desktop.) Site: radicalhealing.ca/therapeuticapproach (No password) Mobile preview: Actual website: @media screen and (max-width:767px) {#block-f370c3c66435eb463087 {p { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }} }

I've removed the cursor for now, as it wasn't looking as polished as I'd want with these remaining issues, but I'm still hoping that I might be able to find a solution to the above glitches. Would you have any thoughts @tuanphan, @creedon, or @Beyondspace? Could adding an event listener for 'unload' (and/or some other event that happens after a link is clicked and when a page loads) help? (As I said – I'm not a developer, so forgive me if this is a very silly question ☺️!) Or could modifying any of these solutions work: https://stackoverflow.com/questions/3734559/change-cursor-when-loading-page? When I was having a go at troubleshooting everything before coming to the forum, I also tried adding (drawing from the solution found here: https://stackoverflow.com/questions/28823987/is-there-any-way-to-make-the-cursor-pointer-for-all-onclick-events-in-the-page: a:active { cursor: none important!; } and [onClick] { cursor:none !important; } to my CSS but neither of these fixed any of the problems. I also had the thought that adding some of the code here PLUS adding a blank image as a secondary custom cursor (thereby replacing the arrow that's appearing from some existing code) might work in combination to address everything, but I'm out of my league in terms of deciphering how to realise any of these solutions fully. Any chance something here moves in the right direction?

Pointing to some additional troubleshooting and clarifications for this code, for any future users!

Hi all, Posting some solutions first and then following up with a finicky troubleshooting request! @Arturo_hernandez – not sure if you're still interested in these fixes as it's been a long time, but for folx working on debugging this particular custom cursor, I'm going to leave a few collected tidbits from across the forum/internet here in one place. Caveat: I'm not a developer or coder (in ANY way) but I've been steadily developing my comfort with integrating custom CSS, HTML, and JS as I build my website, and have managed to bring ideas to life and troubleshoot a ton of bugs using the forum, so it's high time I pay it forward. I've already expressed this elsewhere, but feel compelled to say it again: deep gratitude to power-contributors tuanphan, creedon, and Beyondspace for their indefatigable generosity and expertise. I've rarely even needed to ask them anything directly – every time I have an issue, one or all of them has/have already solved it for another member. I've used the following code to address these common issues (final code in full below): 1. Missing hover effect on burger menu icon, accordion item titles, carousel scroll buttons, form input fields (both single line and longer text blocks), and form buttons: Change the ('a') in both its JavaScript appearances to ( 'a, input, button, sqs-block-button-element, textarea' ) (Full disclosure that I took a bit of a break after troubleshooting this and a bunch of other issues across a number of days, so I can’t quite remember which individual item each addition is addressing, but this string as it is solves the listed problems for me!) To save you my headache: A quick warning the 'sqs-block-button-element', which prompts the hover effect for the form submit button, won't automatically show its results (like everything else does) within the non-preview Squarespace window that displays next to the CSS and Code Injection panel. It should show in preview mode, but I can't vouch for certain – best to visit your website in a Private/Incognito window to view your changes 🙂. 2. Cursor sticking to original location then jumping to new position on scroll: Change left: e.pageX, top: e.pageY to left: e.clientX, top: e.clientY in JavaScript Change position: absolute; to position: fixed; in CSS 3. All default cursors (arrow, pointer, select, etc.) displaying along with custom cursor: This was addressed for me by adding * { cursor: none !important; } to the top of my CSS, as @tuanphan offered above, even though I already had cursor:none appearing later in my CSS. So, my current code is... Add to CSS: /* Custom cursor */ //Removes default cursor * { cursor: none !important; } //Stops custom cursor from appearing on mobile @media ( hover: none ) { .cursor { display:none !important; } } .cursor { --size: 15px; //Change this value to set your initial cursor size height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: fixed; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; //This defines the color of the cursor mix-blend-mode: difference; //Delete this line if you don't want the circle to invert transition: width 0.3s, height 0.3s, background-color 0.3s; //This changes the speed of the hover transition transition-timing-function: ease-out; } .cursor-dot.active { --size: 75px; //Change this value to set your hover cursor size background-color: #ffffff; } //end custom cursor Add to Code Injection > Header: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add to Code Injection > Footer: <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.clientX, top: e.clientY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> Now for the troubleshooting request! 1. In Chrome, the default (arrow) cursor is still showing momentarily after a link to another page has been clicked: Cursor issue in Chrome. 2. In Safari, the default (arrow) cursor is showing when a link is clicked; remaining visible for the entire duration of time between the click and the next page's load; and when next page loads, both the custom cursor AND the default cursor appear on the page until the cursor is moved: Cursor issue in Safari. Website: https://radicalhealing.ca No password I've scoured the forum and beyond for solutions and have some thoughts that I don't know how to address in code...will wait to share them as this might be really easy to solve and I don't want to make this post even longer!

Hi tuanphan – thanks so much for checking in! Yes, I managed to hack a fix by targeting the cursor and adding a tiny bit of padding to the right of it. I added this to the CSS area (in addition to all of the above code) for any future readers: /*Fixing cut off cursor on mobile */ span.typed-cursor {padding-right: 1px;}

Hoping someone might be able to provide some troubleshooting relevant to this! I'm running a version of Matt Boldt's Typed.js (modified from the code used in Beatriz Caraballo's excellent tutorial) that's working almost perfectly, save for one issue: on mobile only (both Chrome and Safari), the top of my blinking italicised cursor is cut off. When you highlight the cursor on desktop, you can see that the portion that's being cut off is falling outside of the highlighted area (in case this is relevant to the potential fix). Page URL: https://www.radicalhealing.ca/therapeuticapproach Password: RH2024! Code block: <h2> <center>RADICAL HEALING IS RADICALLY <br><em><span class="typed-words"></span><br></em></center> </h2> Header code injection: <script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script> Footer code injection: <script> var options = { strings: ['ethical.', 'relational.', 'embodied.', 'anti-oppressive.', 'experiential.', 'intersectional.', 'empathic.', 'responsive.', 'co-creative.', 'anti-racist.', 'vulnerable.', 'powerful.', 'collective.', 'anti-colonial.', 'present.', 'grounded.', 'emergent.', 'attuned.', 'systemic.', 'fractal.', 'dialectical.', 'integrative.', 'trauma-informed.', 'acceptant.', 'inquisitive.', 'analytical.', 'synthetical.', 'emotional.', '(self-)compassionate.', 'accountable.', 'resonant.', 'loving.', 'whole.^3500'], typeSpeed: 70, backSpeed: 50, backDelay: 500, startDelay: 500, loop: true, }; var typed = new Typed('.typed-words', options); </script> *Edited to properly credit the original developer of the code.*

Thank you so much for checking back in and spending the time to work this request out, tuanphan! I really appreciate it.

I've gone ahead and disabled the 'Expand first item' option in the Accordion Block Edit>Design area. Just the first accordion, the one next to the 'RELATIONAL' heading!

Hi Tuan, Yes, that's it exactly! And also (in case this is relevant to the logic of the final code) to allow both to be open at the same time.

Thank you so much, @tuanphan , for this incredible resource (and for ALL that you contribute to this community...I've benefitted tremendously from your, @creedon's, and @Beyondspace's generosity and expertise)! I've read through this thread in full and have also searched the forum, but haven't seen a solution to the following (likely because it's a bit of an odd request 😊). If possible, I'd like to set up one of my accordions so that the second item OPENS when/if the user closes the open-by-default first accordion item, the first item reopens if the user closes the second item, and both items can be open at the same time. So to put it another way, I'd the two-item accordion to be set to always have at least one item open, with the first item open by default. I know I can use the built-in SS features to set the first item as open and to allow multiple items to be open at the same time (it's set like this now). I tried to fiddle with code you'd provided in this thread to see if I could add this desired result but I had no luck. Page URL: https://www.radicalhealing.ca/therapeuticapproach Password: RH2024! (The accordion in question is #block-877d191977aa373aa088, next to the 'RELATIONAL' heading.)

Thank you so much, BeyondSpace – this code worked perfectly for me (with my own .fe-block, of course)! For those using the amazing (and indispensable) Squarespace ID Finder extension for Chrome, you can just copy your desired block's ID, delete the #, and add .fe- to the beginning everything remaining to target your .fe-block. I was running into this issue in a single usage of my sticky code for a reason that I haven't quite been able to decipher (I have two other seemingly identical sections on the same page – left aligned headers sticking to scroll alongside their respective accordions – that are working without the need for the height to be defined). A caveat for future readers that I needed to substantially increase the number after height for my site – to 280px(!) – so don't be afraid to really fiddle with that number to get your desired result 🙂.