Web Development Articles - Page 544 of 1049

How to change tabs on hover with CSS and JavaScript?

Aman Kumar
Updated on 19-Dec-2022 13:52:33

2K+ Views

In this article, we will discuss how to change tabs on hover with CSS and JavaScript. Hover Tabs are the easiest way to access the content of other tabs without leaving the current tab. When you hover over a tab that is not currently open, the content inside it will be displayed in a small window. Let us suppose you are accessing the Google Chrome browser with two tabs: one tab with a blog and the other tab containing a social media network. When you hover over the tab with social media network tab while accessing the blog tab, the ... Read More

How to create full-page tabs with CSS and JavaScript?

Aman Kumar
Updated on 19-Dec-2022 13:49:57

2K+ Views

In this article, we will discuss how to create full-page tabs with CSS and JavaScript. Full-Page Tabs, like the name suggests, are tabs that are displayed on the entire page instead of a section. To create a full page tab, you need to set the height of the page to 100%. You can do this using the height property, i.e. you need to create a CSS class, then set the height to 100vh and set this class as a style class of the individual tab elements those you need with full page length. By creating full page tabs, we are ... Read More

How to create tab headers with CSS and JavaScript?

Aman Kumar
Updated on 19-Dec-2022 13:47:13

1K+ Views

In this article, we are going to discuss how to create tab headers with CSS and JavaScript. The header elements represent a container using some introductory content or with the set of navigation links. In general, header elements typically contain one or more elements. Tab headers represent the content present in each tab or provide some navigation links that links the user to any tab they click on. Steps to Create Tab Headers The steps to create a tab header using the JavaScript are given below − Define a function with two parameters evt and name. Declare the ... Read More

How to create a vertical tab menu with CSS and JavaScript?

Aman Kumar
Updated on 19-Dec-2022 12:50:25

3K+ Views

In this article, we will discuss how to create a vertical tab menu with CSS and JavaScript. Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user−friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive. There are several types of tabs which can be created and used in various cases − Horizontal tabs Horizontal with Secondary Tabs Frameless Horizontal Tabs Vertical Tabs Vertical Tabs with Second Tabs ... Read More

How to create tabs with CSS and JavaScript?

Aman Kumar
Updated on 19-Dec-2022 12:44:10

6K+ Views

In this article, we are going to discuss how to create tabs with CSS and JavaScript. Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user-friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive. There are several types of tabs which can be created and used in various cases − Horizontal tabs Horizontal with Secondary Tabs Frameless Horizontal Tabs Vertical Tabs Vertical Tabs with Second Tabs ... Read More

How to create a Menu Icon with CSS?

AmitDiwan
Updated on 03-Apr-2020 07:30:34

941 Views

To create a Menu Icon with CSS, the code is as follows −Example Live Demo div {    width: 40px;    height: 7px;    background-color: blue;    margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −

How to create Icon Bar with CSS?

AmitDiwan
Updated on 14-Dec-2023 17:12:28

1K+ Views

To create Icon Bar with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the . We will create a horizontal icon bar and a vertical bar. Set the CDN for the icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − Horizontal Icon Bar To create horizontal icon bar, set the width to 100% and the overflow property to auto − ... Read More

How to Make Your Site Mobile Friendly – The Mobile SEO?

Sharon Christine
Updated on 10-May-2022 11:34:21

183 Views

Mobile phones are becoming part of our life without which we may not survive for a day. Gone are the days when these devices were only used to making calls. These days’ mobile phones are not just for calls and chatting, but also for buying products, booking appointments, order a thing or two and much more which we usually perform with our desktops and laptops.In fact, many reputed surveys indicate that nowadays more people are using their smartphones instead of desktops or laptops to perform the online activities. There are billions of users around the world prefers to surf the ... Read More

How to Make Your WebSite – “Device Friendly”

Sharon Christine
Updated on 23-Jan-2020 12:01:33

221 Views

Do you know that more than half of the world’s population is currently using internet on a regular basis through various devices? It can be a laptop, desktop, Smartphone or any other gadget. Just imagine the tremendous opportunity you have for reaching your potential customers just by doing business online. It is the easiest and quickest medium to reach to the people and let them know about your products and services. You can make hundreds and thousands of actual customers out of them, provided your e-commerce site offers superb user experiences across the various devices.Let’s say you have a built ... Read More

How to Configure Nginx as Reverse Proxy for WebSocket

Sharon Christine
Updated on 02-Nov-2023 00:49:03

43K+ Views

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 More

Advertisements