HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Geogebra Test</title>
</head>
<body>
<script src="Geogebra Lib/GeoGebra/deployggb.js"></script>
<script>
var params = {"appName": "classic", "width": 800, "height": 600,
"showToolBar": false, "showAlgebraInput": false ,"showMenuBar": false,
"allowStyleBar": false, "perspective": "G",
"scaleContainerClass": "right_panel"
};
var applet = new GGBApplet(params, true);
window.addEventListener("load", function() {
applet.setHTML5Codebase('Geogebra Lib/GeoGebra/HTML5/5.0/web3d/');
applet.inject('ggb-element');
});
</script>
<div id="ggb-element"></div>
<div class="right_panel"></div>
<script src="main.js"></script>
</body>
</html>
CSS:
.right_panel {
position: absolute;
width: 96px;
padding-left: 4px;
height: 100%;
right: 0;
background-color: #f0f0ff;
}
.right_panel::after {
content: '';
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: ew-resize;
}
JS:
const BORDER_SIZE = 4;
const panel = document.querySelector(".right_panel");
let m_pos;
function resize(e){
const dx = m_pos - e.x;
m_pos = e.x;
panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}
panel.addEventListener("mousedown", function(e){
if (e.offsetX < BORDER_SIZE) {
m_pos = e.x;
document.addEventListener("mousemove", resize, false);
}
}, false);
document.addEventListener("mouseup", function(){
document.removeEventListener("mousemove", resize, false);
}, false);