-1

I want to resize the text in terms of font size and later on display on another page.

<select name="fonts" id="fontBox">
    <optgroup>
        <option value="0" selected="selected">Select Font</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </optgroup>
</select>

<textarea maxlength="100" class="mycss" id="inputData" name="data" spellcheck=false wrap="physical">
</textarea>

How to truncate letters on the basis of font and fixed size of div where text is to be placed/displayed.

Antoine Subit
  • 9,803
  • 4
  • 36
  • 52
Questionare
  • 1
  • 1

2 Answers2

1

Edited: try this it will change the textarea and font base on value:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    textarea{
    width:300px !important;
    height:100px !important;
    }


    </style>
    <select name="fonts" id="fontBox">

              <option value="0" selected="selected">Select Font</option>
              <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="300">300</option>

         </select>
            <textarea maxlength="100" class="mycss" id="inputData" name="data" spellcheck=false wrap="physical"></textarea>

    <script>
    $(document).ready(function(){
        var size
        $("#fontBox").on('change',function(){
            console.log($("#inputData"));
    $("#inputData").css('font-size', +$("#fontBox").val()+"%");
    var w = $("#inputData")[0].clientWidth;
    var h = $("#inputData")[0].clientHeight;
     size = parseInt((w*h)/$("#fontBox").val());
    alert(size);
    if(size > 100){
        size = 100;
    }else{
    size = 30;

}
        });

    $('#inputData').keydown(function(){
    limitText($('#inputData'),size,size);
    });

    $('#inputData').keyup(function(){
        limitText($('#inputData'),size,size);
        });
    });


    function limitText(limitField, limitCount, limitNum) {
        if (limitField.val().length > limitNum) {
            limitField.val(limitField.val().substring(0, limitNum));
        } else {
            limitCount=limitNum - limitField.val().length;
        }
    }
    </script>

note: for your information i am setting the character length of textarea equal to the value in select box.

Suchit kumar
  • 11,809
  • 3
  • 22
  • 44
  • Thanks for reply ,But how should i restrict the user that 1280by780 div can contain how many letters or how should i calculate? – Questionare Sep 29 '14 at 09:25
  • @Questionare i will give some sample code change that according to your requirement.wait for update. – Suchit kumar Sep 29 '14 at 09:47
  • @Questionare added now try and if any problem feel free to ask. – Suchit kumar Sep 29 '14 at 09:52
  • hi suchit,this works for text area limit with respect to font size i.e font-size=characters length,but I want to ask how to limit the characters on the basis of selected font that are to be displayed on div ,if we change font to large size then it can contain only characters that fits the div width and height of div – Questionare Sep 29 '14 at 10:04
  • ,textarea can contain any number of characters but we just only find the charcaters that best suited div dimensions with respect to font size – Questionare Sep 29 '14 at 10:06
  • but you asked for how many letters.any ways let me try something. – Suchit kumar Sep 29 '14 at 10:08
  • ,maxlength:100,Step1: Select Font,Step 2: Enter text .Step 3:it should be calculated by textarea that a div of size 1280by720 can only contain how many characters that fits according to font size selected. Step : Here we have to restrict the user not to enter more then limit because the character may not show.. – Questionare Sep 29 '14 at 10:11
  • Suppose .Step1: You select font : 20 – Questionare Sep 29 '14 at 10:18
  • then what should happen. – Suchit kumar Sep 29 '14 at 10:19
  • Suppose .Step1: You select font : 20 ,Step 2: Enter text: here it contain easily 100characters in div of size 1280by720.Again Run:Step 1:font-size 300 ,Step2 : Enter text: here there should be limit of 30characters because div of size 1280by720 can only manage 30charcters ,otherwise scrolling starts.We have to manage and calculate this limit of characters. – Questionare Sep 29 '14 at 10:26
  • i have fixed the size of textarea in style part change the value to your wish.the i have tried to calculate the size this part try to set as per your requirement. – Suchit kumar Sep 29 '14 at 12:47
0

You can use the jquery functions for restricting the text. 

$("#fontBox").val(); will give the font size

After this you can set the text area maximum length according to the selected value. Refer This

Community
  • 1
  • 1
Shemil R
  • 49
  • 6