Question

I am scripting a page, where a user can add text to a image. Ok and three of the elements are that:

1. they can choose a font
2. they can select the color of the font
3. they can type in their own text.

The select option is:

<select id="selectafont" name="selectafont" style="width: 200px;" class="required">
 <option value="null">-- Select a Font ... --</option>
 <option value="folksbold">Folks Bold</option>
 <option value="arial">Arial</option>
 <option value="tahoma">Tahoma</option>
 <option value="verdana">Verdana</option>
 <option value="comicsans">Comic Sans</option>
 <option value="ubuntu">Ubuntu</option>

The color ( we use jscolor.com ) color picker.
Its element is:

<input id="pick_a_color" class="color" value="f12b63">

The input element and js I have working, but its a regular input element. That as you type updates the text within another div.

How do I add the value of the color ( from color ) picker and the font to the css of the DIV.

So lets say my input element is :

<input name="add_my_text" class="add_my_text" id="add_my_text" type="text" placeholder="Enter your Text...">

And the JS to control this and apend it to a div is:

$(document).ready(function () {
 //ad title
 $("#add_my_text").keyup(function() 
  {
  var add_my_text=$(this).val();
  $(".add_my_text").html(add_my_text);
  return false;
  });
 });

So that a div on page updates with the content typed in the input element.
The css of which is:

.add_my_text {
position:absolute;
left:150px;
top:40px;
font-size:18px;
 }

What I want to do is in the above div class ( dynamically change the font color and the font-family.

Answer 1

Something like this for the font:

$("#selectafont").change(function(){
   var font = $(this).val();
   if (font !== "null")
      $(".add_my_text").css("font-family", font);
});

And similar for the colour selection (sorry, I’m not familiar with the jscolor.com colour picker).