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?

[kglad · Accepted solution]

easeljs/canvas doens't support html text. 

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

[EmbussyBus]

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

[ClayUUID]

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

Re: How can I add video

[EmbussyBus]

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

[ClayUUID]

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

[EmbussyBus]

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

[ClayUUID]

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;

        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.

[ClayUUID]

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.

[EmbussyBus]

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

[ClayUUID]

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.