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 70 of 801
How to Configure Nginx as Reverse Proxy for WebSocket
The WebSocket is a protocol which provides a way of creating web applications that supports real-time bi-directional communication between both clients and servers. WebSocket makes it much easier to develop these types of applications. Most modern browsers support WebSocket including Firefox, Internet Explorer, Chrome, Safari, and Opera, and more and more server application frameworks are now supporting WebSocket as well.For a production environment, where multiple WebSocket servers are needed for getting a good performance and high availability of the website or application, a load balancing layer which understands the WebSocket protocol is required, NGINX supports the use of WebSocket from ...
Read MoreDisabling Scroll Anchoring with CSS
To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. To disable scroll anchoring, set the overflow-anchor property to none − body { overflow-anchor: none; } To enable the scroll anchoring, set the value to auto that is also the default value. However, scroll anchoring behavior is enabled by default in any web browser. Disable Scroll Anchoring Let us see the example to disable scroll anchoring − Example body { ...
Read MoreEmbedded or internal Style Sheets in CSS
CSS files can be embedded internally by declaring them in tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can’t be cached. Internal CSS are declared in tag inside tag. Syntax The syntax for embedding CSS files is as follows − /*declarations*/ The following examples illustrate how CSS files are embedded − Internal Style Sheet for Styling a div We have used the to set the internal style sheet and styled our ...
Read MoreEffect of Color Property on Borders and Outlines in CSS
We can define the border color and outline color for an element. Unlike borders, outline doesn’t take up any space. The border-color property is used to set an element’s border color and the outline-color property is used to set its outline color. Syntax The syntax for CSS border-color and outline-color property is as follows − /*for setting border-color*/ Selector { border-color: /*value*/ } /*for setting outline-color*/ Selector { outline-color: /*value*/ } The following examples illustrate CSS border-color and outline-color property − Set Outline and Border for Span and div In this example, ...
Read MoreDisabling Pull-to-Refresh Feature on Mobile Browsers using CSS
We can change the output of scrolling a webpage’s boundary area using the CSS overscroll-behavior property. Through this, we can disable Pull-to-Refresh on browsers. Syntax The syntax of CSS overscroll-behavior property is as follows − Selector { overscroll-behavior: /*value*/ } The Overscroll-behavior The following example illustrate CSS overscroll-behavior property. It sets what a web browser does after reaching the boundary of a scrolling area. Here, we have set the overflow-behavior-y for the div to set the web browser's behavior when the vertical boundary of a scrolling area is reached. The value contain is set for ...
Read MoreDifference Between Pseudo-Class and Pseudo-Element in CSS
Pseudo-Class A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:). Syntax The syntax of CSS pseudo-class is as follows − :pseudo-class{ attribute: /*value*/ } Pseudo-Element Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::). Syntax The syntax of CSS pseudo-element is as follows − ::pseudo-element{ attribute: /*value*/ } Change the Link on Hover The following example illustrate changing the link on hover using the CSS pseudo class − Example ...
Read MoreDifferent Media Types in CSS
CSS Media Types are the device types on which the document is rendered and specific styles can be defined for every media type. The following are the Media Types in CSS3 and Media Queries − Sr.No Value & Description 1 allStylesheet applies to all media type devices 2 printStylesheet applies to printers 3 screenStylesheet applies to computer screens, tablets, smart-phones etc. 4 speechStylesheet applies to screen readers that "reads" the page out loud NOTE − Several media types (such as aural, braille, embossed, handheld, projection, ttv and tv) ...
Read MoreLocalStorage in ReactJS
In this article, we are going to see how to set and retrieve data in the localStorage memory of the user’s browser in a React application.LocalStorage is a web storage object to store the data on the user’s computer locally, which means the stored data is saved across browser sessions and the data stored has no expiration time.Syntax// To store data localStorage.setItem('Name', 'Rahul'); // To retrieve data localStorage.getItem('Name'); // To clear a specific item localStorage.removeItem('Name'); // To clear the whole data stored in localStorage localStorage.clear();Set, retrieve and remove data in localStorageIn this example, we will build a React ...
Read MoreDetect when an Element Gets Fixed in CSS position:sticky using Intersection Observer
By applying various CSS styles to the element with the sticky position, we can easily detect when an element gets fixed. Set the Sticky Navbar Div Create divs and set the navbar − Watch Me! Style the Top Navbar Set the height of the Top Navbar that will be fixed on the web page − #navbar-top { background-color: lightgrey; height: 2px; } Set the Container div With Position Fixed This will show the detection − #container { position: sticky; top: ...
Read MoreDefine Paddings for Individual Sides in CSS
CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-right properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction. Syntax The syntax of CSS padding property is as follows − Selector { padding-top: /*value*/ padding-right: /*value*/ padding-bottom: /*value*/ padding-left: /*value*/ } Set the Shorthand Padding Property The shorthand ...
Read More