P5js - How to set input text size ?

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 !

Answers

  • edited December 2015 Answer ✓

    ... 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

  • @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;
    }
    
  • Thank you very much for your answers, I am now learning CSS.

  • 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

  • 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;
      }
    
Sign In or Register to comment.