Help! Confusing behaviour with upscaling Geogebra applets

Robert T. shared this question 1 year ago
Answered

Let me explain the situation first:


I place 2 Geogebra-applets into the same HTML-document, using a scaleContainerClass:

<style type="text/css">
.cggb {
width: 740px;
max-width: 740px;
background: #f5f5f5;
}
</style>

It seems as if only the parameter max-width has an effect. The parameter width is ignored.


In the JavaScript-part of the HTML-document I use the following lines to inject two Geogebra-applets


<script>
window.onload = function () {
applet.inject("line");
applet2.inject("lage");
}
function myInit(test) {
lage.setValue("gList", 1);
lage.setValue("comsw", 1);
}
var applet = new GGBApplet({
id: "line",
ggbOnInitParam: "line",
material_id: "nPVCcn5K",
errorDialogsActive: false,
enableShiftDragZoom: true,
useBrowserForJS: false,
showFullscreenButton: true,
showResetIcon: true,
enableRightClick: false,
//height: 576,
//width: 700,
scaleContainerClass: "cggb",
allowUpscale: true,
//disableAutoScale: true,
//scale: 1.06,
preventFocus: true
}, true);

var applet2 = new GGBApplet({
id: "lage",
ggbOnInitParam: "lage",
material_id: "z4sphqhx",
errorDialogsActive: false,
enableShiftDragZoom: true,
useBrowserForJS: false,
showFullscreenButton: true,
showResetIcon: true,
enableRightClick: true,
scaleContainerClass: "cggb",
allowUpscale: true,
//disableAutoScale: true,
//scale: 1.09,
preventFocus: true,
appletOnLoad: function (api) {
myInit(api);
}
}, true);
</script>

The applets themselves are put in div-containers with

<div class="cggb" id="line"> </div>
and

<div class="cggb" id="lage"> </div> 

within the HTML-code in the table (see attachment).


1. Problem: Force scaling to use the containter class using the parameter values


scaleContainerClass: "cggb",
allowUpscale: true,
//scale: 1.06
both Geogebra-applets are scaled almost properly:


  • the first applet is wasting lots of vertical space, because the applet is scaled too big for a moment; after that it scales to the correct width - but the height of the reserved space is not resized properly.
  • after switching to fullscreen mode and switching back to normal screen mode, both applets lost the correct scaling.


2. Problem: Force scaling by defining the scale factor using the parameter values

// scaleContainerClass: "cggb", (not necessary this time)
allowUpscale: true,
disableAutoScale: true,
scale: 1.06,

both Geogebra-applets are scaled properly


  • this time no vertical space is wasted, but the problem with the wrong scaling after returning from fullscreen mode remains the same.
  • The parameter disableAutoScale is not documented, but can be found in several examples, and is pretty important in my case.


3. Problem: Allowing upscaling but without defining my own container class

//scaleContainerClass: "cggb",
allowUpscale: true,
//disableAutoScale: true,
//scale: 1.06,
causes two completely different scaling factors to be used, although both applet containers have the same parent nodes. I tried lots of things to teach the container and its parent node having the correct width, but it seems as if the Geogebra-applet cannot find the correct width.


Is there an easier way to make the Geogebra-applets scale to the table width? Why is one scaling method (ContainerClass) wasting the vertical space, while the the other method (scale-factor) is not?

Another question is: is there a command to force the Geogebra-applet to rescale, something like applet.rescale( )? It shouldn't be a problem to put it into the resize-event, but I could not find such a command.

Comments (8)

photo
2

By downloading my own applets as "activity" I found a very important line in the header of the automatically generated HTML-document:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">  
I added it to my HTML-document and removed the scaleContainerClass and allowed Upscale only:
//scaleContainerClass: "cggb",
allowUpscale: true,
//disableAutoScale: true,
//scale: 1.06,
Now the whole thing is pretty responsive (--> attachment). It doesn't answer all my questions from my 1st post, but it's a very nice discovery!

photo
2

At least I understand the behaviour which I describe in "3. Problem":

The automatic scaling is correct: Geogebra calculates the applet width respecting to the height of the browser-window and the height of the applet. After that the height of the applet will exactly fit into the browser-window. Of course this causes different widths of the both applets. So my "3. Problem" is solved.

photo
3

In the meantime I really like the responsivity! Now I have a new question still referring to the scaling subject:


Is there a way to set a limit to the maximum scale width for automatic upscaling?

photo
1

Please be patient :) if you don't get immediate answers.

Most of us are on holidays, as well as the developers, so questions sometimes just queue up for a bit longer than usual.

photo
1

> Is there a way to set a limit to the maximum scale width for automatic upscaling?Maybe using scaleContainerClass?

photo
1

Hi, Michael.

Do you have a link to an HTML with scaleContainerClass for a full newbie about HTML/CSS, please? (I have looked it for two days, without success)

photo
1

Meanwhile, I am studying HTML...

Comments have been locked on this page!

© 2019 International GeoGebra Institute