How to Control Text Properties using jQuery and UI Slider

How to Control Text Properties using jQuery and UI Slider

11 73025

jQuery UI Slider tutorial. 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

[sociallocker]

download in package

[/sociallocker]


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


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?

    • Sure that UI selectable interaction?
      Like here : http://jqueryui.it/demos/selectable ?
      Basically – we changing element styles (text) on events of our initiate element (slider), what about you? what you trying to do?

  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?

    • Hello Hmm,
      Yes, you can use cookies to store styles, I can direct you here:
      http://www.w3schools.com/js/js_cookies.asp

    • 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

    • i mean linking on the jquery server
      like: http://code.jquery.com/jquery-1.9.1.js” type=’text/javascript’
      http://code.jquery.com/ui/1.10.4/jquery-ui.js” type=’text/javascript’

      • Hi drykorn,
        If these libraries are already linked at your website – this is obviously that you don’t need to link them twice. But anyway – you need to link it at least once, because the script uses jQuery UI functions

Leave a Reply to admin Cancel reply