Joie Joie - 6 months ago 22
Javascript Question

Change letter and word spacing with jQuery

I have the following code to change the text style in a textarea:

HTML

<!--text area-->

<textarea placeholder="paste text here" size = "12" id="text" rows="5" cols="90" ></textarea>

<!--text alter inputs-->

<br/><br/>
letter spacing: <input type="number" placeholder="#" id="letterSpace"/>

<br/><br/>
word spacing: <input type="number" placeholder="#" id="wordSpace"/>

<br/><br/>
line spacing: <input type="number" placeholder="#" id="lineSpace"/>

<!--apply changes button-->

<br/><br/><button id="go">update text!</button>


JAVASCRIPT (jQuery)

$("#go").click(function(){

//SET VARS

var letterSpace = $("#letterSpace").val();

var wordSpace = $("#wordSpace").val();

var lineSpace = $("#lineSpace").val();

//UPDATE TEXT

$("#text").css("letter-spacing", letterSpace);
$("#text").css("word-spacing", wordSpace);
$("#text").css("line-height", lineSpace);

});


and it works for the line-height but not for the letter or word spacing. Does anyone know why might this be? Thanks in advance!

Answer

I tried your code ,you just need to define the units in your JQuery code.I tried the code given by you it works for me after changing this way.

 $("#go").click(function(){

   //SET VARS

  var letterSpace = $("#letterSpace").val();

  var wordSpace = $("#wordSpace").val();

  var lineSpace = $("#lineSpace").val();

  //UPDATE TEXT

   $("#text").css("letter-spacing", letterSpace+"px");
   $("#text").css("word-spacing", wordSpace+"px");
   $("#text").css("line-height", lineSpace+"px");

});

By appending px with the numbers it worked perfectly for me.

Please let me know if this is helpful for you.

Thanks

Comments