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
-
Economics & Finance
Articles by vanithasree
Page 2 of 6
How to create a custom object in JavaScript?
JavaScript offers multiple ways to create custom objects. Each method has its own syntax and use cases, making JavaScript flexible for object-oriented programming. Method 1: Using Object Constructor The new Object() constructor creates an empty object that you can populate with properties: var dept = new Object(); dept.employee = "Amit"; dept.department = "Technical"; dept.technology = "Java"; ...
Read MoreWhat is onclick event in JavaScript?
The onclick event is one of the most frequently used JavaScript events. It triggers when a user clicks an HTML element, typically with the left mouse button. Syntax The onclick event can be added in three ways: // Method 1: Inline HTML attribute Click Me // Method 2: Element property element.onclick = function() { /* code */ }; // Method 3: Event listener (recommended) element.addEventListener('click', function() { /* code */ }); Example: Inline onclick The simplest approach is using the onclick attribute directly in HTML: ...
Read MoreHow to find whether a browser supports JavaScript or not?
To find whether a browser supports JavaScript or not, use the tag. The HTML tag is used to handle browsers which recognize the tag but do not support scripting. This tag displays an alternate message when JavaScript is disabled or unsupported. Using the Tag The element provides fallback content that displays only when JavaScript is unavailable. Content inside is hidden when JavaScript is enabled. JavaScript Support Detection document.write("JavaScript ...
Read MoreHow to disable JavaScript in Internet Explorer (IE)?
To disable JavaScript in Internet Explorer (IE), you can control script execution through the browser's security settings. This is useful for testing websites without JavaScript or enhancing security in certain environments. Steps to Disable JavaScript in IE Follow these steps to disable JavaScript in Internet Explorer: Step 1: Click the gear icon (Settings) located on the right-hand side of the browser toolbar. Step 2: From the dropdown menu, select Internet Options. A dialog box will open with multiple tabs. Step 3: Navigate to the Security tab and click the Custom level button to ...
Read MoreWhat is the difference between Bower and npm in JavaScript?
npm and Bower are JavaScript package managers that handle dependencies differently. Understanding their differences helps choose the right tool for your project. npm (Node Package Manager) npm is primarily designed for Node.js modules and uses a nested dependency tree. It works for both server-side and front-end development, supporting tools like Grunt, Webpack, and CoffeeScript. npm allows multiple versions of the same package to coexist, preventing dependency conflicts through nested installation. Dependency Structure project root [node_modules] -> dependency P -> dependency Q [node_modules] -> dependency P (different version) ...
Read MorePerform Animation on CSS opacity
The CSS opacity property controls the transparency of an element. When combined with CSS animations, you can create smooth fade-in and fade-out effects that enhance user experience on web pages. Syntax @keyframes animation-name { from { opacity: start-value; } to { opacity: end-value; } } selector { animation: animation-name duration timing-function iteration-count; } Possible Values ValueDescription 0Completely transparent (invisible) 0.550% transparent 1Completely opaque (fully visible) Example: Fade Animation The following example demonstrates opacity animation with multiple overlapping ...
Read MoreCSS white-space Property
The CSS white-space property controls how white-space characters (spaces, tabs, line breaks) inside an element are handled. It determines whether white-space is preserved, collapsed, or wrapped. Syntax selector { white-space: value; } Possible Values ValueDescription normalDefault. White-space is collapsed and text wraps normally nowrapWhite-space is collapsed but text does not wrap preWhite-space is preserved and text does not wrap pre-wrapWhite-space is preserved but text wraps when necessary pre-lineWhite-space is collapsed except for line breaks Example: Comparing white-space Values The following example demonstrates different white-space property values ...
Read MoreCSS animation-timing-function property
The CSS animation-timing-function property specifies the speed curve of an animation. It defines how an animation progresses during its duration, controlling whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed. Syntax animation-timing-function: value; Possible Values ValueDescription easeSlow start, fast middle, slow end (default) ease-inSlow start, then fast ease-outFast start, then slow ease-in-outSlow start, fast middle, slow end linearConstant speed throughout cubic-bezier(x1, y1, x2, y2)Custom timing function Example: Different Timing Functions The following example demonstrates various timing functions applied to animated boxes ...
Read MoreSet an animation with a slow start and end using CSS
The CSS animation-timing-function property controls the speed curve of animations. Use the ease-in-out value to create animations that start slowly, speed up in the middle, and slow down at the end for smooth, natural motion. Syntax selector { animation-timing-function: ease-in-out; } Possible Values ValueDescription ease-in-outSlow start and slow end easeSlow start, fast middle, slow end (default) ease-inSlow start only ease-outSlow end only linearConstant speed throughout Example The following example demonstrates an animation with slow start and end using ease-in-out − ...
Read MoreRole of CSS : read-only Selector
The CSS :read-only selector is used to select form elements that have the readonly attribute set. This pseudo-class targets input fields and textarea elements that users cannot modify, making it useful for styling non-editable form fields differently from editable ones. Syntax :read-only { /* styles */ } input:read-only { /* styles for read-only input elements */ } textarea:read-only { /* styles for read-only textarea elements */ } Example: Basic Read-Only Styling The following example demonstrates how to style read-only input ...
Read More