10 Replies Latest reply on Jun 12, 2017 8:20 AM by ClayUUID

    Help bolding certain variables within text

    Squire.Amanda

      I have certain input fields within my text that I want bolded and need help!

       

      Here is the segment of my javascript code for my HTML5 canvas document that I need help with:

      this.savings.text = "If you saved <b>" + investInput + "%</b> for retirement, only about <b>$" + weeklyDeduct + "</b> would come out of your weekly pay.";

       

      I want " + investInput + " and " + weeklyDeduct + " bolded but the <b> tag does not work and shows up in the actual text instead.

       

      Any suggestions?

        • 1. Re: Help bolding certain variables within text
          kglad Adobe Community Professional & MVP

          easeljs/canvas doens't support html text. 

           

          you can add html text by editing your published files and adding html text above your canvas.

          1 person found this helpful
          • 2. Re: Help bolding certain variables within text
            EmbussyBus Level 1

            Hi, I'm also trying to make imported xml text bold in Canvas
            Did you find the solution and if so how did you do it?
            I don't understand how you add html text above the canvas

            • 3. Re: Help bolding certain variables within text
              ClayUUID Adobe Community Professional

              Create a DIV layer above the canvas, then stuff HTML text into it. Helper functions here:

              Re: How can I add video

              • 4. Re: Help bolding certain variables within text
                EmbussyBus Level 1

                Hi ClayUUID

                Thank you for your reply, I'm still in early learning stages with Animate and Canvas, I tried using the 'add video' example but I just get a blank screen when testing.
                Would you have a look and show me how to do it please? http://www.baselinegraphics.com.au/testXML.zip

                • 5. Re: Help bolding certain variables within text
                  ClayUUID Adobe Community Professional

                  It appears the problem is that my code doesn't exist anywhere in your FLA.

                  1 person found this helpful
                  • 6. Re: Help bolding certain variables within text
                    EmbussyBus Level 1

                    Hi ClayUUID,

                    In hindsight I should have posted both files, my apologies.

                    Attached is my fla with the code attached that doesn't work.

                    I'm obviously not understanding how Ito import the xml from within the makediv.

                    Here is my attempt at making it work http://www.baselinegraphics.com.au/testXML_whitescreen.zip

                    Thank you for your patience

                    • 7. Re: Help bolding certain variables within text
                      ClayUUID Adobe Community Professional

                      From your FLA:

                       

                      makeDiv(0, 0, 800, 150,

                          var Connect = new XMLHttpRequest();

                          Connect.open("GET", "GN.xml", false);

                          Connect.setRequestHeader("Content-Type", "text/xml");

                          Connect.send(null);

                       

                          var TheDocument = Connect.responseXML; // Place the response in an XML document.

                          var Customers = TheDocument.childNodes[0];

                       

                          for (var i = 0; i < Customers.children.length; i++){

                              var Customer = Customers.children[i];

                              var txt = Customer.getElementsByTagName("txt0");

                          }

                      );

                       

                      this.txtBox.text = txt[0].textContent.toString();

                       

                      I... I don't even... what? You started to make a function call... then jammed all your XML-reading code in there??

                       

                      You're getting a white screen because this isn't valid JavaScript, at all. If you open your browser's dev console you'll see the errors. And even if you'd composed your makeDiv() call correctly, it wouldn't do anything because you didn't include the function definition for it.

                      • 8. Re: Help bolding certain variables within text
                        ClayUUID Adobe Community Professional

                        Well anyway, since I didn't have much going on at work today, I hacked this out. Replace all the code in your first frame with this:

                         

                        this.stop();

                         

                        // Create an EaselJS DOMElement DIV layer above the canvas

                        // Accepts X, Y, width, height, HTML content, and CSS styling (optional)

                        // CSS styling is a CSS-formatted literal string

                        // Returns a reference to the DIV, required to remove it later

                        //

                        // DIV is added as a child to the CreateJS stage, allowing all

                        // applicable properties and methods to be used.

                        // http://www.createjs.com/docs/easeljs/classes/DOMElement.html

                        makeDiv = function(x, y, w, h, html, css) {

                            // create and initialize DIV element

                            var d = document.createElement("div");

                            d.style.cssText = "visibility:hidden; position:absolute; left:0; top:0; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

                            d.innerHTML = html;

                            // attach element to CreateJS stage

                            canvas.parentNode.appendChild(d);

                            var cjsDom = new createjs.DOMElement(d);

                            cjsDom.x = x;

                            cjsDom.y = y;

                            return stage.addChild(cjsDom);

                        }

                         

                        // load XML file

                        var req = new XMLHttpRequest();

                        req.open("GET", "GN.xml", true);

                        req.addEventListener("load", transferComplete);

                        req.send();

                         

                        // display the stuff

                        function transferComplete(e) {

                            var xmlText = e.target.responseXML.getElementsByTagName("txt0")[0].textContent;

                            makeDiv(0, 0, 800, 150, xmlText);

                        }

                         

                        This also replaces the synchronous XML loading from your old code with an asynch loader. Synchronous loading is bad... if something goes wrong, it locks up the entire browser.

                        • 9. Re: Help bolding certain variables within text
                          EmbussyBus Level 1

                          Thank you for taking the time to help me understand how the solution works I really appreciate it.

                          The more I've searched and read its become apparent the hurdle I'm trying to overcome doesn't appear to be achievable with Canvas.

                          I'm able to import text from an xml file into as many text boxes in Flash as I like but there doesn't seem to be a way to markup the imported text with bold or italics.

                          The text boxes have to be on the stage so they can be easily animated.

                          Thanks again

                          • 10. Re: Help bolding certain variables within text
                            ClayUUID Adobe Community Professional

                            EmbussyBus  wrote

                             

                            The text boxes have to be on the stage so they can be easily animated.

                            It would have been super helpful if you had mentioned that in the first place.