HTML5 - Insert UIScrollBar

[aldor10080202]

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!

[kdmemory]

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

[aldor10080202]

Thank you Klaus! I'll check it out

[aldor10080202]

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

[kdmemory · Accepted solution]

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:

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

[ClayUUID]

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

}