How to set the size of the applet on HTML on the initial load?

the_math-hobbyist shared this question 7 months ago
Needs Answer

Hi.

I have an applet to be inserted in HTML (as Base64 code). This applet uses the setSize JavaScript command combined with the Corner GeoGebra command to adjust the size of the applet on HTML to the content of the graphics view (when the Resize button is clicked). However, I have not could set the size on the initial load (see attached .html and .ggb files).


Initial loading: unwanted red area6d34d142ae725f77090f33702537cc1f


Following uploading: correct sizing


b22fcf54b6a8824d739d7f686eb17735

I have tried many solutions without solving this issue.


Could you help me?

Comments (6)

photo
2

Have you tried using the scaleContainerClass parameter?

http://test.geogebra.org/~m...


If that doesn't help, please explain what problem you are trying to solve exactly.

photo
1

It works fine: the initial uploading hasn't empty space now (see the attached .html document):

/wFURo4CaAHUggAAAABJRU5ErkJggg==

Thanks a lot.


Could I maintain uniform the size of the grid (x and y axes) and the size of the numbers in every loading? (please, compare sizes of both applets on the next image: they are diferent, unwanted result).


/wHYBTPph4hsWwAAAABJRU5ErkJggg==

photo
1

Today, I have come back to this applet:


I realized: if the deployggb.js file is loaded online (https://cdn.geogebra.org/ap...) the resizing didn't work (neither initial loading neither following loadings).

955b28cf0e12bd378f9a8271f85413f0


I made the following trick (I got it absolutely by chance): I added the following line to the parameters of the applet (see attachment):

showAlgebraInput: true,

It works fine now.


NOTE: If deployggb.js is loaded from my local drive, the applet works fine: in this case, the applet doesn't need the trick.

photo
photo
1

Say: to change the width and the height of the applet with each clicking of the Resize button, maintaining the size of the grid (x and y axes.)


Thanks.

photo
1

I am here with this issue again, because the size of the contents on the screen follows having variations.

I have realized:

a. If the height or the width of the HTML line:

<div style="float:left;width:800px;height:500px" class="wrap">

changes, the scale of the contents on the screen is changed proportionally (unwanted behavior, because the wanted width and height for the applet are set inside the .GGB file with the JavaScript SetSize command).

b. The width of the .SVG exported images is fixed: it doesn't depend on the HTML height. Either big, either small on the screen, when it's exported, the width is always the same: this is a wanted behavior.

c. I expect a fixed width of 800 px, while the height is variable: it depends on the volume of contents of each applet.

I have realized that when I export the content using the ExportImage command, I got a width of 803 px. So, I have to set the width to 797 inside the GGB applet, to get exactly a width of 800 px.

So, I ask your help again:

1) How can I get a uniform width of the applets on the screen (a.)?

2) Which is the reason for this difference of 3 px (c.)?

photo
2

I have followed making test about this issue:

I have realized:

1) If the sizes (width, height) set in HTML div are:

  • less than the sizes set in GGB (setSize command), the applet is shrunk so it fits the HTML div: both sizes on screen are less or equal than the specified sizes on HTML.
  • equal than the sizes set in GGB: the applet is shown with those sizes
  • greater than the sizes set in GGB, the applet is scaled to the GGB sizes and shown with those sizes (fixed size)

2) The size on the screen is slightly less than the specified one. For the width (the width is the size that I want to keep fixed) of this particular applet:

Width on the screen = 0.99 Width on HTML (div) - 5.77

3) The image exported with ExportImage command always has the wanted size (set in GGB file) more 3 px. It doesn't matter if the applet is big or small on-screen: the exporting is always with a fixed size (wanted behavior).

photo
© 2020 International GeoGebra Institute