How to position a text field (according to stage size) in adobe animate html5 canvas

[arash6657]

Hello,

i have this code to create an input text field in adobe animate html5 canvas.but i can not to position it according to "height" and "width" of my stage.

can anybody help me and write how to set it in stage (my problem is with screen size! if i give it a position, in another sclae screen,it looks awful)?

Here are the code:

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

d.setAttribute("type","text");

// Attach element to CreateJS stage baraye Name

canvas.parentNode.appendChild(d);

var dcjs = new createjs.DOMElement(d);

dcjs.x =(stage.x)/2   ;                                          // position element here doesnt work according to my stage

dcjs.y = (stage.y)/2; ;

stage.addChild(dcjs);

[ClayUUID · Accepted solution]

You're mixing up HTML DOM and Canvas CreateJS syntax. DOM elements are positioned with left and top, not x and y. You're also attempting to get the stage width from the wrong object.

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

d.id = "myInputBox";

d.style.position = "absolute";

d.style.left = (canvas.width / 2) + "px";

d.style.top = (canvas.height / 2) + "px";

canvas.parentNode.appendChild(d);

d.focus();

There's no reason to mess with CreateJS DOMElements unless they provide some functionality that you specifically need.

[arash6657]

Thanks for your nice reply.

i also need to set this text field in middle of stage (for all screen size).could you please write how is it possible?

[ClayUUID]

You know, it doesn't hurt to try to solve these problems yourself first.

Determining the dimensions of elements - Web APIs | MDN

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

canvas.parentNode.appendChild(d);

d.id = "myInputBox";

d.style.position = "absolute";

d.style.left = (canvas.width / 2 - d.offsetWidth / 2) + "px";

d.style.top = (canvas.height / 2 - d.offsetHeight / 2) + "px";

d.focus();

[arash6657]

this code doesnt work when i resize my page.i also have this code for keeping the page fit in screen.but when i add the code above,the text field is not fit with resizing the screen.

here are the code for fit in the screen:

i tried but i couldn't succeed! i dont know how can i keep the text field according to different screen.

Could you pls help ??

////////

var page_body = document.getElementsByTagName("body")[0];

page_body.style.backgroundColor = "#FFFFFF";

page_body.style.overflow = "hidden";

page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];

stageWidth = page_canvas.width;

stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');

var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {

var head = document.getElementsByTagName('head')[0];

viewport = document.createElement('meta');

viewport.setAttribute('name', 'viewport');

head.appendChild(viewport);

}

viewport.setAttribute('content', viewportContent);

function onResize() {

var widthToHeight = stageWidth / stageHeight;

var newWidth = window.innerWidth;

var newHeight = window.innerHeight;

var newWidthToHeight = newWidth / newHeight;

if (newWidthToHeight > widthToHeight) {

newWidth = newHeight * widthToHeight;

page_canvas.style.height = newHeight + "px";

page_canvas.style.width = newWidth + "px";

} else {

newHeight = newWidth / widthToHeight;

page_canvas.style.height = newHeight + "px";

page_canvas.style.width = newWidth + "px";

}

scale = newWidthToHeight / widthToHeight;

stage.width = newWidth;

stage.height = newHeight;

page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";

page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";

  ////////Text field is not stay in page when i resize the screen???!!!!

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

canvas.parentNode.appendChild(d);

d.id = "myInputBox";

d.style.position = "absolute";

d.style.left = ((canvas.width)/20  + (d.offsetWidth *2)) + "px";

d.style.top = ((canvas.height) / 20 - d.offsetHeight / 2) + "px";

//

}

window.onresize = function () {

onResize();

  d.focus();

}

onResize();

d.focus();

[ClayUUID]

It looks like you've just copied d.focus() all over the place. Please explain why you did that, since focusing an input element has nothing to do with positioning it. All you had to do was put the positioning code in an event listener for the window being resized.

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

canvas.parentNode.appendChild(d);

d.id = "myInputBox";

d.style.position = "absolute";

centerInputBox();

d.focus();

window.addEventListener("resize", centerInputBox);

function centerInputBox() {

    d.style.left = (canvas.width / 2 - d.offsetWidth / 2) + "px";

    d.style.top = (canvas.height / 2 - d.offsetHeight / 2) + "px"

}

[arash6657]

It doesnt work.what i need, is only a screen with text field which their position do not change when i resize the browser.but when i copy the above code under my code,it still doesn't  work as you see in these images and all code bellow (there is no text field created here on center!)

this is in full screen mode :

and this pic in minimum screen mode:

and here all the code i have:

/////////

var page_body = document.getElementsByTagName("body")[0];

page_body.style.backgroundColor = "#FFFFFF";

page_body.style.overflow = "hidden";

page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];

stageWidth = page_canvas.width;

stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');

var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {

var head = document.getElementsByTagName('head')[0];

viewport = document.createElement('meta');

viewport.setAttribute('name', 'viewport');

head.appendChild(viewport);

}

viewport.setAttribute('content', viewportContent);

function onResize() {

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

canvas.parentNode.appendChild(d);

d.id = "myInputBox";

d.style.position = "absolute";

centerInputBox();

d.focus();

window.addEventListener("resize", centerInputBox);

function centerInputBox() {

    d.style.left = (canvas.width / 2 - d.offsetWidth / 2) + "px";

    d.style.top = (canvas.height / 2 - d.offsetHeight / 2) + "px"

}

var widthToHeight = stageWidth / stageHeight;

var newWidth = window.innerWidth;

var newHeight = window.innerHeight;

var newWidthToHeight = newWidth / newHeight;

//

if (newWidthToHeight > widthToHeight) {

newWidth = newHeight * widthToHeight;

page_canvas.style.height = newHeight + "px";

page_canvas.style.width = newWidth + "px";

} else {

newHeight = newWidth / widthToHeight;

page_canvas.style.height = newHeight + "px";

page_canvas.style.width = newWidth + "px";

}

scale = newWidthToHeight / widthToHeight;

stage.width = newWidth;

stage.height = newHeight;

page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";

page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";

}

window.onresize = function () {

onResize();

}

onResize();

//////

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

canvas.parentNode.appendChild(d);

d.id = "myInputBox";

d.style.position = "absolute";

centerInputBox();

d.focus();

window.addEventListener("resize", centerInputBox);

function centerInputBox() {

    d.style.left = (canvas.width / 2 - d.offsetWidth / 2) + "px";

    d.style.top = (canvas.height / 2 - d.offsetHeight / 2) + "px"

}

////

[ClayUUID]

You know you're supposed to be just pasting my code into the first frame of the timeline, correct? Stop mutilating the code that Animate generates.

[arash6657]

i did but it didn't work.i have a stage with :1920*1080 size

i copied your  code but when i run it,the text field is not exist in page.
if i set my stage smaller (800*600) , then the text field exist but even when i minimize the google chrome ,it's position will change.it is not fixed in screen.
if it works for you,could you please write the code?

[ClayUUID]

The code I provided works perfectly when pasted into a fresh HTML document. Tested in IE, Edge, Firefox, and Chrome. I have no idea what you're doing to break it.

[arash6657]

could u please see the screen shot bellow in 4 steps to see where is the problem ?i dont think it doesnt work because of safari or chrome browser.

                                             1

                                   2

                    3-as you see the text field is in right-down side! and the screen dosent show all objects(green rectangles) because its too big

                    4- when i also resize the safari screen to the smallest size,the text field disappear (its not fixed on stage)

[ClayUUID]

You said you wanted it centered on the stage, not the screen. If you resize the browser so the entire stage doesn't fit on the screen I don't know what else you were expecting to happen.

[arash6657]

I only need one thing.i have a text named: "ID" and i need a text field in front of it (which its position fixed on screen.even when i resize the screen)

like this image:

i need just a code to create a text field like it and fix it here in screen

[ClayUUID]

So now you don't want it centered on the stage anymore?

[arash6657]

no.its not important to be exactly on the center.its only like a simple login form.

i'd like to have sth like this pic

[ClayUUID]

My first post in this thread already provides the code for you to position the input field wherever you want on the stage.

[arash6657]

but that one is not fixed in screen.should i add a code to fix it with screen?

please see these 2 images:

and when i resize the screen,i need a code that all screen change smaller together.but now the result is like this:

i wrote a code above (the long text) for fixed all screen but when i wrote that with your code,the text field doesnt fixed

what should i add to your code?