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
Web Development Articles
Found 8,006 articles
What is $(window).load() method in jQuery?
The code which gets included inside $( window ).on( "load", function() { ... }) runs only once the entire page is ready (not only DOM).Note: The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0. To see its working, add jQuery version for CDN before 3.0.ExampleYou can try to run the following code to learn how to use $(window).load() method in jQuery − $(document).ready(function(){ $("img").load(function(){ alert("Image successfully loaded."); }); }); Note: The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0. To see its working, add jQuery version for CDN before 3.0.
Read MoreHow to animate a change in background color using jQuery on mouseover?
To change background color, use the mouseenter event. The background color change when you place mouse cursor:mouseenter: function(){ $(this).css("background-color", "gray"); }The mouse cursor is placed on the following element:Click and move the mouse pointer to change the background color.You can try to run the following code to learn how to animate a change in background color on mouseover:Example $(document).ready(function(){ $("body").on({ mouseenter: function(){ $(this).css("background-color", "gray"); }, mouseleave: function(){ $(this).css("background-color", "red"); }, }); }); Click and move the mouse pointer to change the background color.
Read MoreHow to center a div on the screen using jQuery?
To center a div on the screen, use the jQuery centering function jQuery.fn.center. You can try to run the following code to learn how to center a div on the screen:Example $(document).ready(function(){ jQuery.fn.center = function(parent) { if (parent) { parent = this.parent(); } else { parent = window; } this.css({ "position": "absolute", "top": ((($(parent).height() - ...
Read MoreHow to add a colored border to a button with CSS?
To add colored border, use the CSS border property.ExampleYou can try to run the following code to add a colored border. .button { background-color: yellow; color: black; text-align: center; font-size: 15px; padding: 20px; border-radius: 15px; border: 3px dashed blue; } Result Click below for result: Result
Read MoreHTML DOM Input Email autocomplete Property
The HTML DOM Input Email autocomplete property sets/returns whether autocomplete is enabled or disabled. If enabled, it shows previously typed values.SyntaxFollowing is the syntax −Returning value - on/offinputEmailObject.autocompleteSetting autocomplete to valueinputEmailObject.autocomplete = valueValuesHere, “value” can be the following −valueDetailsonIt defines that input has autocomplete enabled, it is also the default.offIt defines that input autocomplete attribute is disabled.ExampleLet us see an example of Input Email autocomplete property − Input Email autocomplete form { width:70%; margin: 0 auto; text-align: center; } * { padding: ...
Read MoreSet Flex Items into equal width columns with Bootstrap
To set flex items to be of equal width column, use the flex-fill class. The class displays the items as equal width. In the below example screenshot, you can see that we have four flex items with equal width columns −The flex-fill class is used for every flex items and in this way, we can set equal width. Below, we have two flex items − Example 1 Example 2 Example Bootstrap Example With flex-fill Example 1 Example 2 Example 3 Example 4 Without .flex-fill: Example 1 Example 2 Example 3 Example 4
Read MoreHTML DOM Input Month readOnly Property
The HTML DOM input month readOnly property returns and modify whether the input month field is read-only or not in an HTML document.SyntaxFollowing is the syntax −1. Returning readOnlyobject.readOnly2. Modifying readOnlyobject.readOnly = true | falseExample html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } p{ font-weight:700; font-size:1.1rem; } input{ display:block; width:35%; ...
Read MoreTraversing Diagonally in a matrix in JavaScript
Problem:We are required to write a JavaScript function that takes in a square matrix (an array of arrays having the same number of rows and columns). The function should traverse diagonally through that array of array and prepare a new array of elements placed in that order it encountered while traversing.For example, if the input to the function is −const arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];Then the output should be −const output = [1, 2, 4, 7, 5, 3, 6, 8, 9];Exampleconst arr = [ [1, 2, 3], ...
Read MoreCommon element with least index sum in JavaScript
ProblemWe are required to write a JavaScript function that takes in two arrays of literals, arr1 and arr2, as the first and the second argument.Our function should find out the common element in arr1 and arr2 with the least list index sum. If there is a choice tie between answers, we should output all of them with no order requirement.For example, if the input to the function is−const arr1 = ['a', 'b', 'c', 'd']; const arr2 = ['d', 'a', 'c'];Then the output should be −const output = ['a'];Output ExplanationSince 'd' and 'a' are common in both the arrays the index ...
Read MoreJavaScript One fourth element in array
ProblemJavaScript function that takes in an array of integers sorted in increasing order, arr.There is exactly one integer in the array that occurs more than one fourth times (25%) of the times, our function should return that number.For example, if the input to the function is −const arr = [3, 5, 5, 7, 7, 7, 7, 8, 9];Then the output should be −const output = 7;Exampleconst arr = [3, 5, 5, 7, 7, 7, 7, 8, 9]; const oneFourthElement = (arr = []) => { const len = arr.length / 4; const search = (left, right, target, direction = 'left') => { let index = -1 while (left
Read More