HTML5 - Insert UIScrollBar

Question

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 · Accepted Answer

Hi AldorI 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 · Answer

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

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded