Highlighted

Scrolling text on HTML5 Canvas - Which method to use?

New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

Hi.

I have tried four methods, but are uncertain the method I prefer is in line with HTML. There may be better ways I do not know about. Please advice.

Method 1: As in the book "Beginning Adobe Animate CC. Static text inside a MovieClip, a mask layer and two arrow buttons which move the  MovieClip. It works, but it is a lot of work and I miss the scrollbar.

Method 2: Use the Label component with CSS and configure height and overflow (auto) (as well  as size, color, padding, border and so on). I like the way it works and I prefer this method. However, it comes out as a <label> element on the html page, and when I read about the label element I become uncertain whether I misuse it for wrong purposes.

Method 3: Use the jquery append a textarea to the the dom_overlay_container:

$('#dom_overlay_container').append('<textarea id="ta" readonly rows="4" cols="20">');

$('#dom_overlay_container').append('</textarea>');

$('#ta').val("Your text here...\nNext line or let it be wrapped.");

$('#ta').css("pointer-events", "all"); // to get the scrollbar to respond

Method 4: Use the jquery append a paragraph the dom_overlay_container:

$('#dom_overlay_container').append('<p id="p1">'); // if I add a '</p>', I get  two paragraphs

$('#p1').html("Your text here...<br>Next line or let it be wrapped.");

$('#p1').css({ "height" : "100px", "overflow" : "auto","pointer-events": "all"}); // plus width, border, padding and so on.

So which method should I use, or do you have a better alternative?

Best regards,

Ola Lie

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

First, requiring the entire jQuery library for something as trivial as adding DOM elements would be an absurd waste of bandwidth.

Second, both textarea and paragraph are bad choices because neither of those elements can be absolutely positioned.

Just paste in this code, which creates global functions for adding and removing DIV layers floated over the canvas.

// Create a DIV layer above the canvas

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

// CSS styling is a CSS-formatted literal string

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

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

    d.id = id;

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

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

mkDiv("mydiv", 0, 0, 500, 100, "This is a test", "color:red");

TOPICS
Discussions

Views

955

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Scrolling text on HTML5 Canvas - Which method to use?

New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

Hi.

I have tried four methods, but are uncertain the method I prefer is in line with HTML. There may be better ways I do not know about. Please advice.

Method 1: As in the book "Beginning Adobe Animate CC. Static text inside a MovieClip, a mask layer and two arrow buttons which move the  MovieClip. It works, but it is a lot of work and I miss the scrollbar.

Method 2: Use the Label component with CSS and configure height and overflow (auto) (as well  as size, color, padding, border and so on). I like the way it works and I prefer this method. However, it comes out as a <label> element on the html page, and when I read about the label element I become uncertain whether I misuse it for wrong purposes.

Method 3: Use the jquery append a textarea to the the dom_overlay_container:

$('#dom_overlay_container').append('<textarea id="ta" readonly rows="4" cols="20">');

$('#dom_overlay_container').append('</textarea>');

$('#ta').val("Your text here...\nNext line or let it be wrapped.");

$('#ta').css("pointer-events", "all"); // to get the scrollbar to respond

Method 4: Use the jquery append a paragraph the dom_overlay_container:

$('#dom_overlay_container').append('<p id="p1">'); // if I add a '</p>', I get  two paragraphs

$('#p1').html("Your text here...<br>Next line or let it be wrapped.");

$('#p1').css({ "height" : "100px", "overflow" : "auto","pointer-events": "all"}); // plus width, border, padding and so on.

So which method should I use, or do you have a better alternative?

Best regards,

Ola Lie

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

First, requiring the entire jQuery library for something as trivial as adding DOM elements would be an absurd waste of bandwidth.

Second, both textarea and paragraph are bad choices because neither of those elements can be absolutely positioned.

Just paste in this code, which creates global functions for adding and removing DIV layers floated over the canvas.

// Create a DIV layer above the canvas

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

// CSS styling is a CSS-formatted literal string

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

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

    d.id = id;

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

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

mkDiv("mydiv", 0, 0, 500, 100, "This is a test", "color:red");

TOPICS
Discussions

Views

956

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 10, 2019 0
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

First, requiring the entire jQuery library for something as trivial as adding DOM elements would be an absurd waste of bandwidth.

Second, both textarea and paragraph are bad choices because neither of those elements can be absolutely positioned.

Just paste in this code, which creates global functions for adding and removing DIV layers floated over the canvas.

// Create a DIV layer above the canvas

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

// CSS styling is a CSS-formatted literal string

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

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

    d.id = id;

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

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

mkDiv("mydiv", 0, 0, 500, 100, "This is a test", "color:red");

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 1
New Here ,
Jun 11, 2019

Copy link to clipboard

Copied

Thanks,

Your method works better than mine. I added className to the parameters so I also could use a css file. I called mkDiv from inside an init  function and it did not work; I had to change the defintion to function mkDiv(...

A question: As soon as we use components,e.g. aabutto, jquery is loaded, anyway, so do you avoid using components?

Best regards

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

JavaScript executes in the order it's called. If you tried to call mkDiv before it was declared, that's a flaw in your code. By changing to a function declaration instead of a function expression, the function will no longer be globally available (assuming your code is in Animate and not an external file).

I don't use components because they don't do what I need, and because they don't scale with the stage, and because they're nothing more than thin wrappers around standard HTML elements. The only advantage components have is that their visibility can be managed with the timeline instead of in code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 1