Resizing element through Javascript

[jeffgrann]

What is the best way to resize an element (like a div) through Javascript and have the GSS engine take the new width/height into account? Doing something like $('elementToResize).width(400) with jQuery does not work. If this is not currently possible, will it be in the future?

[paulyoung]

@jeffgrann I believe the release candidate(s) support this but @Inviz could confirm.

[Inviz]

That property has to be bound to intrinsic though:

button { height: == ::this[intrinsic-height]; }

Now doing

button.style.height = '50px'

will cause a mutation and gss pass.

I think it worked in all versions of gss (there're relevant Command specs under /spec folder), so switching to WIP branch is not necessary

[paulyoung]

New syntax will be as follows once it lands:

button {
  height: == &[intrinsic-height];
}

[jeffgrann]

Cool.

[paulyoung]

Also, ::[intrinsic-height] is shorthand for ::this[intrinsic-height] in the current version.

[dlee]

Can this be added to the documentation?

In fact, I think it would be good if there was an entire section devoted to how Cassowary deals with live changes to the DOM. I was quite surprised to find that Cassowary is able to detect DOM insertion/deletion. If there are caveats (such as having to use intrinsic-*) for DOM insertion/deletion, then I'd like to know about those as well.

[Inviz]

It is in documentation. There's now a computed- property family too.

Yes, GSS observes DOM mutations and it will act on style changes too. The caviat is the fact that newly applied rules will have more power than the ones that were applied before the mutation. Sometimes that matters.