How to Control Text Properties using jQuery and UI Slider

How to Control Text Properties using jQuery and UI Slider

11 777

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

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

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

SIMILAR ARTICLES

Responsive HTML Email Template

0 118
Polaroid gallery

0 269

11 COMMENTS

  1. 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. :P (at least if you’re on mac)

  2. 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.

  3. Great use of slider. Been trying the same thing but with the jquery ui selectable interaction. Not sure if an array would work like the slider or not. Any thoughts?

  4. Is there some easy way to plug a cookie into this so if someone likes “Times New Roman” or “Helvetica”, their selections will stick?

    • Hi lia,
      it is no more difficult than other options like font family or font size. All you need – to define your own set of possible colors. And – implement it into a new slider. That’s all.

  5. I want to add this to my site, how do i do this with “linking” to:

    I dont want to save the js on my server.

    thank you

Leave a Reply