4 Replies Latest reply on Nov 29, 2014 6:44 AM by joel_pau

    need background color for dynamic text

    vishymuku

      Hi,

       

      I am have ajax loaded dynamic text. I've kept overflow for text box "visible".

      width: 200px, height: 30px. Since overflow is visible, the text automatically expands (vertically).

      The problem comes when i want to use background color for the text. I used this:

      sym.$("textbox").css("background-color", "red");

       

       

      But this sets the color only for 30 px. and there will be extra text hanging without a background color. Increasing the height of the box to a fixed number is not a option - if the text is small there will empty colored space in the box.

      Is there a way to dynamically set the background color to the length of text?

      Any help will be much appreciated.

      Thanks in Advance.

      Capture2.PNG

        • 1. Re: need background color for dynamic text
          joel_pau Level 5

          Hello,

           

          You have to change color when loading is over. Here are some examples.

           

          Solution #1:

          $.ajax({

            type: "GET",

            url: "myfile.json",

            datatype: "json",

            success: function(datas){

            $.each(datas.matches, function(index,item){

            var matchs = sym.createChildSymbol("calendrier","saison");

            matchs.$("rencontre").html(item.leMatch);

            });

            sym.$("textbox").css("background-color", "red");

            }

          });

           

          Solution #2:

          $.ajax({

            type: "GET",

            url: "myfile.json",

            datatype: "json",

            success: function(datas){

            $.each(datas.matches, function(index,item){

            var matchs = sym.createChildSymbol("calendrier","saison");

            matchs.$("rencontre").html(item.leMatch);

            });

            },

          complete: function(){ sym.$("textbox").css("background-color", "red"); }

          });

           

          Solution #3:

          $.ajax({

          type: "GET",

          //and so on

          }). done( sym.$("textbox").css("background-color", "red") );

          • 2. Re: need background color for dynamic text
            vishymuku Level 1

            Hi @joel_pau

             

            Thanks for the detailed options. I tried them, but none of them worked. They height of colored area remained same. (same as the one set when I initially set the text box size)

            I have tried another approach, by using a rectangle behind the text. I'll paste the code below. It works for me. Please let me know if it can be optimized.

             

            $.ajax({

                 type: "GET",

                 cache: false,

                 url: "httpp://example.com/get_message.php",

                 datatype: "json",

                 success: function(data){

                       console.log("data: ", data);

             

                        //message box is the text box created in EA

                       sym.$('messagebox').text(data[0].message);

             

                       //getting length of message

                        var strlen = data[0].message.length;

             

                       //given the font size and width of messagebox, only 12 characters can fit in a line

                        //getting number of lines required by dividing message length by 12

                       // multiplying by 50px for each line height

                      sym.$("messagebg").height(Math.ceil(strlen/12)*50+"px");

             

                      //starting the animation within this function

                      //when i tried it outside [$ajax({}).done( sym.play());]  images were only partially loaded.

                      sym.play();

                 },

                 error: function() { console.log("something went wrong"); }

            });

             

            it'll be great if you can advice on the efficacy of using sym.play(); within the ajax process.

             

            cheers,

            Capture3.PNG

            • 3. Re: need background color for dynamic text
              joel_pau Level 5

              Here are 2 JSON demos: json Demos upgraded.zip - Box

              You can post your file. You can send me your file (private message).

              • 4. Re: need background color for dynamic text
                joel_pau Level 5

                I just updated the flickr file (download link).