Create Previous and Next Buttons Using JavaScript

Dishebh Bhayana
Updated on 22-Feb-2023 11:35:10

1K+ Views

We can create previous and next buttons that would be non-working (or disabled) at their end positions by using vanilla javascript. Javascript is a powerful browser-level language with which we can control and manipulate the DOM elements easily. Here, we will create 2 buttons, and change an HTML element’s content depending on which button is clicked. Example 1 In this example, we will create an “increment” and a “decrement” button which, when clicked, will increment and decrement the HTML element’s content value by 1, respectively. We will also disable the buttons when they reach their extreme positions, which will be ... Read More

Create Pagination in Bootstrap 4

Dishebh Bhayana
Updated on 22-Feb-2023 11:34:27

398 Views

To implement pagination in our web application, we use the different classes provided to us in Bootstrap 4, like “pagination”, “page-item”, “active”, “disabled”, and so on. Pagination means specifying a page number for a particular page in a series of pages. This could apply to a web application that has lots of pages, a book, or any other entity that has a series of data that we only want to display a part of it at a time. Let’s discuss more about these classes and how we can use them to create a paginated layout in the examples below − ... Read More

Create Numbering Using Counter Increment Property in CSS

Dishebh Bhayana
Updated on 22-Feb-2023 11:33:22

381 Views

The “counter-increment” property given in CSS is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage. We will also use the “counter-reset” CSS property here, which helps us to reset or initialize the CSS counter value to a desired number. Syntax counter-increment − css-counter increment-value; Here, the css-counter refers to the counter variable declared in CSS, and the increment-value refers to the value by which you want to increment or ... Read More

Difference Between Add and Offer Methods in Queue in Java

Sonal Meenu Singh
Updated on 22-Feb-2023 11:33:05

3K+ Views

Queue in Java is a linear data structure with various functions. A Queue has two endpoints and it follows the First-In-First-Out (FIFO)principle to insert and remove its elements. In this tutorial, we will look at two important functions of the queue in Java and they are add() and offer(). What is Queue? A queue in java is an interface that extends the util and collection packages. The elements are inserted at the Rear end and removed from the Front end. A queue in java can be implemented by using the classes of linked list, DeQueue, and priority queue. A priority ... Read More

Automatically Close Collapsible Elements in Accordion

Dishebh Bhayana
Updated on 22-Feb-2023 11:32:25

2K+ Views

We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the “hide” collapse event by attaching an event listener to the parent accordion. After that, when the “hide” collapse event gets fired, we will find all the collapsible elements inside that ... Read More

Automatically Close Alerts Using Twitter Bootstrap

Dishebh Bhayana
Updated on 22-Feb-2023 11:30:51

3K+ Views

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 More

Automatic Refresh a Web Page in Fixed Time

Dishebh Bhayana
Updated on 22-Feb-2023 11:29:41

9K+ Views

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 More

Auto-Suggest Rich Content in Google AMP

Dishebh Bhayana
Updated on 22-Feb-2023 11:28:31

137 Views

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 More

Auto Adjust Font Size Using CSS

Dishebh Bhayana
Updated on 22-Feb-2023 11:26:50

1K+ Views

We can adjust the font size of the text using the “font-size-adjust” property given to us by the CSS. The “font-size-adjust” property allows us to adjust to a common font size regardless of the different font families used in the document if any. With this, we can adjust the font size of the lower-case letters, used in the document, with respect to the font size of the uppercase letters in the document. Syntax font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset “font-size-adjust” can take on many values that are listed above. These values ... Read More

Use Simple Queue Instead of Priority Queue for Dijkstra's Algorithm

Sonal Meenu Singh
Updated on 22-Feb-2023 11:25:00

3K+ Views

Introduction Dijkstra’s Algorithm is used to find the shortest possible distance between two objects. To implement this algorithm we mostly use Priority Queue. In this tutorial, we will find the answer to whether can we use a simple queue to implement Dijkstra’s algorithm instead of a Priority Queue. What is a Priority Queue and A Queue? A queue is a linear array of data. It represents the Queue of real life. A simple Queue uses FIFO (First In First Out) approach for its deQueue and enQueue operations. A priority Queue is a type of Queue that deQueue its elements with ... Read More

Advertisements