1

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.

422
  • 5,714
  • 23
  • 83
  • 139
  • I'm not sure I understand your question. Do you want to change the font+color of every div that has the class .add_my_text when the user selects/changes the color/font from the select above? – Lior Cohen Feb 22 '12 at 00:50
  • 1
    There is another SO thread that may be useful to you at http://stackoverflow.com/questions/622122/how-can-i-change-the-css-class-rules-using-jquery (see the entry that has "Proof of Concept" in bold) – ron tornambe Feb 22 '12 at 01:00

2 Answers2

2

Haven't tested the code below, but if I understand what you're looking for, this should work:

$(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;
  });
  $('#selectafont').change(function()
  {
    var selected = $(this).val();
    if (selected != "null")
    {
      $('.add_my_text').css('font-family', selected);
    }
  });
  $('#pick_a_color').change(function()
  {
      $('.add_my_text').css('color', '#'+$(this).val());
  });
});
Lior Cohen
  • 8,985
  • 2
  • 29
  • 27
  • +1 for a more complete answer than mine. Note that you can get the current value of the select directly with `$(this).val()` - you don't have to worry about finding which option was selected. – nnnnnn Feb 22 '12 at 02:00
  • Thank you sir, wasn't sure about this one, so I didn't want to mislead @422. I've modified the answer accordingly. – Lior Cohen Feb 22 '12 at 02:02
  • Sincerely appreciate your guys help, thanks @nnnnn and Lior Cohen – 422 Feb 22 '12 at 02:32
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).

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • This relies heavily on client side fonts ( so I was gonna use fonts, that we have on the server ) so could you assist in helping us point to those fonts eg fonts/verdana.ttf etc as an example, this way we can update the font style, from server based perhaps on css class.. hence I was getting confused. Regarding the color picker.. as you change the color: via firebug input updated like: – 422 Feb 22 '12 at 01:10
  • tried using: $("#pick_a_color").change(function(){ var color = $(this).val(); if (color !== "null") $(".add_my_text").css("background-color", color); }); not working tho. – 422 Feb 22 '12 at 01:24