Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to fill columns with JavaScript?
In this tutorial, we will learn how we can fill columns with JavaScript. Use the columnFill property to fill columns. Fill it as auto to fill sequentially, or balance to equally divide content between columns.
The columnFill property is the property that specifies how the columns should be filled, auto, balanced, or in any other manner.
Syntax
Following is the syntax to set the columnFill property in JavaScript −
selectedElement.style.columnFill="value";
Here the selectedElement is the element to which you want to add the columnFill property, while using style is the way of adding any CSS property to an element in JavaScript. After the style, the name of the property will come that has to be added, that is columnFill in above syntax. After doing all this, you need to provide a valid value to the property in the form of a string, that will be applied to the element when the JavaScript code is rendered.
Values of the columnFill Property −
- balanced − It is the default value that is rendered with any JavaScript document for any element. It will fill every column in the document with an equal amount of content, and it will not allow the columns to go beyond the height provided by the browser.
- initial − This value is used to set the columnFill property to its default value.
- inherit − The inherit value of the columnFill property is used to inherit or take the value from the parent of the element to which it is currently added.
- auto − The auto value of the columnFill property is used to fill the column until it reaches its height, and will fill the content until it runs out of height. Hence, this value may or may not fill all the columns equally.
NOTE − You can also use the columnCount property to add the number of columns that you want to use for the particular document. The syntax for using this will also be similar to the syntax of columnFill property. But the value that is provided will be a numerical value that is also given in the form of a string and use the columnCount instead of columnFill.
Algorithm
- STEP 1 − In step 1, we will need to create a button that triggers the columnFill property by clicking it.
- STEP 2 − In the next step, we need some content and an element that will display the content before and after clicking the button.
- STEP 3 − In the third step, we will use the JavaScript syntax as discussed above to add the columnFill property to the HTML element, and also give the number of columns in this step.
Example 1
The below example will explain the use and content distribution of the balanced value or keyword.
<html> <head> <title>How to fill columns with JavaScript? </title> </head> <body> <p>By clicking the "Fill the columns" button it will create three different columns and fill all of them "equal distribution of content", until content is ended.</p> <button onclick="display()">Fill the columns (with balance value)</button> <p id="result"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <script> function display() { document.getElementById("result").style.columnCount = "3"; document.getElementById("result").style.columnFill = "balance"; } </script> </body> </html>
In the above example, p is the demo element which equally divides its content into three columns on clicking the button using the balance value of columnFill property.
Example 2
The below example will illustrate the use and content alignment with the auto value of the columnFill property.
<html> <body> <button onclick="display()">Fill the columns(with auto value)</button> <p id="result"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <script> function display() { document.getElementById("result").style.columnCount = "3"; document.getElementById("result").style.columnFill = "auto"; } </script> </body> </html>
In above example, p is the demo element which may or may not equally divides the content into three columns on clicking the button as it is using the auto value of columnFill property.
Example 3
Below example will illustrates the use of inherit property value to the columnFill property.
<html> <body> <button onclick="display()">Fill the columns(with inherit value)</button> <h3>Content of parent will appear in three columns.</h3> <div id="columns">I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element. I'm the parent element.</div> <h3>Content of child will appear in four columns.</h3> <p id="result">I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. I'm the child element. </p> <script> function display() { document.getElementById("columns").style.columnCount = "3"; document.getElementById("columns").style.columnFill = "auto"; document.getElementById("result").style.columnCount = "4"; document.getElementById("result").style.columnFill = "inherit"; } </script> </body> </html>
In this example, div is the parent element, while p is the child element. Here, div is given the value auto, and p is inheriting the same value from the parent element to fill the columns.
In this tutorial, we learned how we can fill the columns using JavaScript and learned about the values of the columnFill property with examples.
472 Views
