Abhineet.in

Tag: HTML

  • How to disable translation pop-up on website in Google Chrome

    Google Chrome on Android tries to show pages in user’s preferred language by continuously showing translation pop-up on each page load. This happens when website content is in a different language than user’s preferred language.

    But this creates issues in user experience by hiding bottom content on website. My site had fixed bottom navigation bar which was getting hidden by the translation pop-up and was badly ruining user experience by making it unusable at times.

    So, to disable these translation features, there are some meta tags that you can add to the head section of all your webpages.

    <!-- Disable translation in Google search -->
<meta name="googlebot" content="notranslate" />
<!-- Disable translation widget on Chrome -->
<meta name="google" content="notranslate" />

    The first meta tag disables translation in Google Search results, and the second one disables translation pop-up in Chrome.

    Problem solved.

    References:

  • Why click event not working on SVG

    I created a simple menu with SVG icons and to my surprise, clicking on the icon was not taking me to the linked url.

    It turned out that as SVGs are independent HTML objects, the target element is actually nested path. So, it does not match with the clicked element and thus click event listeners does not work on it.

    Similarly, if you add others event listeners to the parent element of the SVG’s, it does not work.

    There are multiple ways to fix this-

    1. Disable click on SVG elements by adding the CSS- pointer-events: none;

    2. Add event listener to the path element of SVG.

    Problem solved.

    References:

    1. https://gomakethings.com/detecting-click-events-on-svgs-with-vanilla-js-event-delegation/