Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Javascript Articles
Page 238 of 534
How to design hit the mouse game using HTML, CSS and JavaScript?
In this tutorial, we are going to build the famous hit the mouse game using HTML, CSS, and vanilla JavaScript. Many of you wondering what is Vanilla JavaScript, it is nothing just plain JavaScript written without the use of any libraries. In the hit the mouse game, the player needs to hit the mouse with the hammer in order to earn points and win the game. Approach To design the mouse game, we need to write the code IN HTML, CSS, and JavaScript. Step 1 − Firstly, let us look into the HTML part of the code; in this part, ...
Read MoreHow to Create Pong Game in JavaScript?
A Pong game is a two-player paddle game where each player’s task is to save the ball from hitting the wall. Whenever player 1 hits the ball at the opponent’s wall then player one will receive a point, and similarly, player 2 will get a point if he/she hits the ball at the opponent’s wall. In this tutorial, we will create a Pong Game in JavaScript. Approach To make the pong game using JavaScript we need to write code in HTML, CSS, and JavaScript. We have written certain functions in JavaScript to build the Pong game which is defined below ...
Read MoreHow to change an element's class with JavaScript?
The className property is used to change an element’s class. Here, we will see two examples − How to change the element’s class using className property. How to toggle between old and new classes. Change the element’s class using className property In this example, we will change the class of an element using the className property. Let’s say we have a div with class oldStyle − The div... We will set the above oldStyle class to a new class i.e. newStyle using the className property − function demoFunction() { ...
Read MoreHow to avoid jQuery function conflict with any other JavaScript library
In this tutorial, we will learn how to avoid jQuery function conflict with any other JavaScript library. For the jQuery function, the $ symbol is simply an identifier. A $ followed by a selector indicates that it is a jQuery selector. It is given a shorter identification as $ to save time while writing longer syntax. It includes all of the functions needed by a jQuery object, such as animation(), show(), hide(), show(), CSS, and many others. Furthermore, $ is superior in terms of memory to jQuery because $ takes a byte while jQuery uses 6 bytes for the same ...
Read MoreHow to set the bottom position of 3D elements with JavaScript?
In this tutorial, we will learn how to set the bottom position of 3D elements with JavaScript. In a web page, handling a 3D element can be tricky. Using JavaScript, we had to set the top, bottom, sides, etc. To set the bottom position of 3D elements, we use the perspectiveOrigin property of an element’s style object. Using style.perspectiveOrigin Property In JavaScript, the style.perspectiveOrigin property is used to set the bottom position or base position of a 3D element. Firstly, we get the element object using the document.getElementById() method and then set the style.perspectiveOrigin property. ...
Read MoreHow to set the amount by which the border image area extends beyond the border box with JavaScript?
In this tutorial, we will learn how to set a number up by which the border image area extends beyond the border box in JavaScript. To set the amount by which the border image is extended, you need to set the border outside edges. To do this we can apply the borderImageOutset style property provided in JavaScript. After creating a border image area for the HTML element, we might have to increase the area. By knowing a method to increase the border image area more than the border box, we can make the change without writing lengthy code. ...
Read MoreHow to set whether the text of an element can be selected or not with JavaScript?
In this tutorial, we will learn to set whether the text of an element can be selected or not with JavaScript. Use the userSelect property in JavaScript to enable or disable a text selection. For Firefox, use the MozUserSelect property and set it to none, to disable the selection. The CSS user-select property can set the text on a web page as selectable or nonselectable. But, sometimes, we must restrict the selection to a triggered event or a condition. Then, we can use the JavaScript DOM that provides nearly all CSS properties. So, let us look ...
Read MoreHow to set whether an element should be visible in JavaScript?
In this tutorial, we shall learn to set whether an element should be visible in JavaScript. Use the visibility property to hide or show an element. The visibility property takes different values such as visible, hidden, collapse, etc. To show an element, we set the visibility property to "visible" whereas to hide the element we set it to "hide". We can also set visibility using the display property. Let us briefly discuss the two properties in JavaScript to achieve our objective. Using the Style visibility Property JavaScript provides us with the visibility property with which we can ...
Read MoreHow to set the width of the right border with JavaScript?
This tutorial will teach us to set the width of the right border with JavaScript. To set the width of the right border, use the borderRightWidth property. Set the width of the right border using this property. We can also apply the borderWidth to set the right border. Borders are used on various elements on a webpage. They display the boundaries of an element. We can apply the borders to all sides of an element. There are different properties to set different sides of a border. For a static border, generally, CSS is used. But to change it dynamically, JavaScript ...
Read MoreHow to set the width of an element in JavaScript?
In this tutorial, we will learn to set the width of an element in JavaScript. We can use the "width" property in JavaScript to set the width of an element. The web page should be responsive on every screen. Each element on a web page should have its area covered. We can set the size of elements by setting their width and height. Let us look at how to set the width of an element in JavaScript. Following is the property by which we can set the width of an element in JavaScript − The width style property ...
Read More