Found 10711 Articles for Web Development

Top 5 HTML Tricks That You Should Know

Shubham Vora
Updated on 21-Apr-2023 16:25:32

1K+ Views

HTML is used to create web pages. In every new release of HTML, developers make some changes and add unique features. Here, we will discuss that unknown features by most developers who can help developers improve web pages. Here, we have explained the top 5 HTML tricks with examples. Color Picker in HTML We can create a color picker in HTML using the tag. It allows us to pick up any colour by clicking on the colour or adding RGB values. Syntax Users can follow the syntax below to create a color picker using HTML. In the ... Read More

Toggle class by adding the class name when element is clicked and remove when clicked outside

Shubham Vora
Updated on 21-Apr-2023 16:23:03

5K+ Views

Sometimes, we need to highlight the HTML element when we click it and make it normal when we click outside the HTML element. We can achieve it by toggling the class in the element. Here, the meaning of the toggling class is adding and removing the class. In this tutorial, we will learn to add the class name to the element when users click the element and remove the class name from the element when users click outside the element. Using the Add() and Remove() Method to Toggle Class When Clicking Inside and Outside of the Element In JavaScript, add() ... Read More

Snowfall Animation Effect using CSS

Shubham Vora
Updated on 21-Apr-2023 16:21:45

414 Views

We can create an animation using HTML and CSS. When we add animation to the webpage, it improves the UX of the application. We can create various animations using the CSS keyframes property and use it using the ‘animation’ CSS property. In this tutorial, we will learn to create a snowfall animation effect using CSS. Syntax Users can follow the syntax below to create a snowfall animation effect using CSS. .snow{ animation: snow 7s linear infinite; } .snow:nth-child(2) { left: 20%; animation-delay: 1s; } In the above syntax, ... Read More

How Can Calculate HTML Input Values And Show Directly Input Value By JQuery?

Yaswanth Varma
Updated on 21-Apr-2023 15:53:44

820 Views

There are several JavaScript methods we can use to retrieve the value of the text input field. We may access or set the value of the text input field inside the script by using the jQuery .val() method. The task we are going to perform in this article is calculating HTML input values and showing them directly using JQuery. Let’s dive into the article for a better understanding. Using JQuery val() method To retrieve the values of form components like input, select, and textarea, utilize the .val() function. It returns undefined when called on a collection that is empty. Syntax ... Read More

How to Use Conditional Statements On Objects?

Yaswanth Varma
Updated on 21-Apr-2023 15:51:23

612 Views

Conditional statements are used to control how an execution will proceed in response to various circumstances. You can take one action if a condition is true and another action if the condition is false. Conditional statements are the component of a computer program's logic, decision-making, or flow control. The task we are going to perform in this article was using conditional statements on objects. Let’s dive into the article for getting better understanding on conditional statements. Using if statement The if statement is the most basic type of conditional expression. If a statement is evaluated to see whether it is ... Read More

How To Show Only One V-Menu At A Time When Clicking To Show The Menu?

Yaswanth Varma
Updated on 21-Apr-2023 15:50:05

801 Views

The task we are going to perform in this article was how to show only one v-menu at a time when clicking to show the menu, let’s dive into the article for getting better understanding on v-menu. A customized version of NativeUI was used to create the server-side trainer and menu known as vMenu. It features complete permissions support, allowing the server owner to control who can do what. Displaying v-menu A user interface's menu is a flexible element. It displays a popover with a variety of uses, like presenting a menu of choices. They may be used in conjunction ... Read More

How To Add An HTML Element Starting After One And Finishing Before Another One?

Yaswanth Varma
Updated on 21-Apr-2023 15:47:38

105 Views

This article shows how to add an HTML element in between two existing elements. This is a common task when creating webpages, and can be achieved with a few simple steps. We will be using the JavaScript API to access and manipulate the elements on our webpage. The task we are going to perform in this article is adding an HTML element, starting after one and finishing before another one. For this, we are going to use insertBefore() method. Using insertBefore() method The Node interface's insertBefore() method places a node as a child of a given parent node ahead of ... Read More

How to Make Scrollbar Custom Arrows Work on Mobile Devices?

Yaswanth Varma
Updated on 20-Apr-2023 17:23:45

1K+ Views

You may have noticed websites with distinctive scrollbars that give them a unique feel and appearance since custom scrollbars are becoming more and more common. A custom scrollbar can simply be implemented in a few different ways. The easiest method will be used in this article, which is CSS. We employ CSS to enhance the visual appeal of web pages in our applications. Using CSS, we can now change how the scrollbar looks. Let’s see how to make scrollbar custom arrows work on mobile devices. Making scrollbar custom arrows work on mobile devices Back in the day, scrollbars on websites ... Read More

How To Modify This JavaScript Code To Grab An Image URL From A JSON File, And Display It In HTML?

Yaswanth Varma
Updated on 20-Apr-2023 17:16:40

8K+ Views

This can be done by using the JavaScript method JSON.parse() to parse through the JSON file and extract the URL of the desired image. Then, an HTML img tag can be created with a source attribute set to this URL. Finally, this img tag can be appended to an existing HTML element in order to display it on your page. This will require some knowledge of basic JavaScript syntax, as well as familiarity with how JSON is structured and parsed within it. With these skills in hand, you should have no trouble modifying your code to achieve your goal! Let’s ... Read More

JavaScript Program for Check if an array is sorted and rotated

Prabhdeep Singh
Updated on 21-Apr-2023 09:16:19

176 Views

A sorted array is an array where all the elements are present in increasing order. We have given an array of size N and an array containing the distinct integers (which means every integer is present only one time). We have to check the array is sorted and rotated in a clockwise direction. Here we have to return ‘YES’ if the array is sorted and rotated otherwise, we have to return ‘NO’. Note − Here we are talking about the sorted and rotated means at least one rotation should be present. We cannot consider a sorted array as a sorted ... Read More

Advertisements