Share JSXGraph: example "Fullscreen icon"

Share JSXGraph: example "Fullscreen icon"

This website is a beta version. The official release will be in **2023**.

Javascript is disabled in your browser.

This site includes the JavaScript library JSXGraph to demonstrate its functionalities. To watch this, enable JavaScript in settings of your browser and reload this page.

example

{"id":10000,"alias":"fullscreen-icon","name":"Fullscreen icon","reference":"null","content":"const board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\nvar p = board.create('point', [0, 1]),\n    c = board.create('circle', [p, 2]);","pre":"","post":"","number_of_boards":1,"description":"Clicking on the fullscreen icon □ in the navigation bar displays the construction in full screen mode.","dimensions":[{"width":"100%","height":"","aspect-ratio":"1\/1"}],"large_in_db":0,"license":null,"timestamp":"2021-12-20 19:23:00","deleted":0,"tags":[{"id":130,"alias":"technical","name":"Technical"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-66229f8809971"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\nvar p = board.create('point', [0, 1]),\n    c = board.create('circle', [p, 2]);","code_execute_html":"<div id=\"jxgbox-66229f8809971\" class=\"jxgbox shadow\" style=\"aspect-ratio: 1\/1; width: 100%;\" data-ar=\"1\/1\"><\/div>\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        let addWrapper = function (boardid, classes = [], styles = \"\") {\r\n            let board = document.getElementById(boardid),\r\n                wrapper, wrapperid = boardid + \"-wrapper\";\r\n            \r\n            wrapper = document.createElement(\"div\");\r\n            wrapper.id = wrapperid;\r\n            wrapper.classList.add(\"jxgbox-wrapper\");\r\n            \r\n            for (let c of classes)\r\n                wrapper.classList.add(c);\r\n                \r\n            wrapper.style = styles;\r\n                \r\n            board.parentNode.insertBefore(wrapper, board.nextSibling);\r\n            wrapper.appendChild(board);\r\n        }\r\n        \r\n        const FORCE_WRAPPER = false || true;\r\n        \r\n        let boardid = \"jxgbox-66229f8809971\",\r\n            wrapper_classes = \"p-3\".split(\" \"),\r\n            wrapper_styles = \"width: 100%; \",\r\n            board = document.getElementById(boardid),\r\n            ar, ar_h, ar_w, padding_bottom;\r\n        \r\n        ar = board.dataset.ar;\r\n            \r\n        if (!CSS.supports(\"aspect-ratio\", \"1 \/ 1\") && JXG.exists(ar, true)) {\r\n            \r\n            ar = ar.split(\"\/\", 3);\r\n            ar_w = ar[0].trim();\r\n            ar_h = ar[1].trim();\r\n            padding_bottom = ar_h \/ ar_w * 100;\r\n            \r\n            if (wrapper_styles !== \"\")\r\n                addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n            \r\n            board.style = \"height: 0; padding-bottom: \" + padding_bottom + \"%; \/*\" + board.style + \"*\/\";\r\n            \r\n        } else if (FORCE_WRAPPER) {\r\n            \r\n            wrapper_styles = \"\";\r\n            if (board.style.width.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"width: \" + board.style.width + \"; \"\r\n                board.style.width = \"100%\";\r\n            }\r\n            if (board.style.height.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"height: \" + board.style.height + \"; \"\r\n                board.style.height = \"100%\";\r\n            }\r\n            addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n        }\r\n    })();\r\n        <\/script>","code_execute_html_pre":"","code_execute_html_post":"","code_execute_js":"const BOARDID_66229f880996f_0 = 'jxgbox-66229f8809971';\nconst BOARDID_66229f880996f_ = BOARDID_66229f880996f_0;\n\nconst board = JXG.JSXGraph.initBoard(BOARDID_66229f880996f_, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\nvar p = board.create('point', [0, 1]),\n    c = board.create('circle', [p, 2]);","code_export_js":"\/*\nThis example is not licensed.\n*\/\n\nconst BOARDID = 'your_div_id'; \/\/ Insert your id here!\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\nvar p = board.create('point', [0, 1]),\n    c = board.create('circle', [p, 2]);","code_export_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1\/1; width: 100%;\" data-ar=\"1\/1\"><\/div>\n<\/div>\n\n<script type = \"text\/javascript\"> \n    \/*\n    This example is not licensed.\n    *\/\n    \n    const BOARDID = 'board-0';\n\n    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        showFullscreen: true,\n        axis: true,\n        boundingbox: [-5, 5, 5, -5],\n        keepaspectratio: true\n    });\n    var p = board.create('point', [0, 1]),\n        c = board.create('circle', [p, 2]);\n <\/script> ","code_export_jsfiddle_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1\/1; width: 100%;\" data-ar=\"1\/1\"><\/div>\n<\/div>\n","code_export_jsfiddle_js":"\/*\nThis example is not licensed.\n*\/\n\nconst BOARDID = 'board-0';\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\nvar p = board.create('point', [0, 1]),\n    c = board.create('circle', [p, 2]);","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Fullscreen icon<\/title>\n      <meta content=\"text\/html; charset=UTF-8\" http-equiv=\"Content-Type\" \/>\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraph.css\" \/>\n      <script src=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraphcore.js\" type=\"text\/javascript\"><\/script>\n      <style type=\"text\/css\">\nbody {\n   font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n<\/style>\n   <\/head>\n   <body>\n      <h1>Fullscreen icon<\/h1>\n      <div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n         <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1\/1; width: 100%;\" data-ar=\"1\/1\"><\/div>\n      <\/div>\n      \n      <script type = \"text\/javascript\"> \n          \/*\n          This example is not licensed.\n          *\/\n          \n          const BOARDID = 'board-0';\n      \n          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              showFullscreen: true,\n              axis: true,\n              boundingbox: [-5, 5, 5, -5],\n              keepaspectratio: true\n          });\n          var p = board.create('point', [0, 1]),\n              c = board.create('circle', [p, 2]);\n       <\/script> \n\n      \n\n      <p>For more examples have a look at our <a target=\"_blank\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/fullscreen-icon\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<jsxgraph width=\"100%\" aspect-ratio=\"1\/1\" title=\"Fullscreen icon\" description=\"This construction was copied from JSXGraph examples database: https:\/\/jsxgraph.uni-bayreuth.de\/share\/\" useGlobalJS=\"false\">\n   \/*\n   This example is not licensed.\n   *\/\n   \n   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       showFullscreen: true,\n       axis: true,\n       boundingbox: [-5, 5, 5, -5],\n       keepaspectratio: true\n   });\n   var p = board.create('point', [0, 1]),\n       c = board.create('circle', [p, 2]);\n<\/jsxgraph>","link":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/fullscreen-icon","link_raw":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/raw\/fullscreen-icon","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Fullscreen icon

Technical

Clicking on the fullscreen icon □ in the navigation bar displays the construction in full screen mode.

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});
var p = board.create('point', [0, 1]),
    c = board.create('circle', [p, 2]);

/*
This example is not licensed.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});
var p = board.create('point', [0, 1]),
    c = board.create('circle', [p, 2]);

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1/1; width: 100%;" data-ar="1/1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        showFullscreen: true,
        axis: true,
        boundingbox: [-5, 5, 5, -5],
        keepaspectratio: true
    });
    var p = board.create('point', [0, 1]),
        c = board.create('circle', [p, 2]);
 </script>

<jsxgraph width="100%" aspect-ratio="1/1" title="Fullscreen icon" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is not licensed.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       showFullscreen: true,
       axis: true,
       boundingbox: [-5, 5, 5, -5],
       keepaspectratio: true
   });
   var p = board.create('point', [0, 1]),
       c = board.create('circle', [p, 2]);
</jsxgraph>

/*
This example is not licensed.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});
var p = board.create('point', [0, 1]),
    c = board.create('circle', [p, 2]);

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1/1; width: 100%;" data-ar="1/1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        showFullscreen: true,
        axis: true,
        boundingbox: [-5, 5, 5, -5],
        keepaspectratio: true
    });
    var p = board.create('point', [0, 1]),
        c = board.create('circle', [p, 2]);
 </script>

<jsxgraph width="100%" aspect-ratio="1/1" title="Fullscreen icon" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is not licensed.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       showFullscreen: true,
       axis: true,
       boundingbox: [-5, 5, 5, -5],
       keepaspectratio: true
   });
   var p = board.create('point', [0, 1]),
       c = board.create('circle', [p, 2]);
</jsxgraph>