CODEWITHSUNDEEP
javascriptjqueryhtmlinputfonts
Amoku
Amoku

Reputation: 5

text properties input box for chosing a font

http://protected-river-1861.herokuapp.com/

I have alignment, colour, size and width, but I need to add at least one more. Is it possible to have an input box for fonts, where users can choose a font to use?

<p>Hover over the control names to see some useful tips</p>
<span class="simple-tooltip" title="Use this control to choose the horizontal position    of the text">Horizontal: <input type="number" value="10" id="left">
<span class="simple-tooltip" title="Use this control to choose the vertical position of   the text">Veritcal: <input type="number" value="10" id="top">
<span class="simple-tooltip" title="Use this control to choose the width of the text">Width: <input type="number" value="400" id="width"> 
<span class="simple-tooltip" title="Use this control to choose size of the text">Size:    <input type="number" value="32" id="size">
<span class="simple-tooltip" title="Use this control to choose the colour of the text

JS:

$(document).on('input', '#text', function() {
$("#caption").text($(this).val());
});
$(document).on('change', '#left', function() {    
$("#caption").css("left", $(this).val() + 'px');
});
$(document).on('change', '#top', function() {
$("#caption").css("top", $(this).val() + 'px');
});

  $(document).on('change', '#width', function() {
$("#caption").css("width", $(this).val() + 'px');
});

  $(document).on('change', '#size', function() {
$("#caption").css("font-size", $(this).val() + 'px');
});

  $(document).on('change', '#colour', function() {
$("#caption").css("color", $(this).val());
});

Upvotes: 0

Views: 85

Answers (1)

Shiva
Shiva

Reputation: 6887

Yes it is possible. You can have an additional Select element and change the font-family property as you are doing with the additional CSS properties.

Sample code will he something like this.

HTML

<form id="myform">
    <select id="font">
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana</option>
        <option value="Impact ">Impact</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>
<br/>
<div id="container">
    <p  class="changeMe" >Text into container</p>
</div>

jQuery 

$("#font").change(function () {

    $('.changeMe').css("font-family", $(this).val());

});

JsFiddle

Upvotes: 1

Related Questions