Skip to content

Instantly share code, notes, and snippets.

@jason-s

jason-s/position-demo4.html

Created August 28, 2019 23:26
Show Gist options
  • Save jason-s/a9fc8e1405f3b9efbd0a6c1e0dd34945 to your computer and use it in GitHub Desktop.
Save jason-s/a9fc8e1405f3b9efbd0a6c1e0dd34945 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
position-demo4.html
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
canvas {
border: 1px solid black;
}
div.all {
display: flex;
flex-flow: row wrap;
}
div.column {
height: 98vh;
overflow-y: scroll;
padding-top: 5px;
padding-left: 5px;
}
div.colA {
flex-grow: 0;
}
div.colB {
flex-grow: 1;
flex-basis: 250px;
min-width: 250px;
vertical-align: top;
border: 1px solid green;
margin-left: 5px;
padding: 2px;
}
div.canvas_holder {
display: inline-block;
position: relative;https://microchipdeveloper.com/PATH/TO/PAGE
}
.canvas_annotate {
z-index: 1;
position: absolute;
}
div.canvas_title {
left: 5px;
top: 5px;
}
.canvas-zoom {
left: 5px;
bottom: 9px;
}
.canvas-zoom input {
display: block;
font-size: 140%;
}
div.zoom-button-container {
display: inline-block;
}
div.zoomscale {
width: 5px;
border: 1px solid green;
border-right: none;
margin-left: 5px;
display: inline-block;
vertical-align: top;
min-height: 100%;
}
.zoom-control {
position: relative;
display: flex;
}
div.panel1 {
display: flex;
}
div.panel1 > div.panelcolumn {
display: inline-block;
max-height: 50em;
column-count: 2;
column-gap: 0;
align-content: start;
width: 400px;
}
div.panelcolumn > p {
margin: 0;
font-size: 70%;
}
div.otherstuff {
width: 400px;
}
</style>
</head>
<body>
<div class="all">
<div class="column colA">
<div class="canvas_holder canvas_wide">
<canvas id="canvas1" height="200" width="200" ></canvas>
<div class="canvas_title canvas_annotate"> canvas1 </div>
</div>
<div class="canvas_holder canvas_wide">
<canvas id="canvas2" height="200" width="200" ></canvas>
<div class="canvas_title canvas_annotate"> canvas2 </div>
<div class="canvas-zoom canvas_annotate">
<div class="zoom-control">
<div class="zoom-button-container">
<input type="button" class="zoom" id="zoom-in" value="+"></input>
<input type="button" class="zoom" id="zoom-out" value="&#8722;"></input>
</div>
<div class="zoomscale" ></div>
</div>
</div>
</div>
<div class="panel1">
<div class="panelcolumn">
<p>The world looks mighty good to me</p>
<p>Cause Tootsie Rolls are all I see.</p>
<p>Whatever it is I think I see</p>
<p>Becomes a Tootsie Roll to me!</p>
<p>Tootsie Roll, how I love your chocolatey chew,</p>
<p>Tootsie Roll, I think I'm in love with you.</p>
<p>Whatever it is I think I see</p>
<p>Becomes a Tootsie Roll to me!</p>
</div>
</div>
<div class="otherstuff">
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
</div>
</div>
<div class="column colB">
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p><p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p><p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p><p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p><p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
<p>twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
twas brillig and the slithy toves did gyre and gimble
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment