Wednesday, October 20

Javascript

Javascript, Web Tricks

How to disable the mobile keyboard from displaying on click of the input field

Have you ever needed a way to disable the mobile screen keyboard from displaying for a specific input field?I was recently working on a Shopify website where there was a filter on the products listing page. I found an issue that on click of that filter it was opening keyword on the mobile screen. I debugged and found that it's a bootstrap filter and creating an input box automatically at run time.The solution to this was rather simple and I’d like to share it here for anyone else who is looking for a solution to this problem.To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below.// Using ID field$('#input_id').attr('readonly','readonly');// Using class name$('.input_class').attr('reado...
CSS Tricks, Javascript

Let’s Create a Lightweight Native Event Bus in JavaScript

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub.The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs co...
CSS Tricks, Javascript

How to Animate the Details Element Using Web Animations API

Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2006.In this article, we will see how you can animate the native <details> element using the Web Animations API. CodePen Embed Fallback HTML setup First, let’s see how we are gonna structure the markup needed for this animation.The <details> element needs a <summary> element. The summary is the content visible when the accordion is closed. All the other elements within the <details> are part of the inner content of the accordion. To make it easier for us to animate that content, we are wrapping it inside a <div>. <details> <summary>Summary of the accordion</summary&g...
CSS Tricks, Javascript, Web Tricks

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.   The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript. For example, here’s an Alpine.js demo of an interactive “alert” component. CodePen Embed Fallback The alert message is two-way bound to the input using...