We have different methods for creating Unordered listviews using jQuery. Unordered listviews are a way to display a list of items in an organized manner using the jQuery Mobile framework. We can easily create unordered listviews that are responsive, customizable, and compatible with a wide range of devices and platforms. In this tutorial, we'll explore some of the key techniques and best practices for creating unordered listviews using jQuery Mobile. Approaches We have two different approaches to creating Unordered listviews using jQuery including the following − Using the “data-role method” Using the “CSS style” Let us look ... Read More

In this article, we will be creating a Wave Loader using CSS. Wave loader is a loading animation with a wave-like effect. It is a standard way for signaling progress in online applications, and it may enhance the user experience by indicating that material is being loaded. Making a CSS wave loader is a basic technique that uses CSS animation and keyframes. You may design a dynamic and aesthetically beautiful wave loader that can be adjusted to meet your individual demands by setting the animation attributes and keyframes. Approaches There are various techniques to employ CSS to create a ... Read More

In this article, we use CSS to create a wave ball effect can offer a unique and visually attractive touch to any website or application. This effect can be used to make buttons, progress indicators, and other user interface elements stand out from the crowd. To get this effect, you will need to be familiar with several fundamental CSS attributes such as border-radius, box-shadow, and animation. Approaches To generate a wave ball effect using CSS, there are numerous techniques that can be done. Among the most common approaches are − Using `box-shadow` Using `animated gradient` Let us ... Read More

A navigation bar is a graphical feature that allows users to navigate through a website or application. It is typically presented as a list of links at the top or side of the screen and assists users in navigating to various areas or pages within the website. HTML and CSS can be used to build horizontal or vertical navigation bars. HTML is used to specify the structure and content of the navigation bar, whilst CSS is used to design and make the navigation bar look appealing. You may improve the overall user experience and make it easier for users to ... Read More

Overview jQuery is a fast, small, and feature-rich JavaScript library. It helps in DOM manipulation, event handling, animation, CSS and Ajax. To achieve the requirement we’ll use the “is(selector)” method of jQuery. is(selector) This method checks the currently selected elements against an expression/selector and returns true if any one of the selected elements matches with the selector. In the below code, we have created a container with the class “test”. We want to change the background color of the container when it is clicked. So, “test” which is the class name of the container will be used as a selector ... Read More

Overview A notification icon is a common feature that exists in each and every application. In order to count the number of notifications and display it on an icon can be achieved with basic knowledge of JavaScript. So to build this feature we should have some prior knowledge about HTML Document Object Model (DOM), CSS, and Bootstrap. Approach To start building this feature first we had to link some of the Content Delivery Network (CDN) links to our HTML page. Font Awesome CDN Link − Bootstrap CDN Link − ... Read More

Overview To count each and every element in the HTML document including the head tag and body tag can be achieved using the jQuery "length()" method. By selecting the universal selector ( * ) as selector and calculating the length of its using length property will return the number of the elements contained in the HTML document page. Syntax The syntax used to count the number of elements is − $(“*”).property; selector − The selector used in this is the universal selector, as the name itself describes that it selects each and every element of the page. ... Read More

Overview The conversion of a title to URL Slug is also known as to “Slugify” a title. An URL Slug refers to a title which is descriptive by itself and is easy to read. It is attached to the URL of a page which tells about the current page as the slug is self-descriptive. So to convert a title to slug using JavaScript can be achieved using certain JavaScript functions such as toLowerCase(), replace(), trim(). Algorithm Step 1 − Create a HTML page with two input tags and add the id attribute in it as “title” and “urlSlug” respectively, ... Read More

Overview To convert the String type value to the Number type value is easy to manipulate with AngularJs as it has in-built function such as parseInt(), parseFloat() which convert the String type of number to the Number type and “isNumber()” function of angular which cross check whether the given data is converted to the number or not. For example if a number is of type decimal String type then we will use parseFloat() function to convert the String to Number, otherwise if we had to convert without the decimal number then we will use parseInt() function. Syntax The syntax used ... Read More

Overview To convert the spoken words to the text we generally use the Web Speech API’s component that is “SpeechRecognition”. The SpeechRecognition component recognizes the spoken words in the form of audio and converts them to the text. The spoken words are stored in it in an array which are then displayed inside the HTML element on the browser screen. Syntax The basic syntax used in is − let recognization = new webkitSpeechRecognition(); We can also use SpeechRecognition() instead of webkitSpeechRecognition() as webkitSpeechRecognition() is used in chrome and apple safari browser for speech recognition. Algorithm Step 1 ... Read More