2023-07-17 14:55:38 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
.scroll-y {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
height: 200px;
|
|
|
|
|
background-color:aquamarine;
|
|
|
|
|
}
|
|
|
|
|
.scroll-x {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
width: 400px;
|
|
|
|
|
background-color: lawngreen;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.gridcontainer {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 200px auto 200px;
|
|
|
|
|
}
|
|
|
|
|
.simpleline {
|
|
|
|
|
color: brown;
|
|
|
|
|
}
|
|
|
|
|
.item {
|
|
|
|
|
border-style:solid;
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
border-color: darkgreen;
|
|
|
|
|
background-color: lightgreen;
|
|
|
|
|
}
|
|
|
|
|
.block {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<script type ="module" defer>
|
|
|
|
|
import { SimpleLine } from "../amd/src/simpleline.js";
|
|
|
|
|
|
|
|
|
|
let line = new SimpleLine("#start","#end", {autorefresh: 10});
|
2023-07-17 17:47:37 +02:00
|
|
|
let line2 = new SimpleLine("#start2","#end2",{autorefresh: 10, anchors: {start: ["bottom","right"], end: ["top","left"]}});
|
2023-07-17 14:55:38 +02:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="scroll-y">
|
|
|
|
|
<h2> Header</h2>
|
|
|
|
|
<div class="scroll-x container">
|
|
|
|
|
<div class="gridcontainer">
|
|
|
|
|
<div id="start" class="item">Random text to show stuff</div>
|
|
|
|
|
<div class="item"><textarea></textarea></div>
|
|
|
|
|
<div></div>
|
|
|
|
|
<div></div>
|
|
|
|
|
<div></div>
|
|
|
|
|
<div id="end" class="item">More random text</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div id="start2" class="item block">Random text to show stuff</div>
|
|
|
|
|
<div class="item block"><textarea></textarea></div>
|
|
|
|
|
<div id="end2" class="item block">More random text</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
