HTML5 Slider to Change Columns Dynamically using Javascript Example
DEMO HTML5 is a boon for all web designers that enables them to create very fast, secure and more interactive web pages. Though non...
https://www.programming-free.com/2012/08/html5-slider-to-change-columns.html
HTML5 is a boon for all web designers that enables them to create very fast, secure and more interactive web pages. Though none of the web browsers supports all of its features completely, HTML5 is the key technology that will help web designers to match with the latest industry trends. It is not just a monolithic technology but a collection of features, technologies and API's that helps anyone to create graphical, stunningly beautiful and more responsive apps.
HTML5 provides new set of input elements which not only helps to get input from users but also to validate the input provided. One of the input element is the "range" element that enables you to create a slider that dynamically changes things on the web page based on the slider count. The syntax for the range input type is,
<input max="10" min="1" name="range" required="required" steps="2" type="range" />
An HTML5 slider on a web page will typically look like this,
<input max="10" min="1" name="range" required="required" steps="2" type="range" />
An HTML5 slider on a web page will typically look like this,
Slider can be used in many ways in a web page. In this post, I am going to explain on how to use this slider to change css columns of a web page dynamically. CSS Columns is a layout element that helps divide your web content into columns. Take a look at the following css style that specifies a two column layout for the below text,
<html>
<head>
<style>
#content {
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-rule: 1px solid #bbb;
-moz-column-gap: 2em;
column-count: 2;
column-rule: 1px solid #bbb;
column-gap: 2em;
display: block;
}
</style>
</head>
<body>
<div id="content">
<span style="color: #741b47;">
ProgrammingFree.com is a blogging site that showcases many useful topics on programming in various technologies such as Java, .net, mysql, javascript.etc. Each post consists of clear explanation about the topic and working example with appropriate code and screenshots. The most popular posts are working with word documents in C#, create,analyze,manipulate zip files in c#, javascript built in functions, implement logging in java using log4j in eclipse IDE, create pie chart in java using jfreechart, insert data from a file into mysql table, C# list - linear search vs binary search, etc.
</span>
</div>
</div>
</body>
</html>
Two Column Content:
ProgrammingFree.com is a blogging site that showcases many useful topics on programming in various technologies such as Java, .net, mysql, javascript.etc. Each post consists of clear explanation about the topic and working example with appropriate code and screenshots. The most popular posts are working with word documents in C#, create,analyze,manipulate zip files in c#, javascript built in functions, implement logging in java using log4j in eclipse IDE, create pie chart in java using jfreechart, insert data from a file into mysql table, C# list - linear search vs binary search, etc.
Using Slider to Change CSS Columns dynamically
Now, we are going to use HTML5 slider, to change the number of the above text columns dynamically.With the below code, as the user moves the slider bar forward or backward, the number of text column would increase or decrease.<!DOCTYPE html>
<html>
<head>
<style>
#content {
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-rule: 1px solid #bbb;
-moz-column-gap: 2em;
column-count: 2;
column-rule: 1px solid #bbb;
column-gap: 2em;
display: block;
}
</style>
<script src="html5slider.js"></script>
</head>
<body>
<div id="content">
ProgrammingFree.com is a blogging site that showcases many useful topics on programming in various technologies such as Java, .net, mysql, javascript.etc. Each post consists of clear explanation about the topic and working example with appropriate code and screenshots. The most popular posts are working with word documents in C#, create,analyze,manipulate zip files in c#, javascript built in functions, implement logging in java using log4j in eclipse IDE, create pie chart in java using jfreechart, insert data from a file into mysql table, C# list - linear search vs binary search, etc.
</div>
<script language="Javascript">
/* * Insert slide bar
*/
var content = document.getElementById('content');
var contentStyle = content.style;
var slideBar = document.createElement('p');
slideBar.innerHTML = "<input type='range' min='1' max='6'value='2'/>";
document.body.appendChild(slideBar);
slideBar.addEventListener('change', function(event) {
contentStyle.webkitColumnCount = event.target.value;
contentStyle.MozColumnCount = event.target.value;
contentStyle.ColumnCount = event.target.value;
}, false);
</script>
</body>
</html>
The above code will generate a slider that can be used to change the number of text columns displayed. Take a look at the live demo,
Browser Support
As of now slider is supported in Chrome, Safari, Opera, and IE 10. Unfortunately this slider is not currently supported by FireFox and IE lower versions. Yet in the above code, I have added a javascript (html5slider.js) file provided by Frank Yan that makes the slider work properly in Firefox.Download or copy the javascript file named 'html5slider.js' from here and save it in the same location as your html page and include it using script tag in the html head section.
Please leave your valuable comments and queries on this post in the comments section in order for me to improve my writing skills and to showcase better posts in future. Thanks in advance.
Hey there! I was pleased as soon as I loaded this web page of your portal. What was the biggest goal the moment when you took a decision to organize your future website?
ReplyDeleteKuchi Jewels is a project of Gem & Gems which is a leading exporter since 2005 to onwards in all over the world. Our company has experienced, educated and motivated staff. Our main goal is to meet the international standard B2C and B2B export target with competitive prices and high quality products. evil eye necklace germany , evil eye necklace usa
ReplyDelete