How to Control Text Properties using jQuery and UI Slider
Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website. So, playing with styles – users will be able to select preferred styles, and you will need just save these styles for him, or, you can use this as some zoon for your website, which will allow to change font size in realtime. Also we will using jQuery slider to manipulate with properties to make it more interactive.
Here are samples and downloadable package:
Live Demo
download in package
Ok, download the source files and lets start coding !
Step 1. HTML
This is our HTML file with 4 different sliders to change styles:
index.html
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" /> <link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" /> <link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.ui.core.js"></script> <script src="js/jquery.ui.widget.js"></script> <script src="js/jquery.ui.mouse.js"></script> <script src="js/jquery.ui.slider.js"></script> <script src="js/main.js"></script> <div class="examples"> <h2>Text animation with jQuery and UI slider</h2> <div class="column"> <p> <label for="font_size">Font size:</label> <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider1"></div> </div> <div class="column"> <p> <label for="font_family">Font family:</label> <input type="text" id="font_family" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider2"></div> </div> <div class="column"> <p> <label for="font_weight">Font weight:</label> <input type="text" id="font_weight" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider3"></div> </div> <div class="column"> <p> <label for="text_align">Text align:</label> <input type="text" id="text_align" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider4"></div> </div> <div style="clear:both"></div> <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div> <div style="clear:both"></div> </div>
Step 2. CSS
Here are all used CSS files:
css/main.css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em} .column{float:left;width:45%;padding:20px} .box{-moz-border-radius:5px;background-color:#DDD;border:1px solid #000;clear:both;width:50%;margin:10px auto;padding:10px}
css/jquery.ui.slider.css, css/jquery.ui.theme.css
Both these files belong to jQuery library, and no need to publish its code directly in our post, both files already available in package
Step 3. JS
js/main.js
$(function() { $('#slider1').slider({ value:12, min: 10, max: 20, step: 1, slide: function( event, ui ) { $('#font_size').val(ui.value + ' px'); $('.box').css('font-size', ui.value); } }); $('#font_size').val($('#slider1').slider('value') + ' px'); var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia'); $('#slider2').slider({ value:1, min: 1, max: 5, step: 1, slide: function(event, ui) { var sFontFamily = aFonts[ui.value]; $('#font_family').val(sFontFamily); $('.box').css('font-family', sFontFamily); } }); $('#font_family').val(aFonts[$('#slider2').slider('value')]); var aWeights = new Array('', 'normal', 'bold', 'bolder', 'lighter', 'inherit'); $('#slider3').slider({ value:1, min: 1, max: 5, step: 1, slide: function(event, ui) { var sFontWeight = aWeights[ui.value]; $('#font_weight').val(sFontWeight); $('.box').css('font-weight', sFontWeight); } }); $('#font_weight').val(aWeights[$('#slider3').slider('value')]); var aAligns = new Array('', 'left', 'right', 'center', 'justify'); $('#slider4').slider({ value:1, min: 1, max: 4, step: 1, slide: function(event, ui) { var sTextAlign = aAligns[ui.value]; $('#text_align').val(sTextAlign); $('.box').css('text-align', sTextAlign); } }); $('#text_align').val(aAligns[$('#slider4').slider('value')]); });
Here are you can see initializations of 4 UI sliders. For changing font size, font family, bold style and text align for text of our text box. Hope this is very easy to understand how to use it.
js/jquery.min.js, js/jquery.ui.core.js, js/jquery.ui.mouse.js, js/jquery.ui.slider.js, js/jquery.ui.widget.js
All this – just jQuery libraries, its necessary for our UI slider. All these libraries available in package.
Live Demo
download in package
Conclusion
I hope that today’s article will very useful for your projects. Good luck!
I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: |
I think you should add “Helvetica Neue” as option, and the weight slider to go from 100 to 800, every 100. like 100-200-300-400-500…
That’s an awesome effect. (at least if you’re on mac)
Yes, you are right Tom, but even in Win7 I don`t feel difference with weight with step 100. Here are weight in 599 looks as not bold, more – bold. Thats all
No any other gradations.