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
Articles by Dishebh Bhayana
Page 4 of 4
How 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 Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a “meta” tag with the “http-equiv” property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases to them, for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let’s look at the 2 approaches below to understand how to set up an auto-refreshing website. Approach 1 In this approach, we will use the “http-equiv” property of a “meta” tag to refresh our web application ...
Read MoreHow to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content to the user during the typing of an input field, we will use the “amp-autocomplete” script from the Google AMP framework. Autocompleting an input field implies suggesting relevant content to the user as and when the user starts typing. Let’s discuss the approach with an example, below − Approach We will use the “amp-autocomplete” script to add auto-suggestion of rich content on our webpage. We will also use the “amp-form” script from the Google AMP framework so as to use its amp-form component and display it in the UI, and the “amp-mustache” to give ...
Read MoreHow to arrange text in multi-columns using CSS3?
To arrange text in multi-columns we are using the “column-count” property of CSS3. The “column-count” property is used to divide an HTML element’s content into the number of columns specified. Here we are going to use two different example to demonstrate the application of “colum count” property of CSS to arrange text in 2 and 3 columns. Syntax column-count: n; Here, “n” is the positive integer value that represents the number of columns we want to arrange the text into. Example 1 In this example, we will arrange a “p” tag’s content into 3 columns by using ...
Read MoreHow to apply styles to multiple classes at once?
For Applying Styles to Muitliple classes at once we are going to use dot(.) selector and comma(, ). In this article, we will use the dot (.) selector and select all the elements with their class names using the selector and separated by a comma (, ). A “class” is an HTML attribute that accepts a list of classes separated by space. These classes can then be used in CSS to style the particular elements, or in javascript to manipulate those HTML elements. Example 1 In this example, we will apply the font color “red” to the HTML elements that ...
Read MoreHow to apply inline CSS?
Inline CSS is writing the styles for a particular HTML element inside its “style” attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally. CSS is used to apply styling to the HTML elements in a web application, and there are various ways through which we can achieve this. One of the ways of applying custom styles is by using inline CSS. Syntax Here, “tag_name” refers to any HTML tag name, and the “style” attribute of the HTML tag allows us to add inline styles to the element directly. ...
Read MoreHow to apply the hover effect over the button using SASS?
We can apply the hover effect over the button using SASS with the help of the :hover CSS selector.SASS stands for Syntactically Awesome Stylesheet and is a CSS pre-processor, which implies one can generate CSS from its respective SASS code. Using SASS instead of just writing CSS comes with its own set of advantages, like more readable code and easy-to-learn code syntax, and one can leverage these to style the HTML elements, more easily and efficiently, in a web application. In this article, we will give styling to a button element with the help of SASS. First, we will write ...
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 MoreHow to apply CSS style using jQuery?
We can use jquery’s .css() method to apply CSS style on the given webpage. 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 $(selector).css(property, value) OR $(selector).css({ property: value, property: value, … }) JQuery css() method accepts either an argument of type object, with key as the CSS property name and value as the desired property value to be set to, or ...
Read MoreHow to apply CSS style to the different elements having the same class name in HTML?
HTML classes are global attributes that are used by HTML tags to specify a list of classes that are case-sensitive in nature. These classes are then used by CSS, to apply styling to that particular tag that has the class, and by Javascript, to manipulate the HTML element’s behavior, interactivity, or styles. Approach 1; Using the dot(.) selector In this approach, we will simply use the dot (.) selector to select multiple elements having the same class names, and apply the same set of styles to them using CSS. Example In this example, we will select a “p” tag and ...
Read More