Css control over rectangle

How can I control the height and width of objects using css. Imagine a graph describing information using rectangular objects, Now I want to change the values using css

You would use a transform in your css…
There are some examples of using transforms on the forum but you would do better by googling your question on the web.
for example

In general, the first step is to assign a Unique Element ID in the Identity Inspector. This will let you reference in CSS. However the Hype runtime does like to have control over the CSS width/height properties. You can override with the !important directive, but generally it is better to use the Hype JavaScript setElementProperty() API to set the width/height values so the Hype runtime knows about it and there aren’t conflicts. Please see this part of the docs.

Thanks for the detailed answer. I used the functions, but the problem is that the bars in My graph growing down direction and not up direction. How do I change the growing direction?


Is this the type of functionality You are referencing?

Hype Demo: GraphBarGrow_JHSv1.hype.zip (12.4 KB)

Clicking on one of the bars in this demo runs the function “GraphBarGrow” (code below) which extends them downwards from a stationary top position:

hypeDocument.setElementProperty(element, 'top', 0, 1.0, 'easeinout')
hypeDocument.setElementProperty(element, 'height', 200, 1.0, 'easeinout')

Hey guys, thanks for the interesting discussion. Any advice on how to continue this and adjust this via a text form?


I’ve attempted to give it an ID and then link up the height/top to the BlueGraph and use a On Scene Load js function, but no love:

var y = hypeDocument.getElementProperty('BlueGraphValue', 'innerHTML')
hypeDocument.setElementProperty('BlueGraph', 'top', 200-y, 1.0, 'easeinout')
hypeDocument.setElementProperty('BlueGraph', 'height', y, 1.0, 'easeinout')

And my form:

<textarea rows="1" id="BlueGraphValue" placeholder="30" cols="4" style="border: 0px; background-color: black; color:white;font-size:24px;text-align: right;"></textarea>

Thank you!

GraphBarGrow_Function.hype.zip (15.7 KB)

	//attach an event to the textarea
	BlueGraphValue.oninput = function(e){
	//try to change the input to a number
var input = Number(e.target.value);
//check wether the input is a number
//set the new height
	hypeDocument.setElementProperty(BlueGraph, 'height', input, 1.0, 'easeinout')


Sweeeeeeeeet. Danke Hans-Gerd, this is instructive as always, and well-appreciated.