In jQuery, we can trigger the ‘mousemove’ event to detect the mouse pointer's location on the web page. Also, we can detect the scroll using the ‘scroll’ event and subtract that value from the y position to get the relative mouse location. Using the ‘overflow-y: scroll’ CSS property, we can make any div scrollable. Syntax Users can follow the syntax below to get the relative mouse position while scrolling on the div. $('#main').scroll(function (event) { if (finalScroll != $('#main').scrollTop()) { location_y -= finalScroll; finalScroll = ... Read More

Sometimes, we may require to show and hide div based on the selected values. For example, you want to show the registration or login forms based on the radio button's selected value. Below, we will learn to show/hide the div elements based on the selected value using JQuery. Show/hide the div Element Depending on the Selected Value From the Select Menu In JQuery, we can get the selected option’s value from the ‘select’ menu. After that, we can access the div element according to the selected option value and show them. Syntax Users can follow the syntax below to show/div ... Read More

In this modern age of web development, effective and efficient management of tables has become important, peculiarly when dealing with data-heavy web applications. The ability to dynamically add, edit, and delete rows from a table can significantly enhance the user experience and make the application more interactive. One effective approach to achieve this is by utilizing the prowess of jQuery. jQuery provides a number of functionalities to help the developer to perform the actions. Table Row A table row, collection of inter-related data, is represented by the element in HTML. It is used to group cells (represented by the ... Read More

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

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 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 To convert the HTML Table into the Excel Spreadsheet can be done with the help of jQuery plugins. The “table2excel” is a lightweight plug-in of jQuery, which helps to achieve the solution to the problem. In this we will create a table using HTML tag in that we will create the number of rows using tag. The data is inserted inside the rows using the tag. Syntax The syntax used in this is − $(selector).table2excel({ filename: “”, fileext: “” }); selector − It can be any HTML ... Read More

In JavaScript, while working with the form elements, we need to validate the input fields and form elements when a user enters the value. In this tutorial, we will work with the file input. We will also learn to validate the file input. Sometimes, we may be required to check if the file is selected in the input field, then only enable the submit button; otherwise, disable the submit button. So, it will not allow users to submit the form or file without selecting it. Validate the file input using JavaScript In JavaScript, we can access the file input ... Read More

JavaScript and jQuery contain various plugins, and every plugin contains a couple of functions. JavaScript plugin works as a library, and we can use its code directly in our code. The jQuery touch event plugin is also a library used to detect touch events in mobile devices and execute some functions when a touch event occurs. Using the CDN, we can add the jQuery touch event plugin to the HTML. If users are working with the Node application, they should execute the below command in the project directory to add the jQuery touch events plugin to the application. ... Read More

The readonly is an HTML attribute that we can add to any HTML tag. Whenever we use the readonly attribute with any HTML element, it becomes non-editable. Users can’t write into the text field but can only read. In this tutorial, we will learn to add the readonly attribute to the HTML element using the various methods of jQuery. Use the attr() method of jQuery The attr() method of jQuery sets the attribute to the HTML element. It takes two parameters, and we can pass the attribute name as the first parameter and the attribute value as the second ... Read More