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
-
Economics & Finance
Articles by Dishebh Bhayana
Page 4 of 4
How to display a black navigation bar in Bootstrap?
In this article, we will learn how to display a black navigation bar in Bootstrap with the help of various Bootstrap classes, like “navbar-dark”, or “bg-dark”. Navigation bars are useful in a website as they provide easier navigation to the main contents on the platform, better accessibility throughout the website, and an overall enhanced user experience. Here, we will create a black-colored navigation bar using Bootstrap and its classes. We will be using the Bootstrap CDN in our examples below to import Bootstrap into our project. Let’s understand this with the help of some examples − Example 1 In this ...
Read MoreHow to display a dialog box on the page?
In this article, we will learn how to display a dialog box on the page using the dialog HTML tag. Dialog boxes can be a useful tool to provide feedback to users or to prompt them for input. The HTML element provides an easy way to display a dialog box on a web page. The element is not supported in all browsers, but it can be polyfilled using JavaScript to provide support for older browsers. Let’s understand how to implement a dialog box on a webpage with the help of some examples Example 1 In this example, we ...
Read MoreHow to disable mouseout events triggered by child elements?
In this article, we will learn how to disable the mouseout events triggered by child elements with the help of the “mouseleave” event or using the stopPropagation method of the native HTML event. The “mouseout” event, when triggered on a child element, bubbles up in its DOM hierarchy, and so it will also trigger the same event on all its parent elements. This can be unneeded when we only want to listen to the “mouseout” event on the parent element itself, not the bubbled-up event from its child elements. Let’s understand how to avoid the above problem with the ...
Read MoreHow to disable the input type text area?
In this article, we will learn how to disable the input type text area element with the help of a disabled attribute. Disabling an input field can be useful in situations where one wants to display information to the user but does not want the user to be able to edit or modify that information. For example, to display a message or a set of instructions in a text area element. This can also be useful in cases where one wants the user to avoid typing the content in the text area in the middle of a form submission. This ...
Read MoreHow to disable the form submit on enter button using jQuery?
In this article, we will learn how to disable the form submit behavior with the press of enter button using jQuery, and its element selector feature and “keypress” event listener. Form submission disabling can be useful in cases where it requires some validation on some input fields. For example, a form with the name and email required should not ideally have the submit button enabled until those required fields are provided with some values. In these types of cases, we can disable the form submission dynamically to achieve the desired outcome. Here, we will disable the form submission flow specifically ...
Read MoreHow to disable buttons using AngularJS?
In this article, we will learn how to disable button HTML elements using angularJS with the help of the “ng-disabled” angularJS directive. Disabled buttons can be useful in cases of forms that have some validation required on some input fields. For example, a form with the name and email required should not ideally have the submit button enabled until those required fields are provided with some values. In these types of cases, we can disable and enable the button dynamically to achieve the desired outcome. Here, we will use the “ng-disabled” angular directive to disable a button. The directive accepts ...
Read MoreHow to disable the ALT key using jQuery?
In this article, we will learn how to disable the ALT key using jQuery with the help of “keydown” and “keyup” event listeners, and the bind method. In web development, there might be scenarios where you want to disable certain keys on your web page. One such key is the ALT key, which is often used in combination with other keys to trigger specific actions or shortcuts. However, in certain cases, disabling the ALT key may be necessary to ensure the proper functioning of the application. Let’s understand this with the help of some examples − Example 1 In ...
Read MoreHow to disable a jQuery-ui draggable of widget?
We can disable a jQuery UI draggable widget with the help of its draggable disabled option. jQuery is a javascript library that helps us manipulate the DOM easily and efficiently using its various helper methods and properties. It allows us to add interactivity to the DOM as well as add and change the CSS styles of the DOM elements. Syntax $(element).draggable({ disabled: true }) We will be using the following jQuery link in our application − The above-provided code snippet is a link tag that imports the CSS file from the jQuery UI library. Example ...
Read MoreHow to Automatically Close Alerts using Twitter Bootstrap?
We can automatically close the Bootstrap Alert component by using the “close” method and “hide” class provided by Twitter bootstrap. Twitter Bootstrap Alert component is used to display an alert with a message to the user, often in response to a user action or an event. Approach 1: Using Close Method In this approach, we will use the “close” method provided by bootstrap to close the component, and we will use the setTimeout() browser API to achieve this after 5 seconds. Syntax $(alertComponent).alert(‘close’) Here, “alertComponent” is the Bootstrap Alert component, and we are calling the “close” method on this ...
Read MoreHow to apply custom color to glyphicon icon embed within a link styled with Bootstrap?
We can use glyphicons in a bootstrap project by simply giving a glyphicon-specific class to a “span” tag in HTML. Glyphicons are basically font icons that can be used anywhere in your web application, for example, in buttons, forms, inputs, texts, etc. They are provided by Bootstrap and usually consist of symbols, fonts, or graphic icons. Syntax Here, the “glyphicon” class is a Bootstrap class that allows us to use glyphicon icons in the web application, and “icon_name” refers to the particular glyphicon icon that we want to embed and use in the application. Approach 1: Using CSS ...
Read More