Found 8591 Articles for Front End Technology

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

933 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

Debugging JavaScript using Firebug

Sharon Christine
Updated on 20-Jan-2020 08:14:23

780 Views

Debugging is the systematic method of removing defects. It all starts with execution of test cases. Whenever test cases are executed, the actual results are compared with expected results. If there is any lack of correspondence between the actual results and expected results, root cause analysis is done and additional tests such as regression tests are performed so as to ensure that the results are along the expected lines.To design static web pages, HTML is widely used. To develop dynamic web-based applications, JavaScript, the scripting language of the web should be used. To make their code bug-free, programmers rely on ... Read More

Angular 2 Vs Angular 1: Lets Checkout the Changes

karthikeya Boyini
Updated on 20-Jan-2020 06:20:43

211 Views

Since the inception of Angular JS, it has been widely used by many developers worldwide to build their applications. The JavaScript-based open source framework has become popular in developers community due to its great features such as simple and better way to manage MVC components, usage of JavaScript objects and many more.That is the Angular 1 with those great features which made Angular JS a popular and widely accepted framework. But as we know nothing is perfect, there is always scope for improvements, based on that philosophy now it’s time for Angular 2 which comes with many improved features.With its ... Read More

Top Bootstrap UI Tools

Sharon Christine
Updated on 16-Jan-2020 05:06:53

332 Views

When looking at a website, the most attractive thing that catches the eye is its design and the placement of elements on the page. It looks easy to implement and appealing but the pain of designing is only known to a designer. The UI kits are available in the market which can help in reducing this pain by providing ready to use frameworks and layouts.Twitter Bootstrap is one of the most popular web framework for HTML5 and has proven to be the stable and most used framework. It is very easy to implement and understand. The twitter Bootstrap helps in ... Read More

Difference between != and !== operator in JavaScript Program

Mahesh Parahar
Updated on 13-Jan-2020 06:28:36

600 Views

'!=' comparison operator'!=' operator checks the unequality of two objects without making the type check. It converts the datatype of two operands to one and then compares their value. For example 1 != '1' will results false.'!==' comparison operator'!==' operator checks the unequality of two objects with a type check. It does not converts the datatype and makes a typed check.For example 1 !== '1' will results true.Following example, shows usage of '!=' vs '!==' operators.Example    Operator Example           console.log(" 1 != '1' " + (1 != '1'));       ... Read More

Advertisements