Mobile-friendly Geogebra example

By Murray Bourne, formerly of intmath.com.

The following example shows how to set up a Geogebra embed so that it is responsive (mobile friendly).

Summary of the process

This follows the same concepts as applied for JSXGraph mobile-friendly apps.

  1. When defining the GGBApplet, don't include any width or height parameters. (The original had "width": 800, "height": 600, in the new GGBApplet directive.)
  2. Set up the style for the <div id="ggb-element"></div> element as follows: #ggb-element{padding-bottom:75%}. See the source code for the settings for smaller screens.
  3. On resize, remove all styles and elements associated with <div id="ggb-element"></div>, and then call the var ggbApp and inject lines again.