Chrome Anchor Link Not Working Fix
One of my single page sites that had been live for months with no changes suddenly had the menu stop functioning in Chrome only. I can’t find an exact reason for the break, but I did find a cross-browser JavaScript solve that fixes the issue nicely. Just add the snippet to your site and the links should work automatically. Note that this fix requires jQuery but can be converted to VanillaJS.
/* Navigation Fix -----------------------------------------------------*/ $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
Someone reached out to me today for help as the fix broke their WordPress site. If you’re using WordPress, this version uses the compatibility version of jQuery they provide out of the box. Be sure to place it in a javascript file and not your functions.php. Rui was kind enough to confirm the fix also works for Drupal 7. Â
/* WordPress Navigation Fix -----------------------------------------------------*/ jQuery(function ($) { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
How to Copy and Paste into the Digital Ocean VNC Console
I recently signed up for Digital Ocean to test droplets for my development and linux management testing. I was securing the server and setup fail2ban, disabled the root login, and created a user account but forgot to change the user name from root to the user name I selected in my SSH client profile. I ended up locking myself out of the server and had to resort to logging into the admin panel on Digital Ocean’s website and use their browser embedded VNC client to restore my access. I quickly discovered that one of the downsides of using this panel is that you can’t copy and paste commands. Luckily there’s a workaround and you can use the browser console to do sendkeys through Javascript.
Bring up the console in the browser developer tools. Here’s a cheat sheet for keyboard shortcuts:
Browser | Description | Windows | Mac |
---|---|---|---|
Chrome | Open Developer Tools and bring focus to the console | Ctrl + Shift + J | Cmd + Opt + J |
Firefox | Open Console | Ctrl + Shift + K | Cmd + Opt + K |
Internet Explorer | After hitting F12, you have to click the console tab. There’s no direct shortcut to the console tab. | F12 | N/A |
!function(){function t(){window.rfb.sendKey(e.shift().charCodeAt()),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();
Update 9-21-16
Ruden and Sebastiaan’s pointed out there was a bug in the code above. This updated snippet has support for characters when using shift characters like !@#$%^&*()_+
!function(){function t(){function n(t,e){s=s.concat(RFB.messages.keyEvent(t,e))}var o=e.shift(),s=[],i=o.charCodeAt(),c=-1!=='!@#$%^&*()_+{}:"<>?~|'.indexOf(o),r=XK_Shift_L;c&&n(r,1),n(i,1),n(i,0),c&&n(r,0),rfb._sock.send(s),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();
You’ll receive a dialog prompt to enter the copy to paste in. Please note that you need to click on the VNC console and hit enter to execute the command.
If you need to enter more than one command, just hit the up arrow on your keyboard in the console to get the script again for easy reuse.