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
Page 56 of 801
Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
Using the CSS pointer-events property we can control whether a mouse and touch are allowed on an element.The syntax of CSS pointer-events property is as follows −pointer-events: auto|none;Above,auto is default. Element reacts to pointer events, whereasnone: Element does not react to pointer eventsExampleThe following examples illustrate CSS pointer-events property. a { margin: 10vh; pointer-events: none; } a:last-of-type { pointer-events: auto; } No pointer event here Automatic pointer event here OutputThis will produce the following result −Example select { margin: 10vh; pointer-events: none; background-color: mistyrose; } No event here a b c OutputThis will produce the following result −
Read MoreCreating Attractive First Lines with CSS ::first-line
The CSS ::first-line pseudo-element helps us style first line of an elementThe following examples illustrate CSS ::first-line pseudo-element.Example body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; color: black; font-weight: bold; text-shadow: 0 -10px grey; } Donec rutrum a erat vitae interdum. Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ...
Read MoreCrop Images in CSS with object-fit and object-position
CSS object-fit and object-position property helps us crop images and specify how it is displayed in an element.The syntax of CSS object-fit property is as follows −Selector { object-fit: /*value*/ object-position:/*value*/ }ExampleThe following examples illustrate CSS object-fit property. img { object-fit: cover; } img:last-of-type { object-fit: contain; } cover contain OutputThis will produce the following result −Example div { border: 1px solid blue; width:100%; height:300px; } img { float:left; width:50%; height:100%; object-fit:cover; object-position: 20px -10px; } OutputThis will produce the following result −Effect of resizing
Read MoreCreating a Full Height Page with Fixed Sidebar and Scrollable Content Area in CSS
A full-height page with a fixed sidebar and scrollable content area can be created by setting the height to 100% and applying proper positioning of elements.The following example illustrates the above.Example .main { margin-left: 140px; font-size: 200%; padding: 0 3%; } section { height: 400px; background-color: tomato; } .sidebar { height: 100%; width: 140px; top: 0; left: 0; position: fixed; background-color: darkslategrey; padding-top: 20px; } .sidebar a { display: block; padding: 2% 4%; text-decoration: none; color: lightblue; font-size: 1.4em; } ...
Read MoreCreating a Page with Sidebar and Main Content Area using HTML & CSS
A webpage with fluid sidebar and main content area is created by setting the size of html and body to 100%.The following example illustrates this.Example html,body { height: 100%; color: white; font-size: 2em; line-height: 200px; } #parent { display: table; width: 100%; height: 100%; } #side { display: table-cell; background-color: turquoise; width: 20%; vertical-align: top; box-shadow: inset 0 0 10px black; } #main { display: table-cell; width: 80%; background: url("https://images.unsplash.com/photo-1611944444060- b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600"); } Side Main OutputThis will produce the following result −
Read MoreIs the string a combination of repeated substrings in JavaScript
ProblemWe are required to write a JavaScript function that takes in a string of characters as the only argument. Our function needs to check if the string str can be constructed by taking a substring of it and appending multiple copies of the substring together.For example, if the input to the function is −const str = 'thisthisthisthis';Then the output should be −const output = true;Output Explanation:Because the string is made by appending ‘this’ string repeatedly.ExampleThe code for this will be −const str = 'thisthisthisthis'; const repeatedSubstring = (str = '') => { const {length} = str; const checkSubString ...
Read MoreSorting string characters by frequency in JavaScript
ProblemWe are required to write a JavaScript function that takes in the string of characters as the only argument.Our function should prepare and a new string based on the original string in which the characters that appear for most number of times are placed first followed by number with decreasing frequencies.For example, if the input to the function is −const str = 'free';Then the output should be −const output = 'eefr';Output Explanation:Since e appears twice it is placed first followed by r and f.ExampleThe code for this will be −const str = 'free'; const frequencySort = (str = '') => ...
Read MoreFinding Sum of Left Leaves of a BST in JavaScript
ProblemWe are required to write a JavaScript function that takes in the root of a Binary Search Tree as the only argument.The function should simply calculate the sum of data stored in the left leaves of the BST.For example, if the Tree looks like this −8 / \ 1 10 / \ 5 17Then the output should be −const output = 6;Output Explanation:Because there are two left leaves in the Tree with values 1 and 5.ExampleThe code for this will be −class Node{ constructor(data) { this.data = data; this.left = null; ...
Read MoreSmallest number after removing n digits in JavaScript
ProblemWe are required to write a JavaScript function that takes in two numbers, let’s call them m and n as first and the second argument respectively.The task of our function is to remove n digits from the number m so that the number m is the smallest possible number after removing n digits. And finally, the function should return the number m after removing digits.For example, if the input to the function is −const m = '45456757'; const n = 3;Then the output should be −const output = '44557';Output Explanation:We removed 5, 6 and 7 digit to get the smallest ...
Read MoreBring number down to 1 in JavaScript
ProblemWe are required to write a JavaScript function that takes in number, num as the only argument.Our function can do only these two operations on num: If num is even, we can replace num with num/2If num is odd, we can replace num with either num + 1 or num - 1.Using only a combination of these two operations our function is required to compute how many minimum operations it requires to bring num down to 1. The function should return the minimum number of operations.For example, if the input to the function is −const num = 7;Then the output ...
Read More