P5js - How to set input text size ?

jbeausej

Hello !

I am doing some tests in p5js (using version 0.5.7) and I would like to know how to customize a text input box like the one on this page: http://p5js.org/examples/examples/Dom_Input_and_Button.php

I would like to be able to set the size of the text that appears inside the createInput(); box to be way larger. Is there a way to do that ?

By the way, I see that a position variable can be accessed, how can I know all the other variables that can be accessed ?

Thank you !

GoToLoop

... text that appears inside the createInput() box to be way larger.

Easiest way is to use style() method: http://p5js.org/reference/#/p5.Element/style

input = createInput();
input.style('font-size', '20px');
//input.style('font-size: 20px'); // alt.

...how can I know all the other variables that can be accessed?

p5.js provides many methods to alter the DOM: http://p5js.org/reference/#/libraries/p5.dom

But it's limited. If we need everything, take a look at property elt:
http://p5js.org/reference/#/p5.Element/elt

blindfish

@jbeausej: learn some CSS. style() adds this on an element by element basis and is generally frowned upon by the web development community: for one thing it's difficult to maintain.

You can style specific HTML elements directly in CSS like this:

input {
    font-size: 20px;
}

Then all inputs will have their font size set.

If you need to style one differently use addClass(). In the CSS the class name is preceded by a dot:

.myClass {
    font-size: 24px;
}

jbeausej

Thank you very much for your answers, I am now learning CSS.

_vk

an old & dirty pen made while facing similar question. There is an almost invisible input field, The css and js. There's also a lot of unused stuff though...

http://codepen.io/_vk/pen/OVvEQr

blindfish

It's also worth mentioning that adding and removing classes is a particularly efficient way to show/hide elements - e.g. if you want to hide interface elements at launch:

//JS
// hide - e.g. at launch
input.addClass("hidden");

//show - e.g. on button press
input.removeClass("hidden");

-

/* CSS */
  .hidden {
     display: none;
  }