div get dimensions

[shiffman]

A small thing, but also re: p5.dom a lot of my examples require dynamically accessing the size of a DIV (which changes according to the amount of text). I may be mistaken but I believe p5 only allows for setting the dimensions with size() but for retrieving the width/height I am doing the following:

var w = div.elt.offsetWidth;
var h = div.elt.offsetHeight;

Would it make sense to have a width()/height() method that returns the dimensions?

[brysonian]

Would it make sense to integrate something like bonzo? https://github.com/ded/bonzo

---

Chandler McWilliams
http://brysonian.com

On Sat, Oct 11, 2014 at 10:03 AM, Daniel Shiffman
notifications@github.com wrote:

A small thing, but also re: p5.dom a lot of my examples require dynamically accessing the size of a DIV (which changes according to the amount of text). I may be mistaken but I believe p5 only allows for setting the dimensions with size() but for retrieving the width/height I am doing the following:

var w = div.elt.offsetWidth;
var h = div.elt.offsetHeight;

Would it make sense to have a width()/height() method that returns the dimensions?

Reply to this email directly or view it on GitHub:
https://github.com/lmccart/p5.js/issues/391

[lmccart]

@shiffman this would be great. I've been making most of the things in this library work as both setters and getters, so maybe these methods could set the w and h or return vals if arguments are null.

@brysonian interesting suggestion! we might have already implemented most of this, and in some ways slightly different than this lib, but let me take a closer look.

[brysonian]

@lmccart yeah to be more clear i guess i'm just wondering how much wheel-reinventing is necessary, but if the work is already done then that's great!

[futuremarc]

.size() now returns a string with the current width & height of the element if no arguments are provided.

However, p5 Elements already have the variables 'width' and 'height' that store the element's initial offsetWidth/offsetHeight. Should we use a naming convention like eltWidth and eltHeight?

[shiffman]

I ran some quick tests (with the following code).

var txt;

function setup() {
  noCanvas();
  txt = createDiv("Hello!");
  txt.style("background-color","#00FF00");
  txt.position(100,100);
  console.log(txt.width);
  txt.html("Hello again!")
  console.log(txt.width); 
}

function mousePressed() {
  console.log(txt.width);
  console.log(txt.size());
}

The current behavior I believe is:

• size() returns the p5.Element instance. I like the idea of it returning dimensions, but a string is not particularly useful as it will almost always need to be parsed back into numbers. What if size() returns an object with a width and height, i.e.

{
  "width": elt.offsetWidth,
  "height: elt.offsetHeight
}

• width and height both return the original width and height of the element no matter how much it changes. This would be a perfect solution as far as I'm concerned but is that original width/height being maintained for a reason I'm not aware of? An alternative would be to add width() and height() functions but that seems like overkill given we have size() already.

[futuremarc]

I think an object returned from .size() is enough.

In this spirit of doubling as a getter/setter, what if with null arguments things like .style() return an object of the elt's styles.

This could also help when considering how to more easily deal with input events. We can make the setter/getter .events() which would either return an object of events or set an event handler.

Something like:

var btn = createButton();
var div = createDiv('im a div');
btn.events().onmousedown = div.html('listening to btn');

[lmccart]

I think this syntax is a bit hard to follow. We have a mousedown event handler actually, so I wonder how it fits with this? Or are you suggesting replacing it?

btn.mousePressed( function(e) { // do stuff } )

If we wanted to add a generic event() method, I think a format like event(eventType, func) would follow the form set by style().

btn.event('mousedown', function(e) { // do stuff } );

In any case, the right side of the code above would need to be wrapped inside of a function, so it's not fired immediately, something like:

 =  function() { div.html('listening to btn'); };

[lmccart]

re: width and height, this sounds like a bug. they should be updated when the size changes, though there is still room for these to be wrong. for example, if you created an element and set the width and height manually with css rather than using the style() function, so having size() return the width and height makes sense.

[futuremarc]

• width and height attributes now return the correct value and they update on change. (though only act as getters)
• size() returns an object of width and height if empty.
• size() bug fixed: actually sets the size of an element now (the css markup !important was breaking it).
• position() returns an object of x and y if empty.
• x and y are now attributes on the element and can be accessed via elt.x or elt.y (to stay consistent. re: Properties of a dom p5.element, position? #579 )

@lmccart I guess I'm trying to find a place for things that people might want when working with form elements. What if we had an onChange() to go with the listener functions?

[futuremarc]

closed with 9015ffe