Changing the width parameter 500 to be dependent on the height using css or js code

[Ahmed Ashour]

Hello

<div id="box1" class="jxgbox" style="width: (ratio of the height) ; height:250px">
</div>

Thanks and best regards to all,

Ashour

[Alfred Wassermann]

New browsers have the CSS property aspect-ratio, see https://css-tricks.com/almanac/properties/a/aspect-ratio/ or https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

for older browsers there are fall back solutions. See e.g. Murray Bourne's talk at the first JSXGraph conference. 

Best wishes,

Alfred

[Ahmed Ashour]

Thanks, Alfred

But what I would like to do is to pass the aspect ratio as a variable using moodle and equation formula to resize the jxgbox or change the values of the width and height of the jxgbox?

Is that possible?

I can control the values of the board.

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/fb268fc2-d9df-45d6-b8fa-b46679e6ed3an%40googlegroups.com.

--

Prof Ahmed Ashour

Professor of Engineering Mechanics

Faculty of Engineering

Alexandria University

Alexandria, Egypt

[Alfred Wassermann]

I'm still not sure if I understand right. But here is another approach: If you know the desired height of the board you can resize the container div by setting CSS properties and then update the bounding box. Here is an example:

board.containerObj.style.height = "600px";
board.setBoundingBox([-20,20,20,-20], true);

Of course, one can always read the size of the board from board.containerObj.clientWidth and board.containerObj.clientHeight.

Best wishes,

Alfred

[Murray]

Ahmed

I'm also not clear what you're trying to do (a full example would be best), but hopefully this will help.

According to https://github.com/jsxgraph/moodle-filter_jsxgraph/blob/master/README.md, in Moodle you set up your construction as follows, assuming you want your construction to appear in the DIV with id="jxbox" and an aspect ratio of 3/2:

<jsxgraph width="500" aspect-ratio="3/2">
    var brd = JXG.JSXGraph.initBoard('jxbox', {boundingbox:[-5,5,5,-5], axis:true});
    var p = brd.create('point', [1,2]);
</jsxgraph>

So you already have a built-in facility for creating the board size with the desired aspect ratio.

A suggestion, though. The default Moodle setup is not phone-friendly. It would be much better to specify max-width="500" rather than "width". It means the graph will show successfully on a phone with nothing disappearing off the edge.

Anyway, within Moodle, that answers your main query, "Changing the width parameter 500 to be dependent on the height".

I'm guessing from your later question that you want to change the bounding box after a user has entered an equation. For example, if they wanted to see the graph of y = sin(x), you probably wouldn't want the upper and lower y-values to be 5 and -5, better would be, say, 1.5 or 2. Is that what you mean?

That's where you would use Alfred's suggestion of board.setBoundingBox([-20,20,20,-20], true); but in this case it would be board.setBoundingBox([-5,2,5,-2], true);

Regards

Murray