DOM lib - how to specify container node?

p5.js
1

http://p5js.org/reference/#/p5/createSlider says “Appends to the container node if one is specified, otherwise appends to body.”
A. how is it specified? It doesn’t seem to be any of the arguments
B. how do I get a valid reference to a container node? I was hoping I could pass in what is returned form document.getElementByID(); and have my little elements tucked away neatly elsewhere on the page

Frustrating how ambiguous this is - I tried a few logical guesses but nothing worked.

(FWIW, I am working in global mode but preferring to use my own canvasParent etc)

In general, any best practice for “bundle this bunch of DOM library elements outside the main canvas” would also be appreciated!

2

The statement above is clearly wrong! As we can see below in its source code: :see_no_evil:

The statement var elt = document.createElement('input'); creates the element over the document, and nowhere else! :lying_face:

If it has an id attribute, we can use select() for it: :id:

For elements created inside a sketch by functions like createElement(), createSlider(), etc., simply store them in a variable. :department_store:

3

So if my js memory (and messing around in console) is correct, createElement doesn’t append it as a child to anything. So if I createSlider, is there anyway to attach it to a node I access via that select() function?

4

A p5.Element can become a child of another element via its method parent(): :family_man_woman_girl_boy:
p5js.org/reference/#/p5.Element/parent

And a p5.Element can make another element its child via its method child(): :child:
p5js.org/reference/#/p5.Element/child

5

Ok, I think I figured it out - if you have a DIV on the page with an id of sliderbox, say, you can call parent('#sliderbox')

rSlider = createSlider(0, 255, 100).parent("#sliderbox");

heh, posted it just as you were writing :smiley:
It seem a little odd to have an element attached to the body and then rip it out and assign its parent, but I can work with it.

1 Like
6

Just a lil’ tip: No need to prefix an id attribute arg w/ # for neither parent() nor child(). :wink:

7

Actually you can even leave out the quote marks and rely on the trick of how browsers give you global variables named the same as the id of elements! But that seems a little sketch-y (no pun intended)

thanks again!

1 Like
8

I almost forgot about that 1. I remember I did some experiments w/ it a long time ago. :stuck_out_tongue:

Another thing we can do is to create custom tags, like <dog></dog>, <cat></cat>, etc., and use p5.Element::select() to find the custom tag w/o any prefix to its name. :laughing:

9

Yeah, as I get a little further into this (simple toy app in global mode, with a few fixed input elements) I realize that there’s very little reason to even use the p5 Dom library. (I think I got excited by the sliders and colorPicker forgetting those are now part of html5) I can use oldschool onchange callbacks in elements I create and have full control. (For example I wanted a textarea and it’s not even clear the DOM library supports that)

10

It’s merely a mini jQuery library after all w/ a very simplified syntax: :sunglasses:

Actually, everything p5js does can be replaced moderately easy w/ plain vanilla JS. :flushed:

11

Heh, after 15 years of Processing and P5 I’d need a big ol’ page for “You Might Not Need P5” like I have for “You Might Not Need JQuery”. My understanding of what I like in the traditional P5 library and what can be found more or less native in standard canvas browser support is very weak.

(For instance, I can’t quite find the equivalent of p5.dom’s .input() for color picker - one that updates for each color selection, not just when the color picker is closed (on macs it doesn’t auto close))

12

p5.dom lib wasn’t supposed to support everything a browser offers like jQuery. :roll_eyes:

Although p5.dom offers the elt prop which points directly to the internal HTMLElement it encloses: :face_with_monocle:
p5js.org/reference/#/p5.Element/elt

For color picker, library DatGui offers a very easy implementation: :paintbrush: