• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

textInput component in HTML5 Canvas application: not appearing and how to put an outline around it and give it focus with Javascript

Participant ,
Apr 03, 2019 Apr 03, 2019

Copy link to clipboard

Copied

I've added a textInput component to a HTML5 Canvas application, and when I published it today, although the box appeared yesterday, it no longer does today. Any ideas as to why that might be?

Also. how do I use Javascript to put an outline around it (inputNumber) and give it focus? The only code I have that relates to it at this point is

var textInput;

setTimeout(function()

{

    textInput = dom_overlay_container.children["inputNumber"];

    textInput.style.fontSize = "42px";

    textInput.style.fontFamily = "'Calibri', cursive, sans-serif";

}, 0);

Thanks for the help.

Mark

Views

1.8K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 04, 2019 Apr 04, 2019

I just added a stop on frame 5 and it shows. I think that you need to do that otherwise it goes to frame 9.

Votes

Translate

Translate
LEGEND ,
Apr 03, 2019 Apr 03, 2019

Copy link to clipboard

Copied

Try to add style like this and see if it works. also check out the javascript console.

$("#inputNumber").css({

        "color": "teal",

        "font-size": 18,

        "text-align": "center"

    });

Note: animate adds jquery when you add a component.

Votes

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
community guidelines
Participant ,
Apr 03, 2019 Apr 03, 2019

Copy link to clipboard

Copied

Thanks. I'm sure that this will be helpful eventually, but for now, when I run the html file after publishing, there's no sign of the textInput box. Where it should be is completely blank. Any ideas why?

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

I understand but sometimes it is your code that prevents something from showing up.

Have you checked the console to see if there is any error?

Sample :

input text formatting.zip - Box

Votes

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
community guidelines
Participant ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

First, many thanks for your help. I should have thought about checking the console. There are a slew of similar error messages that look like

Uncaught TypeError: Cannot read property 'css' of null

    at $.(anonymous function).(anonymous function).applyProperties (file:///Users/bishopmark/Documents/Canvas_animations/atoms_glossary_Canvas/atoms_glossary_1/components/sdk/anwidget.js:176:9)

    at $.(anonymous function).(anonymous function).update (file:///Users/bishopmark/Documents/Canvas_animations/atoms_glossary_Canvas/atoms_glossary_1/components/sdk/anwidget.js:161:9)

    at lib.an_TextInput._handleDrawEnd (atoms_glossary_1_Canvas.js:5713)

    at createjs-2015.11.26.min.js:12

    at lib.Stage.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b.dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b.update (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.handleEvent (createjs-2015.11.26.min.js:13)

    at Function.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at Function.b.dispatchEvent (createjs-2015.11.26.min.js:12)

Removing the only code that relates to the inputText component does not help. I get the same error messages.  Could this be related to something I've done in the publish settings?

thanks again

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

Another idea. Delete that one and add a new one. Sometimes something quirky happens and I replace the components and it works.

Otherwise, could you post a link to your files or if you have copyright concerns PM me the link?

Votes

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
community guidelines
Participant ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

I thought of that too, but deleting the textInput component and replacing it didn't help. Here are links.

http://preparatorychemistry.com/atoms_glossary_1_Canvas.html

http://preparatorychemistry.com/atoms_glossary_1_Canvas.js

http://preparatorychemistry.com/atoms_glossary_1_Canvas.fla

I'm converting my old flash applications to HTML5 Canvas. It's a bit of a mess because I've just started the process, and I'm in the try-this-try-that phase. Here's the Flash version.

http://preparatorychemistry.com/Glossary_atoms_1_flash.htm

The new .fla file was made from scratch rather than exporting the old Flash .fla file.

Votes

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
community guidelines
Participant ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

You see the page with the missing textInput component after clicking the Next button. It should be right below the text that ends with :...terms."

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

Yes. I see it flicker and disappear.

Let me look at your file.

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

I just added a stop on frame 5 and it shows. I think that you need to do that otherwise it goes to frame 9.

Votes

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
community guidelines
Participant ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

Wow...your are awesome. Many thanks. Now on to the next problems.

Votes

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
community guidelines
Participant ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

I still get some errors in the console. At the risk of overstaying my welcome, do you have any ideas as to why that is?

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

Not sure. There seems to be an error in the component. Let me look at it and see if I can find why.

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

OK. This is due to the other input text. Replace it with a new one. The error will go away then.

Votes

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
community guidelines
LEGEND ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

Votes

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
community guidelines
Participant ,
Apr 05, 2019 Apr 05, 2019

Copy link to clipboard

Copied

Thanks again. There still seems to be a problem. With your corrected file, the following function is not run the first time that the application moves to frame 5 (by clicking on the Next button). If I click the restart button and then the Next button to return to frame 5, the function runs fine. The mystery comes when I duplicate your code in my file, it does something different. The function never runs. The textInput box appears the first time I visit frame 5 but disappears the second time. I replaced the textInput component, but it does the same thing. Odd and maybe just a bit frustrating.

setTimeout(function () {

$("#inputNumber").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });

}, 0);

Votes

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
community guidelines
LEGEND ,
Apr 05, 2019 Apr 05, 2019

Copy link to clipboard

Copied

Add an instance off stage of all the text inputs you will target later in frame one and it will work. Sorry I must have deleted them inadvertently.

Each instance will need its own css code. If they are the same then just copy (like below) and change the name in the setTimeout function.

If you have a lot a components you need to target then you could use the css component and make a style sheet.

Hope this helps.

Forget the corrected file. Something weird is happening there.

Example:

setTimeout(function () {

$("#inputNumber").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });

   

$("#inputterm").css({

        "color": "teal",

        "font-size": 42,

        "text-align": "center"

    });   

}, 0);

Votes

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
community guidelines
LEGEND ,
Apr 05, 2019 Apr 05, 2019

Copy link to clipboard

Copied

LATEST

BTW, you need to reset the css in your restart button too.

You could also use the css component if you prefer in which case you will need a style sheet to load with it.

Votes

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
community guidelines
LEGEND ,
Apr 03, 2019 Apr 03, 2019

Copy link to clipboard

Copied

YOu can also restrict your input to only digits like this:

function what_change(evt) {

        var regex = /[^0-9]/g;

        evt.target.value = evt.target.value.replace(regex, "");

          // add any code you need to check the input value


    }

    $("#dom_overlay_container").on("keyup", "#nameofInputtext ", what_change.bind(this));

Change  nameofInputtext to your input instance name

Votes

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
community guidelines
LEGEND ,
Apr 03, 2019 Apr 03, 2019

Copy link to clipboard

Copied

and you can restrict the length of the input like this:

dom_overlay_container.children["imputTextName"].maxLength = 2;

Votes

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
community guidelines