CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ana
Ana

Reputation: 105

customize letter sizes using jQuery

I have a text field with a max length of 4 characters. I also have a layer which will allow me to show what i type in the text field into my image. However; i need to customize the sizes of the letters been typed. if someone types 4 letters the first letter should be big and the next one small. I have 4 different items where i want to include this. i was thinking of using switch statements. 

   myProjectpage.view.applySomeTextLineText = function() {
        myProjectpage.model.logTime( "applySomeTextLineText", "start" );
        var layout = myProjectpage.model.currentChoices.Layout;
        for ( var i = 0; i < layout.layers.length; i++ ) {
            layer = layout.layers[i];
            if ( layer.property ==  myProjectpage.TEXT_LINE_1 ) {
                var layerHTML = "";
                if (  myProjectpage.model.labelType == "myaddedtext" && $("#dropdownchoice1").val() == "only1textfield" ) {
                    switch( myProjectpage.model.currentChoices.TextLine1Text.length ) {
                    case 1:
                        //letters with diferent sizes.
                        break;
                    case 2:

                        break;
                    case 3:

                        layerHTML = "a" + "span style='font-size: 1.1em;>b</span>" + "c";

                        break; 
                     case 4: 
break;
                    }
                } else {
                    layerHTML = myProjectpage.model.currentChoices.TextLine1Text;

                }

Upvotes: 1

Views: 97

Answers (2)

twernt
twernt

Reputation: 20601

Assuming that layer is an HTML element and you want to apply styles directly to the element, you should be able to modify the text size with jQuery's css() function and either a switch or a set of if statements. If layer isn't an HTML element, you'll need to replace $(layer) with the appropriate selector.

Of course, you can always set up styles for the four text sizes and toggle them in your switch or if statement.

Here's a quick proof of concept example:

$(function() {
  var layer = $('#sized_text_output');

  $('#sized_text_input').on('input', function() {
    var sized_text = $(this).val();
    $('#sized_text_output').text(sized_text);

    switch (sized_text.length) {
      case 1:
        $(layer).css({ 'font-size': '4.5em' });
        break;
      case 2:
        $(layer).css({ 'font-size': '3em' });
        break;
      case 3:
        $(layer).css({ 'font-size': '1.5em' });
        break;
      case 4:
        $(layer).css({ 'font-size': '1em' });
        break;
    }

    // if (sized_text.length === 1) {
    //   $(layer).css({'font-size': '4.5em'});
    // } else if (sized_text.length === 2) {
    //  $(layer).css({'font-size': '3em'});
    // } else if (sized_text.length === 3) {
    //  $(layer).css({'font-size': '1.5em'});
    // } else if (sized_text.length === 4) {
    //  $(layer).css({'font-size': '1em'});
    // }

  })
});   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sized_text_input" maxlength="4">
<div id="sized_text_output"></div>

Upvotes: 1

Gestef
Gestef

Reputation: 128

The Code is fine I made a variable called usersText to make it a little short and not to write " myProjectpage.model.currentChoices.TextLine1Text; " all the time. It is a little hard to remember where exactly the "" go. Look at your "" and the ones i did for case 1 and 2 you will see the difference. The CharAt() method will grab the characters in the string or text the user types in. 

enter code here

myProjectpage.view.applySomeTextLineText = function() {
        myProjectpage.model.logTime( "applySomeTextLineText", "start" );
        var layout = myProjectpage.model.currentChoices.Layout;
        for ( var i = 0; i < layout.layers.length; i++ ) {
            layer = layout.layers[i];
            if ( layer.property ==  myProjectpage.TEXT_LINE_1 ) {
                var layerHTML = "";
                if (  myProjectpage.model.labelType == "myaddedtext" && $("#dropdownchoice1").val() == "only1textfield" ) {
                    var usersText =

myProjectpage.model.currentChoices.TextLine1Text; switch( myProjectpage.model.currentChoices.TextLine1Text.length ) { case 1:

 layerHTML = "<span style='font-size:2.9em;'>" + usersText.charAt(0) + "</span>";


              //letters with diferent sizes.
                        break;
                    case 2:
layerHTML = "<span style='font-size:2.5em;'>" + usersText.charAt(0) + "</span>" + "<span style='font-size:2.5em;'>" + usersText.charAt(1) + "</span>"; 
                        break;
                    case 3:

                        layerHTML = "a" + "span style='font-size: 1.1em;>b</span>" + "c";

                        break; 
                     case 4: 
break;
                    }
                } else {
                    layerHTML = myProjectpage.model.currentChoices.TextLine1Text;

                }

Upvotes: 1

Related Questions