Highlighted

HTML5 - Insert UIScrollBar

Community Beginner ,
Apr 18, 2019

Copy link to clipboard

Copied

Dear everyone,

I'm trying to insert a Scroll Bar for several text fields (static texts) I have in my HTML5 page.

With ActionScript it is pretty easy because UIScrollBar is a component that needs simply to be added to the text.

However, i'm now in HTML5. So far, I've tried to insert a CSS component but I don't know how to link it to the texts.

Therefore I ask you: Is there a way to make UIScrollBar work in HTML5?

Thank you in advance!

Hi Aldor

I got interested and made a test for myself. It's true, that the CSS Component in an HTML5 Canvas project can only be used to style other components (like a button). The reason is that components are placed in the dom_overlay_container and as such belong to the regular DOM of the HTMLdoc. A dynamic Textfield on the other hand is part of the Canvas and can't be styled with CSS. See this experiment:

Screenshot 2019-04-18 at 14.33.54.png

But it can be done if you use the DOMElement Class of EaselJS. Have a study and try. I did it once for the purpose to have special characters like superscript and subscript in chemical formulars. It worked well in Firefox and Chrome but was too blurred in Safari. DOMElement texts sit in the dom_overlay_container and is accessible to CSS.

Klaus

TOPICS
Discussions

Views

763

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

HTML5 - Insert UIScrollBar

Community Beginner ,
Apr 18, 2019

Copy link to clipboard

Copied

Dear everyone,

I'm trying to insert a Scroll Bar for several text fields (static texts) I have in my HTML5 page.

With ActionScript it is pretty easy because UIScrollBar is a component that needs simply to be added to the text.

However, i'm now in HTML5. So far, I've tried to insert a CSS component but I don't know how to link it to the texts.

Therefore I ask you: Is there a way to make UIScrollBar work in HTML5?

Thank you in advance!

Hi Aldor

I got interested and made a test for myself. It's true, that the CSS Component in an HTML5 Canvas project can only be used to style other components (like a button). The reason is that components are placed in the dom_overlay_container and as such belong to the regular DOM of the HTMLdoc. A dynamic Textfield on the other hand is part of the Canvas and can't be styled with CSS. See this experiment:

Screenshot 2019-04-18 at 14.33.54.png

But it can be done if you use the DOMElement Class of EaselJS. Have a study and try. I did it once for the purpose to have special characters like superscript and subscript in chemical formulars. It worked well in Firefox and Chrome but was too blurred in Safari. DOMElement texts sit in the dom_overlay_container and is accessible to CSS.

Klaus

TOPICS
Discussions

Views

764

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
Apr 18, 2019 0
Advocate ,
Apr 18, 2019

Copy link to clipboard

Copied

Hi Aldor

I haven't used the CSS Component in HTML Canvas projects so far. But I'm pretty certain you can't use them on static texts. Static texts become either bitmaps on publishing (when you ticked Export document as texture (default in newer Animate versions) or they become coded to shapes in the published CreateJS javascript files. Anything CSS which would need real texts can't work here.

Maybe you start watching this quite brief and useful video about Animate CC (HTML 5) CSS Component.

Klaus

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...
Apr 18, 2019 0
Community Beginner ,
Apr 18, 2019

Copy link to clipboard

Copied

Thank you Klaus! I'll check it out

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...
Apr 18, 2019 0
Community Beginner ,
Apr 18, 2019

Copy link to clipboard

Copied

I saw the tutorial, and it works pretty fine for buttons.

I think I might need to insert and HTML text box and to apply CSS to it.

But I don't think how to insert HTML and even if Animate CC allows to make it.

Thank you

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...
Apr 18, 2019 0
Advocate ,
Apr 18, 2019

Copy link to clipboard

Copied

Hi Aldor

I got interested and made a test for myself. It's true, that the CSS Component in an HTML5 Canvas project can only be used to style other components (like a button). The reason is that components are placed in the dom_overlay_container and as such belong to the regular DOM of the HTMLdoc. A dynamic Textfield on the other hand is part of the Canvas and can't be styled with CSS. See this experiment:

Screenshot 2019-04-18 at 14.33.54.png

But it can be done if you use the DOMElement Class of EaselJS. Have a study and try. I did it once for the purpose to have special characters like superscript and subscript in chemical formulars. It worked well in Firefox and Chrome but was too blurred in Safari. DOMElement texts sit in the dom_overlay_container and is accessible to CSS.

Klaus

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...
Apr 18, 2019 2
ClayUUID LATEST
Adobe Community Professional ,
Apr 18, 2019

Copy link to clipboard

Copied

aldor10080202  wrote

Therefore I ask you: Is there a way to make UIScrollBar work in HTML5?

No, because Animate Canvas textfields do not natively support scrolling of any kind. If you want scrolling text, the easiest way is to float a DIV layer over the canvas and populate it with your text as bare-metal HTML.

Here are a couple of helper functions for adding and removing DIVs from a Canvas document.

// 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) {}

}

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...
Apr 18, 2019 2