Scrollable Container with a scrollbar (Feature)

[NikunjShah]

To create a container which can have a text or blocks which can be scrollable. Examples -
1) Like a instruction screen displaying the instructions. 2) Objective screen 3) Achievement screen displaying all the achievements

[viki53]

Have you tried using HTML elements? They're basically the easiest solution for that kind of use…

[NikunjShah]

I have used the UI.HTMLElement but it does not provide me the functionality. If you are talking about pure HTML elements there is a issue with embedding it into the canvas element and that particular scene.

So if any suggestions do provide.

[viki53]

What's the problem with UI.HTMLElement? They should be scrollable (or at least easily styled with a bit of CSS)…

[NikunjShah]

I am not able to add any HTML in the UI.HTMLElement , I am not able to see anything on the scene.

[viki53]

Then you must be using it wrong… ;)

What's your code like?

[NikunjShah]

Here is a scene which I have created to test it out.

Q.scene('Test', function(stage) { var container=stage.insert(new Q.UI.Container({ x:Q.width/2,y:Q.height/4,fill:"rgba(0,0,0,0.1)" })); var label = container.insert(new Q.UI.HTMLElement({html:"

Nikunj is trying ;)

"})); });

Any suggestions.

[viki53]

You shouldn't be inserting HTML into a container (or any canvas-base object) : the HTML element won't be added to the scene but next to the canvas.

Look at the code to see what it looks like: https://github.com/cykod/Quintus/blob/master/lib/quintus_ui.js#L590

Try this:

var label = new Q.UI.HTMLElement({html:"Nikunj is trying ;)"}); // A div is added next to the canvas
label.el.style.position = "absolute"; // You need to position it
label.el.style.top = "0";
label.el.style.right = "0";
label.el.style.left = "0";
label.el.style.backgroundColor = "#f00"; // Add some color to make it (really) visible
console.dir(label);

[NikunjShah]

Yeah it works now I just need to make it overlap with my canvas scene. I will try that out with some CSS.

Thanks :)