Jump to content

cat_not_kitty

Member
  • Posts

    12
  • Joined

  • Last visited

Reputation Activity

  1. Love
    cat_not_kitty got a reaction from moonlitdesign in Custom cursor not moving with scroll   
    Pointing to some additional troubleshooting and clarifications for this code, for any future users!
  2. Love
    cat_not_kitty got a reaction from moonlitdesign in Custom cursor hover effect   
    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!
  3. Thanks
    cat_not_kitty reacted to waynecai in Custom cursor not moving with scroll   
    Modified from @creedon 
     
     
    The following code works for me:
    Add the following to Design > Custom CSS.
    * {   cursor: none;   } .cursor {   --size: 30px;   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 dont want the circle to invert */   transition: width 0.3s, height 0.3s, background-color 0.3s;   transition-timing-function: ease-out;   } .cursor-dot.active {   --size: 50px;    background-color: #ffffff;   }  
    Add the following to Settings > Advanced > Code Injection > HEADER. 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   
    Add the following to Settings > Advanced > Code Injection > FOOTER. 
     
    <script>   $( ( ) => {         $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );          var cursor = $(".cursor");          $( window ).mousemove ( function ( e ) {       cursor.css ( {                  top: e.clientY,             left: e.clientX         } );          } );            $( window ).mousemove ( function ( e ) {       $( 'a' ).on ( 'mouseenter', function ( ) {          cursor.addClass ( 'active' );         } );       } );           $( window ).mousemove ( function ( e ) {       $( 'a' ).on ( 'mouseleave', function ( ) {         cursor.removeClass ( 'active' );         } );       } );     } );        </script>  
     
     
     
     
  4. Like
    cat_not_kitty got a reaction from tuanphan in Animated type & delete typewriter text custom code   
    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;}  
     
  5. Thanks
    cat_not_kitty reacted to Beyondspace in Promotional pop up frequency   
    You can place the code on your home page code injection

  6. Thanks
    cat_not_kitty reacted to humxahafeex in Promotional pop up frequency   
    Hi @arek It's way too easy what you have to do is to put the following code to Settings > Advance > Code Injection>Header ,What this code will do it will pop up every time user visit the website.
    <script> window.localStorage.setItem('test', '0'); window.localStorage.setItem('squarespace-popup-overlay', '0'); </script>  
    Tested and it worked perfectly fine , Hope it works perfectly fine for you 🙂 
    NOTE: TEST IT ON INCOGNITO OR  ON PRIVATE WINDOW. 
    If it works for you don't forget to mark it as solved by clicking arrow on top left of this answer 🙂 
  7. Thanks
    cat_not_kitty reacted to creedon in Inverted Cursor Hover Effect   
    @Jprood
    I think I have the answer to your issues.
    First remove (make a copy) or comment out any code that you added in previous attempts.
    Add the following to Design > Custom CSS.
    @media ( hover: none ) {   .cursor {        display: none !important;          }   } * {   cursor: none;      } .cursor {   --size: 10px;      height: var( --size );   width: var( --size );      border-radius: 50%;   pointer-events: none;   position: absolute;   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 dont want the circle to invert */   transition: width 0.6s, height 0.6s, background-color 0.6s;   transition-timing-function: ease-out;      } .cursor-dot.active {   --size: 50px;      background-color: #ffffff;      } Add the following to Settings > Advanced > Code Injection > HEADER. 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. 
     
    <script>   $( ( ) => {        $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );        $( window ).mousemove ( function ( e ) {            $( '.cursor' ).css ( {                left: e.pageX,         top: e.pageY                  } );                } );            $( window ).mousemove ( function ( e ) {            $( 'a' ).on ( 'mouseenter', function ( ) {                  $( '.cursor' ).addClass ( 'active' );                  } );                } );            $( window ).mousemove ( function ( e ) {            $( 'a' ).on ( 'mouseleave', function ( ) {                $( '.cursor' ).removeClass ( 'active' );                  } );                } );            } );        </script> You will need to change the colors to match your color scheme.
    Let us know how it goes.
  8. Thanks
    cat_not_kitty reacted to Beyondspace in Sticky element not working   
    May be you can try
    .fe-block-fdf87f3b28856d0d23e5 { position: sticky; top: 30px; height: 1px; } Hope it can help
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.