div get dimensions #391

Activity

1. shiffman

   added

   Enhancement

   on Oct 11, 2014
2. brysonian commented on Oct 11, 2014

   

   brysonian

   on Oct 11, 2014

   Contributor

   More actions

   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
3. lmccart commented on Oct 13, 2014

   

   lmccart

   on Oct 13, 2014

   Member

   More actions

   @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.
4. brysonian commented on Oct 13, 2014

   

   brysonian

   on Oct 13, 2014

   Contributor

   More actions

   @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!
5. sarahghp

   added

   Area:DOM

   Area:Color

   and removed

   Area:Color

   on May 26, 2015
6. workergnome

   added

   Feature Request

   and removed

   Enhancement

   on May 26, 2015
7. futuremarc

   self-assigned this

   on Jun 12, 2015
8. futuremarc commented on Jun 13, 2015

   

   futuremarc

   on Jun 13, 2015

   Contributor

   More actions

   .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?
9. shiffman commented on Jun 13, 2015

   

   shiffman

   on Jun 13, 2015

   MemberAuthor

   More actions

   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.
10. futuremarc commented on Jun 13, 2015

    

    futuremarc

    on Jun 13, 2015

    Contributor

    More actions

    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');
11. lmccart commented on Jun 13, 2015

    

    lmccart

    on Jun 13, 2015

    Member

    More actions

    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'); };
12. lmccart commented on Jun 13, 2015

    

    lmccart

    on Jun 13, 2015

    Member

    More actions

    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.
13. futuremarc commented on Jun 18, 2015

    

    futuremarc

    on Jun 18, 2015

    Contributor

    More actions

    • 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?
14. futuremarc commented on Jun 29, 2015

    

    futuremarc

    on Jun 29, 2015

    Contributor

    More actions

    closed with 9015ffe
15. futuremarc

    closed this as completedon Jun 29, 2015